/* JFun UI Kit v1 - single source of the shared look. Edit only via a "Design Change" step. */

/* ===================== TOKENS ===================== */
:root {
  /* spacing */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px;
  /* radius */
  --ui-r-sm: 12px; --ui-r-md: 16px; --ui-r-lg: 20px; --ui-r-pill: 999px;
  /* font sizes */
  --ui-fs-xs: 12px; --ui-fs-sm: 14px; --ui-fs-md: 16px; --ui-fs-lg: 20px; --ui-fs-xl: 28px;
  /* sizes + motion */
  --ui-tap: 48px; --ui-tap-sm: 40px; --ui-topbar-h: 56px; --ui-ease: 150ms ease;
  /* fonts */
  --ui-font-display: var(--jg-font-display, 'Rajdhani', system-ui, sans-serif);
  --ui-font-body: var(--jg-font-body, 'Poppins', system-ui, sans-serif);
  /* colour aliases (existing tokens, so dark and light themes keep working) */
  --ui-text: var(--text-color);
  --ui-muted: var(--text-secondary);
  --ui-surface: var(--jf-glass);
  --ui-surface-solid: var(--jg-surface-2, var(--card-bg));
  --ui-border: var(--jf-glass-border);
  --ui-shadow: var(--jf-glass-shadow);
  --ui-accent: var(--jf-pink);
  --ui-grad: var(--jf-grad);
  --ui-grad-soft: var(--jf-grad-soft);
  --ui-ok: var(--jg-ok);
  --ui-warn: var(--jg-warn);
  --ui-bad: var(--jg-bad);
  --ui-nav-bg: var(--jf-nav-bg);
  --ui-nav-border: var(--jf-nav-border);
  --ui-nav-shadow: var(--jf-nav-shadow);
  --ui-toast-bg: var(--jf-toast-bg);
  /* literals (allowed only here) */
  --ui-on-accent: #fff;
  --ui-accent-shadow: 0 6px 18px rgba(242,2,137,0.30);
  --ui-overlay: rgba(6,2,10,0.72);
}
html[data-theme="light"] { --ui-overlay: rgba(0,0,0,0.45); }

/* ===================== BASE ===================== */
/* Doubled body class on purpose: beats html body.jg-<page> rules; applies to nothing until a page has class jg-ui. */
html body.jg-ui.jg-ui { font-family: var(--ui-font-body); color: var(--ui-text); }
html body.jg-ui.jg-ui button,
html body.jg-ui.jg-ui input,
html body.jg-ui.jg-ui select,
html body.jg-ui.jg-ui textarea { font-family: inherit; }
html body.jg-ui.jg-ui [class^="jx-"],
html body.jg-ui.jg-ui [class*=" jx-"] { transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease), box-shadow var(--ui-ease), transform var(--ui-ease), opacity var(--ui-ease); }
@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* layout helper for NEW pages only */
html body.jg-ui.jg-ui .jx-container { max-width: 560px; margin: 0 auto; padding: 0 var(--ui-s4); }

/* ===================== KIT A (layout components, filled in Step 3) ===================== */

/* A1 TOP BAR */
html body.jg-ui.jg-ui .navbar,
html body.jg-ui.jg-ui .jx-topbar {
  min-height: var(--ui-topbar-h);
  padding: 8px var(--ui-s3);
  background: var(--ui-nav-bg);
  border-bottom: 1px solid var(--ui-nav-border);
  box-shadow: var(--ui-nav-shadow);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .navbar .logo,
html body.jg-ui.jg-ui .navbar .menu-toggle,
html body.jg-ui.jg-ui .jx-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-s2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ui-s3);
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-md);
  font-weight: 700;
  text-decoration: none;
}

html body.jg-ui.jg-ui .navbar .jf-logo {
  height: 36px;
  width: auto;
}

