/* ============================================================
   PayKaro APP theme overlay  (pk-app-theme.css)
   Makes the whole Robo_UI recharge app match paykaroindia.com home:
   brand red #e12b2a, Poppins font, rounded cards/buttons, soft shadows.
   Loaded on EVERY app route via index.html. Works together with
   pk-auth-theme.css (which handles the login/register split-screen).
   Robo_UI is build-only, so this is pure CSS overlay.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --pk-red:#e12b2a;
  --pk-red-dark:#c52d2f;
  --pk-red-darker:#9e1f20;
  --pk-ink:#2b2b2b;
  --pk-muted:#6b7280;
  --pk-line:#e8e8ee;
  --pk-bg:#f5f6fa;
  --pk-card-shadow:0 6px 22px rgba(20,20,40,.07);
  --pk-radius:14px;
}

/* ---------- Typography ---------- */
html, body,
body * :not(i):not(.fa):not([class*="fa-"]){
  font-family:'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body{
  background:var(--pk-bg) !important;
  color:var(--pk-ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Page headings / breadcrumbs ---------- */
h1,h2,h3,h4{ letter-spacing:-.2px; }

/* ---------- Buttons: pill, brand red, subtle lift ---------- */
button:not(.pk-ignore):not(.excel-download-btn){
  font-family:'Poppins',sans-serif !important;
  font-weight:600 !important;
  border-radius:10px !important;
  letter-spacing:.2px;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease !important;
}
button:not(.pk-ignore):not(.excel-download-btn):hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(225,43,42,.22);
}
/* keep excel/download green button but round it to match */
.excel-download-btn{ border-radius:10px !important; font-family:'Poppins',sans-serif !important; }

/* ---------- Inputs / selects / textareas ---------- */
input, select, textarea{
  font-family:'Poppins',sans-serif !important;
  border-radius:10px !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--pk-red) !important;
  box-shadow:0 0 0 3px rgba(225,43,42,.14) !important;
  outline:none !important;
}

/* ---------- Content cards: main area panels ---------- */
/* The app renders its routed content inside #root; give its direct
   content sections a clean white card look like the home page. */
#root > section,
#root > div > section,
main > section{
  background:#ffffff;
}

/* generic "section" blocks that hold tables/forms become soft cards */
section.pk-card,
.pk-card{
  background:#fff !important;
  border-radius:var(--pk-radius) !important;
  box-shadow:var(--pk-card-shadow) !important;
  border:1px solid var(--pk-line) !important;
}

/* ---------- Tables: modern, airy, rounded wrapper ---------- */
table{
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--pk-card-shadow);
  background:#fff;
}
table thead th{
  font-weight:600 !important;
  letter-spacing:.3px;
}
table tbody tr{
  transition:background-color .15s ease;
}
table tbody tr:hover{
  background:#fff5f5 !important;
}
table tbody td{
  border-bottom:1px solid var(--pk-line);
}

/* ---------- Navigation: a touch more polish ---------- */
nav ul li a{
  font-weight:500 !important;
  letter-spacing:.2px;
}

/* ---------- Scrollbar to match ---------- */
::-webkit-scrollbar-thumb{ background-color:#c9c9d4 !important; border-color:var(--pk-bg) !important; }
::-webkit-scrollbar-track{ background-color:var(--pk-bg) !important; }

/* ---------- Links ---------- */
a{ transition:color .15s ease; }

/* ---------- Cards / tiles on dashboard (best-effort) ---------- */
/* dashboard stat tiles usually are anchor/section blocks with an icon;
   give immediate children of the dashboard grid a card treatment. */
[class*="Dashboard"] a,
[class*="dashboard"] a{
  border-radius:var(--pk-radius);
}