/* ===========================
   Wallet App – Global Styles
   Single CSS for user + admin
   =========================== */

/* Theme variables */
:root{
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-600:#1d4ed8;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 10px 24px rgba(0,0,0,0.08);
  --radius: 12px;
  --radius-sm: 10px;
  --container: 1100px;
  --focus: 0 0 0 3px rgba(37, 99, 235, .25);
}
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b1020;
    --surface:#0f172a;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --border:#1f2942;
    --primary:#3b82f6;
    --primary-600:#2563eb;
    --shadow: 0 12px 28px rgba(0,0,0,.5);
  }
}

/* Reset-lite */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
html{font-size:16px}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}

/* Layout */
.container{max-width: var(--container); margin: 26px auto; padding: 0 16px;}
.page, .card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 16px 0;
}

/* Headings */
h1{font-size:1.6rem;margin:0 0 12px}
h2{font-size:1.25rem;margin:18px 0 10px}
h3{font-size:1.1rem;margin:14px 0 8px}

/* Dashboard tiles */
.grid{display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); margin: 16px 0;}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.tile h3{margin:0 0 8px}
.tile p{margin:0 0 12px;color:var(--muted)}
.tile a{display:inline-block}

/* Responsive grid */
@media (max-width: 960px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

/* -------------------------
   FORMS — unified styling
   ------------------------- */

/* Form wrapper (use on every form container for consistency) */
.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 18px; /* row col gaps */
}
.form .field{display:flex;flex-direction:column}
.form .wide{grid-column: 1 / -1}

label{
  font-weight:600;
  margin: 0 0 6px 2px;
}
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="email"],
textarea,
select{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s,border-color .15s,background .15s;
}
textarea{min-height:120px;resize:vertical}
input::placeholder, textarea::placeholder{color:var(--muted)}
input:focus, textarea:focus, select:focus{border-color: var(--primary); box-shadow: var(--focus)}

/* Make single-column on mobile */
@media (max-width: 768px){
  .form{grid-template-columns: 1fr;}
}

/* Buttons */
button, .btn, input[type="submit"]{
  background: var(--primary);
  color:#fff;
  border:none;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  transition: transform .05s ease, background .15s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover{background: var(--primary-600)}
button:active, .btn:active{transform: translateY(1px)}
button:disabled, .btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secondary{background:#4b5563}

/* On small screens, buttons full-width for easier tapping */
@media (max-width:640px){
  .actions{display:grid;gap:10px}
  .actions .btn, .actions button{width:100%}
}

/* File input minor polish */
input[type="file"]{padding:8px;}

/* Alerts */
.alert{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);margin:10px 0 14px}
.alert.success{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35);color:#065f46}
.alert.error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35);color:#7f1d1d}

/* -------------------------
   TABLES (Admin lists)
   ------------------------- */