html body.jg-ui.jg-ui .navbar .balance-display,
html body.jg-ui.jg-ui .jx-balance {
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s3);
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .navbar .balance-text {
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .navbar .balance-display i {
  color: var(--ui-accent);
}

/* A2 PAGE TITLES */
html body.jg-ui.jg-ui .section-title,
html body.jg-ui.jg-ui .action-title,
html body.jg-ui.jg-ui .jx-title {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-subtitle,
html body.jg-ui.jg-ui .action-subtitle,
html body.jg-ui.jg-ui .stat-card-subtitle {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
  font-weight: 500;
}

/* A3 CARDS */
html body.jg-ui.jg-ui .info-card,
html body.jg-ui.jg-ui .merged-card,
html body.jg-ui.jg-ui .form-card,
html body.jg-ui.jg-ui .balance-card,
html body.jg-ui.jg-ui .amount-card,
html body.jg-ui.jg-ui .history-card,
html body.jg-ui.jg-ui .jx-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-card {
  padding: var(--ui-s4);
}

/* A4 STAT CARD (after A3 on purpose: .stat-card.balance-card / .amount-card keep the stat look) */
html body.jg-ui.jg-ui .stat-card,
html body.jg-ui.jg-ui .jx-stat {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  padding: var(--ui-s3);
  box-shadow: none;
}

html body.jg-ui.jg-ui .stat-card-title,
html body.jg-ui.jg-ui .jx-stat-label {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
  font-weight: 600;
}

html body.jg-ui.jg-ui .stat-card-value,
html body.jg-ui.jg-ui .jx-stat-value {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .stat-card-icon {
  color: var(--ui-accent);
}

/* A5 ACTION TILE */
html body.jg-ui.jg-ui .action-btn,
html body.jg-ui.jg-ui .jx-tile {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  color: var(--ui-text);
  min-height: 72px;
  box-shadow: var(--ui-shadow);
}

html body.jg-ui.jg-ui .action-icon {
  color: var(--ui-accent);
}

/* A6 TABS */
html body.jg-ui.jg-ui .tab,
html body.jg-ui.jg-ui .jx-tab {
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s4);
  border-radius: var(--ui-r-pill);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  color: var(--ui-muted);
  background: transparent;
  border: 1px solid transparent;
}

html body.jg-ui.jg-ui .tab.active,
html body.jg-ui.jg-ui .jx-tab.active {
  background: var(--ui-grad);
  color: var(--ui-on-accent);
}

html body.jg-ui.jg-ui .tabs,
html body.jg-ui.jg-ui .tabs-container,
html body.jg-ui.jg-ui .jx-tabs {
  background: var(--ui-surface-solid);
  border-radius: var(--ui-r-pill);
  border: 1px solid var(--ui-border);
}

html body.jg-ui.jg-ui .tab-badge {
  border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
}

/* A7 PAGINATION */
html body.jg-ui.jg-ui .pagination-btn,
html body.jg-ui.jg-ui .jx-page-btn {
  min-width: var(--ui-tap-sm);
  min-height: var(--ui-tap-sm);
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: var(--ui-fs-sm);
  font-weight: 600;
}

html body.jg-ui.jg-ui .pagination-btn.active,
html body.jg-ui.jg-ui .jx-page-btn.active {
  background: var(--ui-grad);
  color: var(--ui-on-accent);
  border-color: transparent;
}

html body.jg-ui.jg-ui .pagination-btn:disabled,
html body.jg-ui.jg-ui .pagination-btn.disabled,
html body.jg-ui.jg-ui .jx-page-btn:disabled,
html body.jg-ui.jg-ui .jx-page-btn.disabled {
  opacity: 0.45;
}

/* A8 EMPTY STATE */
html body.jg-ui.jg-ui .empty-state,
html body.jg-ui.jg-ui .jx-empty {
  color: var(--ui-muted);
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .empty-state i,
html body.jg-ui.jg-ui .jx-empty i {
  color: var(--ui-muted);
  opacity: 0.7;
}

/* A9 HISTORY / LIST TEXT */
html body.jg-ui.jg-ui .history-user,
html body.jg-ui.jg-ui .detail-value {
  font-size: var(--ui-fs-sm);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .history-details,
html body.jg-ui.jg-ui .info-list {
  font-size: var(--ui-fs-sm);
  color: var(--ui-muted);
}

/* ===================== KIT B (forms, buttons, modal, toast, filled in Step 4) ===================== */

/* B1 BUTTONS (no width on any button; .jg-btn(.jg-btn--ghost) are named here because the task lists them and index.php uses them) */
html body.jg-ui.jg-ui .btn,
html body.jg-ui.jg-ui .submit-btn,
html body.jg-ui.jg-ui .btn-login,
html body.jg-ui.jg-ui .modal-btn,
html body.jg-ui.jg-ui .copy-btn-small,
html body.jg-ui.jg-ui .jg-btn,
html body.jg-ui.jg-ui .jx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-s2);
  min-height: var(--ui-tap);
  padding: 0 var(--ui-s5);
  border-radius: var(--ui-r-md);
  border: 0;
  background: var(--ui-grad);
  color: var(--ui-on-accent);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-md);
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: var(--ui-accent-shadow);
  cursor: pointer;
  transition: var(--ui-ease);
}

html body.jg-ui.jg-ui .copy-btn-small,
html body.jg-ui.jg-ui .jx-btn--sm {
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s4);
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .jg-btn--ghost,
html body.jg-ui.jg-ui .modal-btn.cancel,
html body.jg-ui.jg-ui .jx-btn--ghost {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  box-shadow: none;
}

html body.jg-ui.jg-ui .jx-btn--danger {
  background: var(--ui-bad);
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn:disabled,
html body.jg-ui.jg-ui .submit-btn:disabled,
html body.jg-ui.jg-ui .btn-login:disabled,
html body.jg-ui.jg-ui .modal-btn:disabled,
html body.jg-ui.jg-ui .copy-btn-small:disabled,
html body.jg-ui.jg-ui .jg-btn:disabled,
html body.jg-ui.jg-ui .jx-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn.disabled,
html body.jg-ui.jg-ui .submit-btn.disabled,
html body.jg-ui.jg-ui .btn-login.disabled,
html body.jg-ui.jg-ui .modal-btn.disabled,
html body.jg-ui.jg-ui .copy-btn-small.disabled,
html body.jg-ui.jg-ui .jg-btn.disabled,
html body.jg-ui.jg-ui .jx-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn:active,
html body.jg-ui.jg-ui .submit-btn:active,
html body.jg-ui.jg-ui .btn-login:active,
html body.jg-ui.jg-ui .modal-btn:active,
html body.jg-ui.jg-ui .copy-btn-small:active,
html body.jg-ui.jg-ui .jg-btn:active,
html body.jg-ui.jg-ui .jx-btn:active {
  opacity: 0.9;
}

/* B2 INPUTS (no padding: icon insets belong to the pages) */
html body.jg-ui.jg-ui .form-input,
html body.jg-ui.jg-ui .form-select,
html body.jg-ui.jg-ui .form-group input,
html body.jg-ui.jg-ui .form-group select,
html body.jg-ui.jg-ui .form-group textarea,
html body.jg-ui.jg-ui .input-group input,
html body.jg-ui.jg-ui .input-group select,
html body.jg-ui.jg-ui .jx-input {
  min-height: var(--ui-tap);
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface-solid);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: var(--ui-fs-md);
}

html body.jg-ui.jg-ui .form-input:focus,
html body.jg-ui.jg-ui .form-select:focus,
html body.jg-ui.jg-ui .form-group input:focus,
html body.jg-ui.jg-ui .form-group select:focus,
html body.jg-ui.jg-ui .form-group textarea:focus,
html body.jg-ui.jg-ui .input-group input:focus,
html body.jg-ui.jg-ui .input-group select:focus,
html body.jg-ui.jg-ui .jx-input:focus {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
  border-color: var(--ui-accent);
}

html body.jg-ui.jg-ui .form-input::placeholder,
html body.jg-ui.jg-ui .form-select::placeholder,
html body.jg-ui.jg-ui .form-group input::placeholder,
html body.jg-ui.jg-ui .form-group select::placeholder,
html body.jg-ui.jg-ui .form-group textarea::placeholder,
html body.jg-ui.jg-ui .input-group input::placeholder,
html body.jg-ui.jg-ui .input-group select::placeholder,
html body.jg-ui.jg-ui .jx-input::placeholder {
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .form-input:disabled,
html body.jg-ui.jg-ui .form-select:disabled,
html body.jg-ui.jg-ui .form-group input:disabled,
html body.jg-ui.jg-ui .form-group select:disabled,
html body.jg-ui.jg-ui .form-group textarea:disabled,
html body.jg-ui.jg-ui .input-group input:disabled,
html body.jg-ui.jg-ui .input-group select:disabled,
html body.jg-ui.jg-ui .jx-input:disabled {
  opacity: 0.6;
}

html body.jg-ui.jg-ui .input-label,
html body.jg-ui.jg-ui .jx-label {
  font-size: var(--ui-fs-sm);
  font-weight: 600;
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .input-icon {
  color: var(--ui-muted);
}

/* B3 CURRENCY CHIPS (selected = real class .active) */
html body.jg-ui.jg-ui .currency-option,
html body.jg-ui.jg-ui .jx-chip {
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-weight: 700;
  transition: var(--ui-ease);
}

html body.jg-ui.jg-ui .currency-option.active,
html body.jg-ui.jg-ui .jx-chip.active {
  border-color: var(--ui-accent);
  background: var(--ui-grad-soft);
}

html body.jg-ui.jg-ui .currency-text {
  font-size: var(--ui-fs-sm);
}

/* B4 BADGES (real modifiers; .open, .Refund, .Draw stay neutral) */
html body.jg-ui.jg-ui .status-badge,
html body.jg-ui.jg-ui .bet-type-badge,
html body.jg-ui.jg-ui .jx-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ui-s1) var(--ui-s3);
  border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .status-badge.Approved,
html body.jg-ui.jg-ui .status-badge.Accepted,
html body.jg-ui.jg-ui .status-badge.closed,
html body.jg-ui.jg-ui .status-badge.active,
html body.jg-ui.jg-ui .bet-type-badge.Won,
html body.jg-ui.jg-ui .bet-type-badge.Win,
html body.jg-ui.jg-ui .jx-badge--ok {
  color: var(--ui-ok);
  border-color: var(--ui-ok);
}

html body.jg-ui.jg-ui .status-badge.Pending,
html body.jg-ui.jg-ui .status-badge.in_progress,
html body.jg-ui.jg-ui .bet-type-badge.Pending,
html body.jg-ui.jg-ui .jx-badge--warn {
  color: var(--ui-warn);
  border-color: var(--ui-warn);
}

html body.jg-ui.jg-ui .status-badge.Rejected,
html body.jg-ui.jg-ui .status-badge.suspended,
html body.jg-ui.jg-ui .status-badge.banned,
html body.jg-ui.jg-ui .bet-type-badge.Lost,
html body.jg-ui.jg-ui .bet-type-badge.Loss,
html body.jg-ui.jg-ui .bet-type-badge.Cancelled,
html body.jg-ui.jg-ui .jx-badge--bad {
  color: var(--ui-bad);
  border-color: var(--ui-bad);
}

/* B5 ALERTS */
html body.jg-ui.jg-ui .alert,
html body.jg-ui.jg-ui .jx-alert {
  padding: var(--ui-s3) var(--ui-s4);
  border-radius: var(--ui-r-sm);
  font-size: var(--ui-fs-sm);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .alert-success,
html body.jg-ui.jg-ui .jx-alert--ok {
  border-left: 4px solid var(--ui-ok);
}

html body.jg-ui.jg-ui .alert-error,
html body.jg-ui.jg-ui .jx-alert--bad {
  border-left: 4px solid var(--ui-bad);
}

html body.jg-ui.jg-ui .alert-close {
  color: var(--ui-muted);
  background: transparent;
  border: 0;
}

/* B6 MODAL (solid, never glass; .modal gets overlay colour only) */
html body.jg-ui.jg-ui .modal {
  background: var(--ui-overlay);
}

html body.jg-ui.jg-ui .modal-content,
html body.jg-ui.jg-ui .jx-modal {
  background: var(--ui-surface-solid);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .modal-header,
html body.jg-ui.jg-ui .modal-footer {
  border-color: var(--ui-border);
}

html body.jg-ui.jg-ui .modal-title {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .modal-body,
html body.jg-ui.jg-ui .modal-row {
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .modal-row .label {
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .modal-row .value {
  color: var(--ui-text);
}

/* B7 TOAST (real modifiers: success, error; never position/bottom/z-index) */
html body.jg-ui.jg-ui .toast,
html body.jg-ui.jg-ui .jx-toast {
  border-radius: var(--ui-r-md);
  background: var(--ui-toast-bg);
  color: var(--ui-text);
  font-size: var(--ui-fs-sm);
  padding: var(--ui-s3) var(--ui-s4);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
}

html body.jg-ui.jg-ui .toast.success,
html body.jg-ui.jg-ui .jx-toast--ok {
  border-left: 4px solid var(--ui-ok);
}

html body.jg-ui.jg-ui .toast.error,
html body.jg-ui.jg-ui .jx-toast--bad {
  border-left: 4px solid var(--ui-bad);
}

html body.jg-ui.jg-ui .jx-toast--warn {
  border-left: 4px solid var(--ui-warn);
}

html body.jg-ui.jg-ui .toast-icon {
  font-size: var(--ui-fs-md);
}