/* ===== Quiqlinqs – Front-end styling for vendor dashboard & payout card ===== */

/* Container width for all dashboard cards */
.qfx-container{
  max-width:1100px;
  margin:0 auto;
  font-family:"Red Hat Display", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Generic card */
.qfx-card{
  background:#fff;
  border:1px solid #e6eaf0;
  border-radius:16px;
  padding:22px;
  margin:18px 0;
  box-shadow:0 8px 24px rgba(2,6,23,.04);
}

/* Section title */
.qfx-h3{
  margin:0 0 14px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

/* 4-up stats grid (auto-wraps on small) */
.qfx-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width:900px){ .qfx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .qfx-grid{ grid-template-columns:1fr; } }

/* Stat tile */
.qfx-stat{
  background:#f8fafc;
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:14px;
  text-align:center;
}
.qfx-stat h4{
  margin:0 0 6px;
  font-size:13px;
  color:#475569;
  font-weight:700;
}
.qfx-stat p{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

/* Tables (history) */
.qfx-table-wrap{ overflow:auto; }
.qfx-table{ width:100%; border-collapse:collapse; }
.qfx-table th,.qfx-table td{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
  text-align:left;
  font-size:14px;
}
.qfx-table thead th{ background:#f8fafc; }

/* Badges */
.qfx-badge{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.qfx-badge.pending  { background:#fff7ed; border:1px solid #ffedd5; color:#9a3412; }
.qfx-badge.approved { background:#ecfdf5; border:1px solid #d1fae5; color:#065f46; }
.qfx-badge.declined { background:#fef2f2; border:1px solid #fee2e2; color:#991b1b; }
.qfx-badge.paid     { background:#eff6ff; border:1px solid #dbeafe; color:#1e40af; }

/* Buttons – brand colour #ed1c5c, medium (not bold) */
.qfx-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 18px;
  border:1px solid #ed1c5c;
  border-radius:10px;
  background:#ed1c5c;
  color:#fff;
  font-weight:500;            /* medium, not bold */
  cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .06s;
  box-shadow:0 8px 18px rgba(237,28,92,.18);
  text-decoration:none;
}
.qfx-btn:hover{ background:#d31853; box-shadow:0 10px 22px rgba(237,28,92,.22); }
.qfx-btn.is-ghost{ background:#fff; color:#ed1c5c; }

/* ===== Payout card (accordions + inputs) ===== */
#qcp-payout-card .qcp-balance{
  display:flex; gap:22px; flex-wrap:wrap; margin:4px 0 8px;
}
#qcp-payout-card .qcp-balance b{ color:#0b6ca3; }

/* Accordion list */
.qcp-acc{ border:1px solid #e6eaf0; border-radius:12px; overflow:hidden; }
.qcp-row{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; background:#fff; padding:12px 14px;
  border-bottom:1px solid #eaeef5; cursor:pointer;
}
.qcp-row:last-child{ border-bottom:0; }
.qcp-row span{ font-weight:700; color:#0f172a; }
.qcp-row .chev{ transition:transform .15s ease; }
.qcp-row.active .chev{ transform:rotate(90deg); }
.qcp-panel{ display:none; background:#fbfcfe; padding:14px; border-top:1px dashed #e5e9f2; }
.qcp-panel .qcp-hint{ color:#475569; font-size:13px; }

/* Inputs */
.qcp-input{
  width:100%; max-width:560px; height:44px; padding:10px 12px;
  border:1.5px solid #dbe0e6; border-radius:10px; background:#fff;
  font-size:15px; color:#0f172a;
}
.qcp-input:focus{ outline:none; border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.12); }

/* Actions row */
.qcp-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.qcp-amount{ display:flex; flex-direction:column; gap:6px; }
.qcp-note{ color:#475569; font-size:13px; margin-top:10px; }
#qcp-msg{ min-height:22px; margin-top:8px; font-size:14px; }

/* Make payouts card same width as others (inherits .qfx-card) */
#qcp-payout-card{ }

/* Mobile tweaks */
@media (max-width:640px){
  .qfx-card{ padding:18px; border-radius:12px; }
}