table{width:100%;border-collapse:collapse}
.requests{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  margin: 16px 0;
}
.requests thead th{
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.00));
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  font-weight:700;
  font-size:.95rem;
}
.requests td{
  padding:10px;
  border-bottom:1px solid var(--border);
  vertical-align: top;
}
.requests tr:last-child td{border-bottom:none}
.nowrap{white-space:nowrap}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;border:1px solid var(--border);background:rgba(0,0,0,.03)}
.badge.pending{color:#92400e;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}
.badge.approved{color:#065f46;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}
.badge.declined{color:#7f1d1d;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.thumb{max-width:72px;height:auto;border:1px solid var(--border);border-radius:8px;padding:4px;background:var(--surface)}

/* -------------------------
   RECHARGE QR block
   ------------------------- */
.qr-wrap{text-align:center;margin:12px 0 14px}
.qr-card{
  display:inline-block;
  padding:14px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Smaller QR than before */
.qr-card img{max-width:180px;border-radius:8px}
@media (max-width:640px){
  .qr-card img{max-width:160px}
}
.qr-download{margin-top:8px;text-align:center}
.acc-block{
  margin:10px auto 18px;
  max-width:600px;
  background:#fafafa;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
}
.acc-row{margin:4px 0}
.muted{color:var(--muted);font-size:.95rem}

/* Optional nav/footer (if you add later) */
.nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.nav .inner{max-width:var(--container);margin:0 auto;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.nav a{color:var(--text);text-decoration:none}
.nav .brand{font-weight:800}
.footer{color:var(--muted);text-align:center;padding:18px 12px 28px}

/* Utilities */
.center{text-align:center}
.right{text-align:right}
.mt-0{margin-top:0}.mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-16{margin-top:16px}
.mb-0{margin-bottom:0}.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-16{margin-bottom:16px}
.w-100{width:100%}
/* Ensure uniform input sizing inside our grid forms */
form.form .field > input,
form.form .field > textarea,
form.form .field > select {
  width: 100%;
  min-height: 44px;
}

/* Make the form card breathe a bit on narrow screens */
@media (max-width:640px){
  .card form.form { gap: 14px; }
}



/* Force recharge & withdrawal forms to always stack vertically */
form#rechargeForm.form,
form#withdrawalForm.form {
  grid-template-columns: 1fr !important;
}

/* Ensure all fields stretch full width */
form#rechargeForm.form .field,
form#withdrawalForm.form .field {
  grid-column: 1 / -1;
}



/* Normalize all inputs & textareas to look the same */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: box-shadow .15s, border-color .15s, background .15s;
  appearance: none;           /* remove browser-specific styles */
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* Consistent placeholder color */
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Focus style */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus);
}
/* === FORCE BOTH FORMS TO IDENTICAL, STACKED LAYOUT === */
form#rechargeForm.form,
form#withdrawalForm.form { grid-template-columns: 1fr !important; }
form#rechargeForm.form .field,
form#withdrawalForm.form .field { grid-column: 1 / -1; }

/* === UNIFY ALL INPUTS / TEXTAREAS / SELECTS (including FILE) === */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: box-shadow .15s, border-color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus); }

/* File input: make height consistent and rounded */
input[type="file"] {
  padding: 8px 10px;
  line-height: 1.2;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

/* Labels always on their own row */
label { display:block; margin: 0 0 6px 2px; font-weight: 600; }

/* Recharge QR smaller (as requested) */
.qr-card img { max-width: 180px; border-radius: 8px; }
@media (max-width:640px){ .qr-card img { max-width: 160px; } }



/* === Make recharge & withdrawal forms single-column and full width === */
form#rechargeForm.form,
form#withdrawalForm.form { grid-template-columns: 1fr !important; }
form#rechargeForm.form .field,
form#withdrawalForm.form .field { grid-column: 1 / -1; }

/* === Absolute normalization for inputs in cards (overrides UA quirks) === */
.card input,
.card textarea,
.card select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.card input[type="file"] {
  padding: 8px 10px !important;
  min-height: 44px !important;
}

/* Remove number-field native spinners and odd inner shadows */
.card input[type="number"] {
  -moz-appearance: textfield !important;
}
.card input[type="number"]::-webkit-outer-spin-button,
.card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Unified focus style */
.card input:focus,
.card textarea:focus,
.card select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--focus) !important;
}

/* Labels: consistent spacing and weight */
.card label { display:block; margin: 0 0 6px 2px; font-weight: 600; }

/* QR download button should sit below image (no overlap) */
.qr-card { position: relative; }
.qr-download { margin-top: 10px; text-align: center; }
.qr-download .btn { display: inline-block; }

/* Slightly smaller QR (as requested) */
.qr-card img { max-width: 180px; border-radius: 8px; }
@media (max-width:640px){ .qr-card img { max-width: 160px; } }




