/* =========================================================
   EaglePay — Professional Blue Theme
   ---------------------------------------------------------
   Palette:
     --gold-light #123FAE  deep blue   -> headings, links, brand, primary text-accent
     --gold       #2F6FED  bright blue -> buttons, active states, gradients
     --ink        #10213E  near-navy   -> body text
     --ink-dim    #5B6B85  slate-blue  -> secondary/meta text
     --glass      #FFFFFF  card surface (white)
     --glass-border #E2E8F5 hairline borders
     --success    #16A34A  --danger #DC2626  --pending #D97706
   (Variable names kept from the previous theme on purpose — dozens of
   templates reference var(--gold-light) / var(--ink-dim) / var(--danger) /
   var(--success) inline, so re-pointing the tokens here re-skins the whole
   app without touching every file.)
   Signature: a 3px blue gradient bar fixed to the top of every screen, plus
   a faint dot-grid on the auth/checkout screens — a quiet nod to a ledger
   grid that ties dashboard, docs, and the customer-facing pay page together.
   ========================================================= */
:root {
  --gold: #2F6FED;
  --gold-light: #123FAE;
  --ink: #10213E;
  --ink-dim: #5B6B85;
  --glass: #FFFFFF;
  --glass-border: #E2E8F5;
  --danger: #DC2626;
  --success: #16A34A;
  --pending: #D97706;
  --bg: #F4F7FC;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(47,111,237,0.09) 1px, transparent 0);
  background-size: 22px 22px;
  position: relative;
}

/* signature: slim gradient accent bar, fixed to the very top of every page */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #123FAE, #2F6FED 45%, #63A4FF 100%);
  z-index: 100;
  pointer-events: none;
}

.app-shell, .center-shell {
  position: relative;
  z-index: 1;
}

/* ---------- Card ---------- */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16,24,64,0.04), 0 8px 24px rgba(16,24,64,0.06);
  padding: 32px;
}

/* ---------- Auth (login/signup-style admin-create) center layout ---------- */
.center-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-box { width: 100%; max-width: 420px; text-align: center; }
.brand {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.brand-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 28px; }

/* ---------- Form elements ---------- */
label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-dim); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=file], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--glass-border);
  background: #FBFCFE;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(47,111,237,0.14); background: #fff; }

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 22px;
  padding: 13px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2F6FED, #123FAE);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(47,111,237,0.35); }
