/* ========= Pay Manager — Standalone CSS (no Tailwind) ========= */

/* --- CSS Variables (palette + spacing) --- */
:root{
  /* slate scale (approx Tailwind) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1f2937; --slate-900:#0f172a;

  --indigo-600:#4f46e5; --indigo-700:#4338ca;
  --emerald-500:#10b981; --rose-600:#e11d48;

  --red-50:#fef2f2; --red-200:#fecaca; --red-800:#991b1b;
  --white:#fff; --black: #000;

  --radius-md: .5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.25rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
}

/* --- Base / Typography --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--slate-800); background:var(--slate-50);
}
a{color:inherit}
label{display:block;}

/* --- Utilities replicated from Tailwind (subset used on this page) --- */

/* layout + containers */
.min-h-screen{min-height:100vh}
.container{width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-7xl{max-width:80rem} /* 1280px */
.max-w-5xl{max-width:64rem}
.max-w-4xl{max-width:56rem}

.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pb-6{padding-bottom:1.5rem}
.pt-1{padding-top:.25rem}
.mt-1{margin-top:.25rem}
.mt-6{margin-top:1.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}

.flex{display:flex}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-col{flex-direction:column}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.space-y-6>*+*{margin-top:1.5rem}
.space-y-4>*+*{margin-top:1rem}

.grid{display:grid}
.grid-cols-1{grid-template-columns:1fr}
.md\:grid-cols-2{grid-template-columns:1fr} /* default; overridden at md */
.md\:grid-cols-3{grid-template-columns:1fr}
.lg\:grid-cols-3{grid-template-columns:1fr}
.md\:col-span-2{} .lg\:col-span-1{} .lg\:col-span-2{} /* placeholders for clarity */

/* responsive variants */
@media (min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1 / span 1}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:sticky{position:sticky}
  .lg\:top-6{top:1.5rem}
}

/* borders / radius / shadow */
.border{border:1px solid var(--slate-200)}
.border-b{border-bottom:1px solid var(--slate-200)}
.border-slate-200{border-color:var(--slate-200)}
.border-slate-100{border-color:var(--slate-100)}
.border-red-200{border-color:var(--red-200)}
.border-dashed{border-style:dashed}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-2xl{border-radius:var(--radius-2xl)}
.shadow-sm{box-shadow:var(--shadow-sm)}

/* backgrounds */
.bg-white{background:#fff}
.bg-white\/60{background:rgba(255,255,255,.6)}
.bg-slate-50{background:var(--slate-50)}
.bg-slate-50\/60{background:rgba(248,250,252,.6)}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops, var(--slate-50),#fff,var(--slate-50)))}
.from-slate-50{--tw-gradient-from: var(--slate-50)}
.via-white{--tw-gradient-via: #fff}
.to-slate-50{--tw-gradient-to: var(--slate-50)}
.bg-emerald-500{background:var(--emerald-500)}
.hover\:bg-slate-50:hover{background:var(--slate-50)}
.bg-indigo-600{background:var(--indigo-600)}
.hover\:bg-indigo-700:hover{background:var(--indigo-700)}
.backdrop-blur{backdrop-filter:saturate(180%) blur(8px)}

/* text / fonts */
.text-slate-900{color:var(--slate-900)}
.text-slate-800{color:var(--slate-800)}
.text-slate-700{color:var(--slate-700)}
.text-slate-600{color:var(--slate-600)}
.text-slate-500{color:var(--slate-500)}
.text-slate-300{color:var(--slate-300)}
.text-red-800{color:var(--red-800)}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-\[11px\]{font-size:11px}
.md\:text-3xl{font-size:1.5rem;line-height:2rem}
@media (min-width:768px){.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
.font-semibold{font-weight:600}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.tracking-tight{letter-spacing:-0.01em}
.text-center{text-align:center}

/* spacing helpers for icons/badges */
.h-2{height:.5rem}.w-2{width:.5rem}
.h-4{height:1rem}.w-4{width:1rem}
.h-5{height:1.25rem}.w-5{width:1.25rem}

/* round shapes */
.rounded-full{border-radius:9999px}

/* transitions */
.transition{transition:all .2s ease}

/* buttons */
button, .btn{cursor:pointer}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; border:0; border-radius:var(--radius-xl);
  background:var(--indigo-600); color:#fff; font-weight:600;
  padding:.75rem 1rem; box-shadow: var(--shadow-sm); transition:all .2s ease;
}
.btn-primary:hover{background:var(--indigo-700)}
.btn-primary:active{transform:scale(.99)}

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--slate-200); background:#fff; color:var(--slate-700);
  border-radius:.75rem; padding:.375rem .75rem; font-size:.875rem; font-weight:500;
  box-shadow:var(--shadow-sm); transition:all .2s ease;
}
.btn-ghost:hover{background:var(--slate-50)}

/* badges / dots */
.badge-dot{display:inline-flex; align-items:center; gap:.5rem; color:var(--slate-500)}
.badge-dot .dot{display:inline-block; width:.5rem; height:.5rem; background:var(--emerald-500); border-radius:50%}

/* cards */
.card{
  border:1px solid var(--slate-200); background:#fff; border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm);
}
.card-h{
  display:flex; align-items:center; gap:.75rem;
  border-bottom:1px solid var(--slate-100); padding:1rem 1.5rem;
}
.card-h .icon{
  background:var(--slate-50); color:var(--slate-600); padding:.5rem; border-radius:.75rem;
}
.card-b{padding:1.25rem 1.5rem}
.card-b.grid{gap:1rem}
.card-tip{
  border:1px dashed var(--slate-300); border-radius:var(--radius-xl);
  color:var(--slate-500); text-align:center; padding:1rem; font-size:.875rem;
}

/* error alert */
.alert-error{
  border:1px solid var(--red-200); background:var(--red-50); color:var(--red-800);
  border-radius:var(--radius-xl); padding:1rem;
}

/* inputs */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], textarea{
  width:100%; padding:.625rem .625rem; border:1px solid var(--slate-300);
  border-radius:.75rem; background:#fff; color:var(--slate-800); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder{color:rgba(100,116,139,.7)}
input:focus, textarea:focus{border-color:#64748b; box-shadow:0 0 0 3px rgba(100,116,139,.15)}
textarea{resize:vertical}

/* helpers for this page specifically */
.pm-section{border:1px solid var(--slate-200); background:#fff; border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm)}
.pm-section .head{display:flex; align-items:center; gap:.75rem; border-bottom:1px solid var(--slate-100); padding:1rem 1.5rem}
.pm-section .body{padding:1.25rem 1.5rem}

.list-disc{list-style:disc; padding-left:1.25rem}

/* dashed divider */
.divider-dashed{border-top:1px dashed var(--slate-300); margin:.5rem 0}

/* hover row card */
.row-card{
  border:1px solid var(--slate-200); border-radius:var(--radius-xl); padding:.75rem 1rem; transition:box-shadow .2s ease, border-color .2s ease;
}
.row-card:hover{box-shadow:var(--shadow-sm)}
.text-rose-hover:hover{color:var(--rose-600)}

/* gradient helpers (for header bg) */
.bg-gradient-to-b{
  --tw-gradient-stops: var(--tw-gradient-from, var(--slate-50)), var(--tw-gradient-via, #fff), var(--tw-gradient-to, var(--slate-50));
  background-image:linear-gradient(to bottom, var(--tw-gradient-stops));
}

/* --- End of standalone CSS --- */