/* === 1) Use one input background for the whole site (same as “Amount”) === */
:root { --input-bg: #ffffff; } /* light */
@media (prefers-color-scheme: dark) {
  :root { --input-bg: #0f172a; } /* same dark tone your Amount field has */
}

/* Make recharge & withdrawal forms single-column and full width */
form#rechargeForm.form,
form#withdrawalForm.form { grid-template-columns: 1fr !important; }
form#rechargeForm.form .field,
form#withdrawalForm.form .field { grid-column: 1 / -1; }

/* Normalize EVERY input/textarea/select inside cards to match Amount */
.card input,
.card textarea,
.card select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--input-bg) !important;   /* <- key change */
  color: var(--text) !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Number field: remove native spinners so it matches others */
.card input[type="number"] { -moz-appearance: textfield !important; }
.card input[type="number"]::-webkit-outer-spin-button,
.card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}

/* File input styled same height & background */
.card input[type="file"] {
  padding: 8px 10px !important;
  line-height: 1.2 !important;
  background: var(--input-bg) !important;
  border-radius: var(--radius-sm) !important;
}

/* Focus ring (uniform) */
.card input:focus,
.card textarea:focus,
.card select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--focus) !important;
}

/* Labels consistent spacing/weight */
.card label { display:block; margin: 0 0 6px 2px; font-weight: 600; }

/* === 2) QR: keep button below the image (no overlap) === */
.qr-card { position: relative; }
.qr-card img { display:block; margin: 0 auto 12px; max-width: 180px; border-radius: 8px; }
@media (max-width:640px){ .qr-card img { max-width: 160px; } }
.qr-download { margin-top: 0; text-align: center; }
.qr-download .btn { display: inline-block; }