.btn.secondary { background: #fff; color: var(--gold-light); border: 1.5px solid var(--glass-border); }
.btn.secondary:hover { border-color: var(--gold); box-shadow: none; }
.btn.danger { background: linear-gradient(135deg,#EF4444,#B91C1C); color: #fff; }
.btn.small { width: auto; padding: 8px 14px; font-size: 12px; margin-top: 0; }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; text-align: left; border: 1px solid transparent; }
.alert.error   { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.alert.success { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }

/* ---------- Dashboard shell ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  background: #ffffff;
  border-bottom: 1px solid var(--glass-border);
  position: relative; z-index: 50;
}
.topbar .brand { margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user-chip {
  font-size: 13px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw;
}

/* IMPORTANT: no position/z-index on .layout. It used to have
   `position:relative; z-index:1`, which created its own stacking context.
   That trapped the mobile drawer (.sidebar, z-index 9999) *inside* that
   context — so its z-index only ever competed against .content, never
   against #sidebarBackdrop (z-index 9998) which sits outside .layout.
   Net effect: the backdrop always painted on top of the drawer on mobile,
   silently swallowing every tap on the menu links (tapping a link just hit
   the backdrop's \"close menu\" handler instead). Keeping .layout unpositioned
   lets .sidebar and #sidebarBackdrop compare directly in the same stacking
   context, so the higher z-index (drawer) correctly wins. Do not re-add
   position/z-index here without moving #sidebarBackdrop inside .layout too. */
.layout { display: flex; min-height: calc(100vh - 62px); }
.sidebar {
  width: 220px; flex-shrink: 0;
  background: #FAFBFF;
  border-right: 1px solid var(--glass-border);
  padding: 20px 0;
}
.sidebar a {
  display: block; padding: 12px 24px; color: var(--ink-dim);
  text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent;
}
.sidebar a:hover, .sidebar a.active {
  color: var(--gold-light); background: rgba(47,111,237,0.08); border-left-color: var(--gold);
}
.content { flex: 1; padding: 28px; min-width: 0; }

.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card { padding: 20px; }
.stat-card .label { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.stat-card .value { font-size: 26px; font-weight: 800; color: var(--gold-light); margin-top: 6px; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--glass-border); }
th { color: var(--ink-dim); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; white-space: nowrap; background: #FAFBFF; }
tr:hover td { background: #F8FAFF; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.success { background: #ECFDF3; color: var(--success); }
.badge.pending { background: #FFFBEB; color: var(--pending); }
.badge.failed  { background: #FEF2F2; color: var(--danger); }

/* ---------- Mobile menu toggle (hidden on desktop) ---------- */
.menu-toggle {
  display: none;
  background: #fff;
  border: 1.5px solid var(--glass-border);
  color: var(--gold-light);
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  z-index: 10000;
  touch-action: manipulation;
}

/* =========================================================
   RESPONSIVE — tablets and phones
   ========================================================= */
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .glass-card { padding: 22px; }
}

@media (max-width: 900px) {
  .topbar { padding: 12px 16px; }
  .topbar .brand { font-size: 16px; }
  .content { padding: 18px; }

  .menu-toggle { display: block; }

  /* sidebar becomes a slide-in drawer on tablets + phones */
  .sidebar {
    display: block;
    position: fixed;
    top: 62px; left: 0; bottom: 0;
    width: 260px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 9999;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 8px;
    touch-action: manipulation;
    pointer-events: auto;
    /* Solid white so the drawer is fully opaque while open — the dashboard
       content underneath must never show through and overlap the menu text. */
    background: #ffffff;
    box-shadow: 10px 0 40px rgba(16,24,64,0.12);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar a {
    padding: 14px 24px; font-size: 15px;
    position: relative; z-index: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(47,111,237,0.25);
    pointer-events: auto;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: rgba(16,24,64,0.35);
  }
  .sidebar-backdrop.open { display: block; }

  /* Belt-and-braces: while the drawer is open, make everything behind it
     completely un-clickable (not just visually covered). If any other
     floating element, widget, or overlay on the page ever ends up between
     the drawer and its backdrop in stacking order, this still guarantees
     taps can only reach the drawer's own links while it's open. */
  body.menu-open .content,
  body.menu-open .topbar .user-chip {
    pointer-events: none;
  }

  .layout { display: block; }
  .content { width: 100%; }

  /* Belt-and-braces: the support bubble is position:fixed at the root level
     (outside .app-shell), so on very narrow phones its bottom-right corner
     can sit over the bottom of the drawer. Hide it while the drawer is open. */
  body.menu-open .tg-support-btn { display: none; }
}

@media (min-width: 901px) {
  .sidebar-backdrop { display: none !important; }
}

@media (max-width: 640px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .glass-card { padding: 18px; border-radius: 12px; }
  .content { padding: 16px; }

  /* forms/grids that used a fixed side column stack full width */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  input[type=text], input[type=password], input[type=email], input[type=number], select, textarea, .btn {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  .stat-card .value { font-size: 21px; }

  .tg-support-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 22px; }

  .auth-box { max-width: 100%; }
  .qr-box img { width: 160px; height: 160px; }
}

/* ---------- Telegram support floating button ---------- */
.tg-support-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  background: linear-gradient(135deg,#2F6FED,#123FAE);
  color: #fff; text-decoration: none;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 22px rgba(18,63,174,0.4);
  transition: transform .15s;
}
.tg-support-btn:hover { transform: scale(1.08); }

.qr-box { background: #fff; padding: 14px; border: 1px solid var(--glass-border); border-radius: 12px; display: inline-block; margin: 16px 0; }
.mono { font-family: 'SF Mono', 'Courier New', monospace; letter-spacing: 0.5px; }

/* ---------- API documentation page ---------- */
.docs-shell { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; }
.docs-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.docs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.docs-nav a {
  font-size: 12.5px; padding: 7px 13px; border-radius: 20px; text-decoration: none;
  color: var(--ink-dim); background: #fff; border: 1px solid var(--glass-border);
}
.docs-nav a:hover { color: var(--gold-light); border-color: var(--gold); }
.endpoint { margin-bottom: 34px; scroll-margin-top: 20px; }
.endpoint h3 { color: var(--gold-light); margin-bottom: 6px; }
.method-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 6px; margin-right: 8px; vertical-align: middle;
}
.method-badge.post { background: #ECFDF3; color: var(--success); }
.method-badge.get  { background: #EFF4FF; color: var(--gold-light); }
pre.code-block {
  background: #0B1B33; border: 1px solid #16264A; border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.6;
  font-family: 'SF Mono', 'Courier New', monospace; color: #CFE3FF;
}
pre.code-block .k { color: #7FB2FF; }
.params-table th, .params-table td { font-size: 12.5px; }
.download-row { display: flex; gap: 10px; flex-wrap: wrap; }
.download-row .btn { width: auto; }

/* ---------- Public checkout bridge (pay.php) ---------- */
.pay-frame-wrap { background: #fff; }