/* GrowPay — payments dashboard for SMM resellers
   One bold moment: the balance figure. Everything else stays quiet. */

:root{
  --ink:#0C1F1A;
  --muted:#5C6F68;
  --line:#DCE5E0;
  --paper:#F4F7F5;
  --surface:#fff;
  --brand:#0E6B57;
  --brand-deep:#08483A;
  --brand-soft:#E4F0EC;
  --ok:#12734F;
  --wait:#8A5A08;
  --bad:#A0281E;
  --r:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:15px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* numbers everywhere line up */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:230px;flex:0 0 230px;background:var(--surface);
  border-right:1px solid var(--line);padding:22px 0;
}
.brand{font-size:19px;font-weight:700;letter-spacing:-.02em;padding:0 22px 26px;color:var(--brand-deep)}
.brand span{color:var(--brand)}
.navgroup{color:var(--muted);font-size:11.5px;font-weight:600;padding:16px 22px 6px;letter-spacing:.02em}
.side a{
  display:flex;align-items:center;gap:10px;padding:9px 22px;
  color:var(--ink);font-size:14.5px;border-left:3px solid transparent;
}
.side a:hover{background:var(--paper);text-decoration:none}
.side a.on{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand-deep);font-weight:600}
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1150px}

h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
h2{font-size:16px;font-weight:650;margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 26px;font-size:14.5px}

/* ---------- balance: the one loud element ---------- */
.balance{
  background:var(--brand-deep);color:#fff;border-radius:14px;
  padding:26px 28px;margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:34px;align-items:flex-end;
}
.balance .big{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em}
.balance .lbl{font-size:13px;opacity:.72;margin-bottom:7px}
.balance .side-fig{font-size:20px;font-weight:600;line-height:1}
.balance .cta{
  margin-left:auto;background:#fff;color:var(--brand-deep);
  padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;
}
.balance .cta:hover{text-decoration:none;background:#EAF3F0}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.stat b{display:block;font-size:22px;font-weight:650;letter-spacing:-.02em}
.stat small{color:var(--muted);font-size:13px}

/* ---------- panels & tables ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px}
.panel-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.panel-b{padding:18px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;
  padding:10px 18px;border-bottom:1px solid var(--line);background:#FAFCFB;
}
td{padding:12px 18px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px}

.tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.tag.ok{background:#DFF0E7;color:var(--ok)}
.tag.wait{background:#FBF0D9;color:var(--wait)}
.tag.bad{background:#F8E3E0;color:var(--bad)}

/* ---------- forms ---------- */
label{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:var(--surface);color:var(--ink);
}
input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.field{margin-bottom:16px}
.hint{color:var(--muted);font-size:12.5px;margin-top:5px}
.btn{
  display:inline-block;background:var(--brand);color:#fff;border:0;
  padding:11px 20px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--brand-deep);text-decoration:none}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.msg{padding:12px 15px;border-radius:8px;margin-bottom:18px;font-size:14px}
.msg.err{background:#F8E3E0;color:var(--bad)}
.msg.good{background:#DFF0E7;color:var(--ok)}
.msg.note{background:#FBF0D9;color:var(--wait)}

.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:5px;font-weight:600}

/* ---------- auth pages ---------- */
.auth{max-width:400px;margin:8vh auto;padding:0 20px}
.auth .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px 28px}
.auth h1{font-size:21px;margin-bottom:6px}
.auth .foot{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}

.keyrow{display:flex;gap:8px;align-items:center}
.keyrow input{font-family:ui-monospace,Menlo,monospace;font-size:13px}

@media(max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;border-right:0;border-bottom:1px solid var(--line);padding:14px 0}
  .brand{padding-bottom:12px}
  .navgroup{display:none}
  .side nav{display:flex;overflow-x:auto;gap:2px;padding:0 14px;-webkit-overflow-scrolling:touch}
  .side a{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:8px 12px}
  .side a.on{border-left:0;border-bottom-color:var(--brand)}
  .main{padding:20px 14px 50px;max-width:100%}
  .balance{padding:20px;gap:20px}
  .balance .big{font-size:34px}
  .balance .cta{margin-left:0;width:100%;text-align:center}

  /* Table khud side me scroll hoti hai — poora page nahi khiskega.
     ZAROORI: thead/tbody ko alag display:table mat karna, warna dono apni
     column width alag calculate karte hain aur header data se hat jaata hai.
     display:block table par lagane se andar ek hi anonymous table banti hai,
     isliye columns line me rehte hain. */
  .panel{max-width:100%;overflow-x:hidden}
  .panel table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    font-size:13px;
  }
  th,td{padding:10px 12px;white-space:nowrap}

  /* Filter / date wali rows theek se wrap ho jaayein */
  .panel-h{flex-wrap:wrap;padding:12px 14px;gap:8px}
  .panel-h form{width:100%;margin-left:0 !important}
  .panel-h form input[type="date"]{flex:1;min-width:0}
  .panel-b{padding:14px}
}

/* Phone (chhoti screen) — stats hamesha 2 column, warna 1 hi dikhta tha */
@media(max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .stat{padding:12px 13px}
  .stat b{font-size:19px}
  .stat small{font-size:12px}

  h1{font-size:21px}
  .sub{margin-bottom:18px;font-size:14px}

  /* Balance card: teeno figure neeche-neeche, ek line me squeeze nahi */
  .balance{flex-direction:column;align-items:stretch;gap:16px}
  .balance .big{font-size:32px}

  /* Pagination buttons chhote taaki ek-do line me aa jaayein */
  .btn{padding:10px 16px}
}

/* Bahut chhoti screen par bhi kuch page se bahar na nikle */
html,body{overflow-x:hidden}