/* === 3) Account details block text should not look “disabled” === */
.acc-block { color:#0b1020; }
.acc-block .acc-row { opacity: 1; }




/* === Compact QR section === */
.qr-card {
  display: inline-block;
  padding: 8px 10px;        /* reduced from 14px+ */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.qr-card img {
  display: block;
  margin: 0 auto 6px;       /* less gap under image */
  max-width: 140px;         /* smaller size */
  border-radius: 6px;
}

@media (max-width:640px) {
  .qr-card img { max-width: 120px; }
}

.qr-download { margin-top: 4px; }  /* smaller gap */
.qr-download .btn {
  font-size: 0.85rem;       /* smaller button */
  padding: 6px 10px;
}




/* Green success button */
.btn.success {
  background: #16a34a;
  color: #fff;
}
.btn.success:hover {
  background: #15803d;
}



/* Auth layout helper */
.auth { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth .card { width:100%; max-width:420px; }
.brand { text-align:center; margin-bottom:10px; }



/* =========================
   Admin tables – mobile UX
   ========================= */

/* Wrap tables in this to get a smooth horizontal slider on mobile */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make tables a bit larger and easier to read/tap */
.requests {
  font-size: 0.95rem;
}
.requests th, .requests td {
  padding: 12px 14px;
}

/* On small screens, increase size and allow horizontal slide by giving a min-width */
@media (max-width: 640px) {
  .requests {
    font-size: 1rem;                 /* bigger text */
    min-width: 920px;                /* forces a horizontal slider */
  }
  .requests th, .requests td {
    padding: 14px 16px;              /* bigger tap area */
  }

  /* Make status badges and buttons a bit larger */
  .badge { padding: 6px 10px; font-size: .9rem; }
  .requests .btn { padding: 8px 12px; border-radius: 10px; }
}

/* Sticky header for long lists (optional, nice on mobile) */
.table-wrap .requests thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* Keep action buttons from squishing too much */
.requests td:last-child,
.requests th:last-child {
  white-space: nowrap;
}

/* Make the screenshot “View” buttons consistent size */
.requests a.btn.secondary {
  padding: 6px 10px;
}

/* Slightly bigger row height overall */
.requests tr { height: 44px; }




@media (max-width: 640px) {
  .requests { min-width: 1040px; }
}








/* ===============================
   Admin tables – XL display size
   =============================== */

/* Base table styling (desktop + mobile) */
.requests {
  font-size: 1.25rem;        /* ~4x bigger than before (was 0.9rem) */
  line-height: 1.6;
}
.requests th, .requests td {
  padding: 22px 28px;        /* more padding for big tap area */
  font-size: 1.25rem;
}

/* Minimum row height */
.requests tr {
  height: 72px;
}

/* Force horizontal scroll for wide tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.requests { min-width: 1100px; }

/* Sticky headers so titles stay visible */
.table-wrap .requests thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* Action buttons also bigger */
.requests .btn {
  padding: 14px 20px;
  font-size: 1.1rem;
  border-radius: 12px;
}

/* Status badges bigger */
.badge {
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 12px;
}






/* ======================================
   Admin tables – 4x larger (XL Display)
   ====================================== */

/* Make text very large */
.requests {
  font-size: 2rem;              /* ~4x bigger than default (was ~0.9rem) */
  line-height: 2;
}
.requests th, .requests td {
  padding: 28px 34px;           /* generous padding */
  font-size: 2rem;              /* match table font size */
}

/* Row height */
.requests tr {
  height: 100px;                /* tall rows */
}

/* Force horizontal scroll for wide content */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.requests { min-width: 1400px; } /* give space for big text */

/* Sticky header */
.table-wrap .requests thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* Action buttons also huge */
.requests .btn {
  padding: 20px 28px;
  font-size: 1.6rem;
  border-radius: 14px;
}

/* Status badges also scaled */
.badge {
  padding: 14px 20px;
  font-size: 1.4rem;
  border-radius: 14px;
}










/* Screenshot modal overlay */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Modal content */
.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.modal-content img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Close button */
.modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: #dc2626; }




.btn.danger {
  background: #dc2626;
  color: #fff;
}
.btn.danger:hover {
  background: #b91c1c;
}





.btn.secondary {
  background: #374151;
  color: #fff;
  text-decoration: none;
}
.btn.secondary:hover {
  background: #1f2937;
}








/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  z-index: 9999;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

/* Mobile safe spacing */
@media (max-width: 640px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
}








/* ================================
   Responsive Admin Tables (FINAL)
   ================================ */

/* Common table styling */
.requests {
  width: 100%;
  border-collapse: collapse;
}

/* ---------- MOBILE VIEW ---------- */
@media (max-width: 768px) {

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .requests {
    min-width: 1400px;        /* force horizontal slider */
    font-size: 2rem;          /* very large text */
    line-height: 2;
  }

  .requests th,
  .requests td {
    padding: 28px 34px;
    font-size: 2rem;
    white-space: nowrap;
  }

  .requests tr {
    height: 100px;
  }

  .requests .btn {
    font-size: 1.6rem;
    padding: 16px 22px;
  }

  .badge {
    font-size: 1.4rem;
    padding: 12px 18px;
  }
}

/* ---------- DESKTOP / LAPTOP VIEW ---------- */
@media (min-width: 769px) {

  .table-wrap {
    overflow-x: visible;     /* remove slider */
  }

  .requests {
    min-width: 0;            /* remove forced width */
    font-size: 1.05rem;      /* normal readable size */
    line-height: 1.6;
  }

  .requests th,
  .requests td {
    padding: 14px 16px;
    font-size: 1.05rem;
    white-space: normal;     /* allow wrapping */
  }

  .requests tr {
    height: auto;
  }

  .requests .btn {
    font-size: 0.95rem;
    padding: 8px 14px;
  }

  .badge {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
}













/* =====================================
   Withdrawal table desktop alignment
   ===================================== */

/* Desktop / Laptop only */
/*@media (min-width: 769px) {*/

/*   Use fixed layout for clean alignment */
/*  .requests {*/
/*    table-layout: fixed;*/
/*  }*/

/*   Column widths (adjusted for withdrawal page) */
/*  .requests th:nth-child(1),*/
  .requests td:nth-child(1) { width: 70px; }   /* ID 

  .requests th:nth-child(2),
  .requests td:nth-child(2) { width: 160px; }  /* ID Name 

  .requests th:nth-child(3),
  .requests td:nth-child(3) { width: 120px; }  /* Amount 

  .requests th:nth-child(4),
  .requests td:nth-child(4) { width: 140px; }  /* Bank Name 

  .requests th:nth-child(5),
  .requests td:nth-child(5) { width: 140px; }  /* A/C Holder 

  .requests th:nth-child(6),
  .requests td:nth-child(6) { width: 180px; }  /* A/C Number 

  .requests th:nth-child(7),
  .requests td:nth-child(7) { width: 140px; }  /* IFSC 

  .requests th:nth-child(8),
  .requests td:nth-child(8) { width: 180px; }  /* PhonePe 

  .requests th:nth-child(9),
  .requests td:nth-child(9) { width: 120px; }  /* Status 

  .requests th:nth-child(10),
  .requests td:nth-child(10) { width: 170px; } /* Created 

  .requests th:nth-child(11),
  .requests td:nth-child(11) { width: 100px; } /* Action 

   Prevent ugly wrapping for numbers 
  .requests td:nth-child(3),
  .requests td:nth-child(6),
  .requests td:nth-child(7),
  .requests td:nth-child(8) {
    white-space: nowrap;
  }

   Vertically center text 
  .requests td {
    vertical-align: middle;
  }
}














/* ===============================
   FINAL FIX: Admin Tables Layout
   =============================== */

/* Common reset */
.requests {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

/* ---------------- MOBILE ONLY ---------------- */
@media (max-width: 768px) {

  .table-wrap {
    overflow-x: auto;
  }

  .requests {
    min-width: 1400px;     /* force scroll ONLY on mobile */
    font-size: 2rem;
    line-height: 2;
  }

  .requests th,
  .requests td {
    padding: 28px 34px;
    white-space: nowrap;
    font-size: 2rem;
  }
}

/* ---------------- DESKTOP / LAPTOP ---------------- */
@media (min-width: 769px) {

  /* Stop horizontal scrolling */
  .table-wrap {
    overflow-x: hidden;
  }

  /* Table must fit container */
  .requests {
    min-width: 0 !important;
    max-width: 100%;
    table-layout: auto;        /* IMPORTANT */
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .requests th,
  .requests td {
    padding: 14px 16px;
    font-size: 1.05rem;
    white-space: normal;       /* allow wrapping */
  }

  .requests tr {
    height: auto;
  }
}





/* =========================================
   PAGE-SPECIFIC TABLE FIXES (FINAL)
   ========================================= */

/* ---------- COMMON DESKTOP RESET ---------- */
@media (min-width: 769px) {
  .table-wrap {
    overflow-x: hidden;
  }

  table.requests {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }

  table.requests th,
  table.requests td {
    white-space: normal;
  }
}

/* =========================================
   WITHDRAWAL REQUESTS TABLE (DESKTOP)
   ========================================= */
/*@media (min-width: 769px) {*/
/*  body.withdrawal-page table.requests {*/
/*    table-layout: fixed;*/
/*  }*/

/*  body.withdrawal-page table.requests th:nth-child(1),*/
/*  body.withdrawal-page table.requests td:nth-child(1) { width: 70px; }*/

/*  body.withdrawal-page table.requests th:nth-child(2),*/
/*  body.withdrawal-page table.requests td:nth-child(2) { width: 160px; }*/

/*  body.withdrawal-page table.requests th:nth-child(3),*/
/*  body.withdrawal-page table.requests td:nth-child(3) { width: 120px; }*/

/*  body.withdrawal-page table.requests th:nth-child(4),*/
/*  body.withdrawal-page table.requests td:nth-child(4) { width: 140px; }*/

/*  body.withdrawal-page table.requests th:nth-child(5),*/
/*  body.withdrawal-page table.requests td:nth-child(5) { width: 140px; }*/

/*  body.withdrawal-page table.requests th:nth-child(6),*/
/*  body.withdrawal-page table.requests td:nth-child(6) { width: 180px; }*/

/*  body.withdrawal-page table.requests th:nth-child(7),*/
/*  body.withdrawal-page table.requests td:nth-child(7) { width: 140px; }*/

/*  body.withdrawal-page table.requests th:nth-child(8),*/
/*  body.withdrawal-page table.requests td:nth-child(8) { width: 180px; }*/

/*  body.withdrawal-page table.requests th:nth-child(9),*/
/*  body.withdrawal-page table.requests td:nth-child(9) { width: 120px; }*/

/*  body.withdrawal-page table.requests th:nth-child(10),*/
/*  body.withdrawal-page table.requests td:nth-child(10) { width: 170px; }*/

/*  body.withdrawal-page table.requests th:nth-child(11),*/
/*  body.withdrawal-page table.requests td:nth-child(11) { width: 100px; }*/

/*  body.withdrawal-page table.requests td {*/
/*    vertical-align: middle;*/
/*  }*/
/*}*/

/* =========================================*/
/*   RECHARGE REQUESTS TABLE (DESKTOP)*/
/*   ========================================= */
/*@media (min-width: 769px) {*/
/*  body.recharge-page table.requests {*/
/*    table-layout: fixed;*/
/*  }*/

/*  body.recharge-page table.requests th:nth-child(1),*/
  /* ID 

  body.recharge-page table.requests th:nth-child(2),
  body.recharge-page table.requests td:nth-child(2) { width: 160px; }  /* Username 

  body.recharge-page table.requests th:nth-child(3),
  body.recharge-page table.requests td:nth-child(3) { width: 160px; }  /* Mobile 

  body.recharge-page table.requests th:nth-child(4),
  body.recharge-page table.requests td:nth-child(4) { width: 120px; }  /* Amount 

  body.recharge-page table.requests th:nth-child(5),
  body.recharge-page table.requests td:nth-child(5) { width: 220px; }  /* UTR 

  body.recharge-page table.requests th:nth-child(6),
  body.recharge-page table.requests td:nth-child(6) { width: 120px; }  /* Screenshot 

  body.recharge-page table.requests th:nth-child(7),
  body.recharge-page table.requests td:nth-child(7) { width: 120px; }  /* Status 

  body.recharge-page table.requests th:nth-child(8),
  body.recharge-page table.requests td:nth-child(8) { width: 170px; }  /* Created 

  body.recharge-page table.requests th:nth-child(9),
  body.recharge-page table.requests td:nth-child(9) { width: 100px; }  /* Action 

  body.recharge-page table.requests td {
    vertical-align: middle;
  }
}














/* =====================================
   FINAL STABLE ADMIN TABLE SOLUTION
   ===================================== */

/* ---------- COMMON ---------- */
.table-wrap {
  width: 100%;
}

table.requests {
  width: 100%;
  border-collapse: collapse;
}

/* ---------- DESKTOP / LAPTOP ---------- */
@media (min-width: 769px) {

  .table-wrap {
    overflow-x: visible;   /* no scroll */
  }

  table.requests {
    font-size: 1.05rem;
  }

  table.requests th,
  table.requests td {
    padding: 14px 16px;
    white-space: nowrap;  /* keeps alignment clean */
    text-align: left;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.requests {
    min-width: 1200px;     /* horizontal swipe */
    font-size: 1.9rem;     /* BIG text */
  }

  table.requests th,
  table.requests td {
    padding: 26px 32px;
    white-space: nowrap;
    font-size: 1.9rem;
  }
}

/* ---------- STATUS BADGES ---------- */
.badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .badge {
    font-size: 1.4rem;
    padding: 12px 18px;
  }
}








/* ===============================
   FINAL CENTERING FIX
   =============================== */

.table-wrap {
  margin-left: auto;
  margin-right: auto;
}

.card.table-wrap {
  max-width: 100%;
}





@media (min-width: 769px) {
  .container {
    max-width: 1200px;   /* or 1280px if you prefer wider */
    margin-left: auto;
    margin-right: auto;
  }
}