/* ============================================================
   Payment Collection System - Main Stylesheet
   ============================================================ */
:root {
  --brand-primary: #2563eb;
  --brand-secondary: #06b6d4;
  --brand-dark: #0f172a;
  --brand-navy: #0b1220;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --bg: #f6f8fb;
  --card: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow-lg: 0 25px 60px rgba(15,23,42,.14);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.fw-600{font-weight:600} .fw-700{font-weight:700} .fw-800{font-weight:800}

.text-gradient {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Buttons ---------- */
.btn-brand {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
  color:#fff; font-weight: 600; border: none;
  border-radius: 12px; padding:.75rem 1.25rem;
  box-shadow: 0 8px 22px rgba(37,99,235,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-brand:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.34); }
.btn-icon { border-radius: 10px; padding:.4rem .55rem; color: var(--text); background: #fff; border:1px solid var(--border); }
.btn-icon:hover { background:#f1f5f9; }

/* ---------- Cards ---------- */
.glass-card {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.card-panel {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem;
  border: 1px solid var(--border);
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1rem; flex-wrap:wrap;
}

/* ---------- Landing / Login ---------- */
.landing-body, .login-body, .pay-body { position:relative; min-height:100vh; overflow-x:hidden; }
.landing-bg, .login-bg, .pay-bg {
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(55% 55% at 85% 80%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(140deg, #0b1220, #0f172a 60%, #0a1a2f);
}
.pay-bg { background: radial-gradient(70% 60% at 10% 15%, rgba(37,99,235,.20), transparent 60%),
                       radial-gradient(70% 60% at 90% 85%, rgba(6,182,212,.20), transparent 60%),
                       linear-gradient(160deg, #f6f8fb, #eef3fa); }
.brand-badge {
  width:72px; height:72px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:#fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  box-shadow: 0 18px 40px rgba(37,99,235,.35);
}
.brand-badge-sm { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:#fff; background: linear-gradient(135deg,var(--brand-primary),var(--brand-secondary)); }
.brand-logo { height: 52px; width: auto; border-radius: 10px; }
.brand-logo-sm { height: 34px; width:auto; border-radius: 8px; }
.login-card { max-width: 460px; width:100%; }

/* ---------- Payment page ---------- */
.amount-box {
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.10));
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 16px; padding: 1.25rem 1.5rem;
}
.meta-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.meta-item { border-top: 1px dashed var(--border); padding-top: .6rem; }
.meta-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); font-weight:700; }
.meta-value { font-weight:600; }
.order-desc { background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; }

/* ---------- Method selector ---------- */
.method-list { display:flex; flex-direction:column; gap:.6rem; }
.method-card {
  display:flex; align-items:center; gap:1rem;
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: .9rem 1rem; cursor:pointer; transition: all .2s;
  background:#fff;
}
.method-card:hover { border-color: rgba(37,99,235,.5); }
.method-card.selected { border-color: var(--brand-primary); box-shadow: 0 6px 20px rgba(37,99,235,.16); background: linear-gradient(180deg,#fff, #f4f8ff); }
.method-icon { width:46px; height:46px; border-radius:12px; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(6,182,212,.14));
  display:flex; align-items:center; justify-content:center; color: var(--brand-primary); font-size:20px; flex:0 0 46px; }
.method-check { color: var(--brand-primary); opacity:0; transform: scale(.8); transition: all .15s; }
.method-card.selected .method-check { opacity:1; transform: scale(1); }
.instructions-box {
  background:#f0f9ff; border:1px solid #bae6fd; border-radius: 12px;
  padding:.85rem 1rem; color:#075985; font-size:.9rem;
}

/* ---------- Countdown pill ---------- */
.countdown-pill {
  display:inline-block; margin-left:.5rem;
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
  color:#fff; font-size:.72rem; font-weight:700;
  border-radius: 999px; padding: .15rem .55rem;
}
.countdown-pill.expired { background:#64748b; }

/* ---------- Status heroes ---------- */
.status-hero { text-align:center; padding: 1.5rem .5rem; }
.status-hero h3 { font-weight: 800; margin-bottom: .35rem; }
.status-icon {
  width: 78px; height: 78px; margin: 0 auto 1rem;
  border-radius: 24px; display:flex; align-items:center; justify-content:center;
  font-size: 36px; color:#fff;
}
.status-success .status-icon { background: linear-gradient(135deg,#16a34a,#22c55e); box-shadow: 0 15px 30px rgba(34,197,94,.35); }
.status-danger  .status-icon { background: linear-gradient(135deg,#dc2626,#ef4444); box-shadow: 0 15px 30px rgba(239,68,68,.35); }
.status-warning .status-icon { background: linear-gradient(135deg,#d97706,#f59e0b); box-shadow: 0 15px 30px rgba(245,158,11,.35); }
.status-muted   .status-icon { background: linear-gradient(135deg,#475569,#64748b); box-shadow: 0 15px 30px rgba(100,116,139,.30); }
.status-info    .status-icon { background: linear-gradient(135deg,#0284c7,#0ea5e9); box-shadow: 0 15px 30px rgba(14,165,233,.35); }
.reason-box {
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  padding:.75rem 1rem; border-radius: 12px; font-size:.9rem; margin-top:.75rem;
}
.submission-summary {
  background:#f8fafc; border:1px solid var(--border);
  border-radius: 14px; padding: 1rem;
}
.screenshot-thumb { max-width: 220px; border-radius: 12px; border:1px solid var(--border); box-shadow: var(--shadow); }
.screenshot-thumb-lg { max-width: 100%; border-radius: 12px; border:1px solid var(--border); box-shadow: var(--shadow); }

/* ---------- Status badge ---------- */
.status-badge { padding:.35rem .65rem; font-weight:700; font-size:.75rem; border-radius: 999px; }

/* ---------- Admin layout ---------- */
.admin-body { background: #f1f5f9; }
.admin-sidebar {
  position: fixed; top:0; left:0; bottom:0; width: 260px;
  background: linear-gradient(180deg, #0b1220, #0f172a);
  color: #cbd5e1; padding: 1.25rem 1rem; z-index: 1040;
  transform: translateX(0); transition: transform .25s ease;
}
.sidebar-brand { display:flex; align-items:center; gap:.75rem; color:#fff; padding:.5rem .5rem 1.5rem; }
.sidebar-nav { display:flex; flex-direction:column; gap:.25rem; }
.nav-item {
  display:flex; align-items:center; gap:.75rem;
  color:#cbd5e1; text-decoration:none; font-weight:600;
  padding:.7rem .9rem; border-radius: 12px; font-size:.93rem;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color:#fff; }
.nav-item.active { background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary)); color:#fff;
  box-shadow: 0 8px 20px rgba(37,99,235,.35); }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1030; }
.admin-main { margin-left: 260px; padding: 1rem 1.5rem 3rem; min-height: 100vh; }
.admin-topbar {
  display:flex; align-items:center; gap:1rem;
  padding: 1rem 0 1.25rem;
}
.page-title { font-weight:800; font-size:1.35rem; margin:0; }
.btn-user { display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--border);
  border-radius: 999px; padding:.35rem .85rem .35rem .35rem; font-weight:600; }
.avatar { width:34px; height:34px; border-radius:50%; background: linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; }
@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display:block; }
  .admin-main { margin-left: 0; }
}

/* ---------- Stat cards ---------- */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.stat-card {
  background:#fff; border-radius: 16px; padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow); display:flex; align-items:center; gap:1rem;
  border:1px solid var(--border);
}
.stat-icon { width:52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex:0 0 52px;}
.stat-label { font-size:.78rem; color: var(--text-muted); font-weight:700; text-transform: uppercase; letter-spacing:.05em;}
.stat-value { font-size:1.45rem; font-weight:800; }
.stat-highlight { background: linear-gradient(135deg,#0b1220,#0f172a); color:#fff; border-color: transparent; }
.stat-highlight .stat-label { color:#94a3b8; }
.bg-primary-soft { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.bg-warning-soft { background: linear-gradient(135deg,#f59e0b,#d97706); }
.bg-info-soft    { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.bg-success-soft { background: linear-gradient(135deg,#22c55e,#16a34a); }
.bg-danger-soft  { background: linear-gradient(135deg,#ef4444,#dc2626); }
.bg-secondary-soft { background: linear-gradient(135deg,#64748b,#475569); }
.bg-gradient { background: linear-gradient(135deg,var(--brand-primary),var(--brand-secondary)); }

/* ---------- Tables ---------- */
.admin-table { --bs-table-bg: transparent; font-size:.93rem; }
.admin-table thead th {
  font-size:.72rem; text-transform: uppercase; letter-spacing:.05em;
  color: var(--text-muted); border-bottom:1px solid var(--border); font-weight:800;
}
.admin-table tbody tr { border-color:#f1f5f9; }
.admin-table tbody tr:hover { background:#f8fafc; }

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 3rem; color:#cbd5e1; margin-bottom: .75rem; display:block; }

/* ---------- Success panel ---------- */
.success-panel { text-align:center; }
.success-panel .success-icon {
  width:72px; height:72px; margin:0 auto 1rem; border-radius: 22px;
  background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  box-shadow: 0 15px 30px rgba(34,197,94,.35);
}
.copy-row { display:flex; gap:.5rem; max-width: 720px; margin: 1rem auto 0; flex-wrap: wrap; }
.copy-row .form-control { flex: 1 1 320px; min-width: 240px; font-family: ui-monospace, monospace; font-size:.85rem; }

/* ---------- Method manage card ---------- */
.method-manage-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow: var(--shadow); }
.method-manage-card.is-disabled { opacity:.6; }

/* ---------- Receipt ---------- */
.receipt-body { background: #eef2f7; }
.receipt-card { background:#fff; border-radius: 20px; padding: 2rem; max-width: 720px; box-shadow: var(--shadow-lg); }
.receipt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:2px dashed var(--border);}
.receipt-status {
  display:inline-flex; align-items:center; gap:.5rem;
  margin: 1.25rem 0; padding:.5rem .9rem; border-radius: 999px;
  background: #dcfce7; color:#166534; font-weight: 800; letter-spacing:.05em;
}
.receipt-table { width:100%; }
.receipt-table td { padding:.65rem 0; border-bottom:1px solid #f1f5f9; font-size:.95rem;}
.receipt-table td:first-child { color: var(--text-muted); font-weight: 600; width: 45%; }
.receipt-table td:last-child  { text-align:right; font-weight: 700; }
.receipt-total {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1rem 0; margin-top: .5rem;
  font-size:1.15rem; font-weight: 800;
  border-top:2px solid var(--text);
}
.receipt-foot { text-align:center; color: var(--text-muted); font-size:.85rem; margin-top: 1.5rem; }
@media print {
  body { background: #fff; }
  .d-print-none { display:none !important; }
  .receipt-card { box-shadow:none; border-radius:0; padding: 0; }
}

/* ---------- Toast ---------- */
.toast { border-radius: 14px; border: none; box-shadow: var(--shadow-lg); }
.toast .toast-body { font-weight: 600; }
.toast.text-bg-success { background: linear-gradient(120deg,#16a34a,#22c55e) !important; }
.toast.text-bg-danger  { background: linear-gradient(120deg,#dc2626,#ef4444) !important; }
.toast.text-bg-warning { background: linear-gradient(120deg,#d97706,#f59e0b) !important; }
.toast.text-bg-info    { background: linear-gradient(120deg,#0284c7,#0ea5e9) !important; }