/* theme_patch.css
   Force pages to fully follow shell light/dark theme.
   Load this AFTER page css (plans.css/pay.css).
*/

body{
  background: var(--bx-bg) !important;
  background-image: none !important; /* kill page-specific gradients */
  color: var(--bx-text) !important;
}

/* common containers */
.wrap, .panel{
  background: color-mix(in srgb, var(--bx-panel) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--bx-line) 80%, transparent) !important;
  color: var(--bx-text) !important;
}

/* plans */
.planCard, .box, .table, .tr{
  background: color-mix(in srgb, var(--bx-panel) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--bx-line) 80%, transparent) !important;
  color: var(--bx-text) !important;
}
.planSub, .price, .hint, .lbl, .t2{
  color: var(--bx-muted) !important;
}

/* pay */
.pick, .msg{
  background: color-mix(in srgb, var(--bx-panel) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--bx-line) 80%, transparent) !important;
  color: var(--bx-text) !important;
}
.pSub{
  color: var(--bx-muted) !important;
}

/* inputs */
.input, select, textarea{
  background: color-mix(in srgb, var(--bx-panel) 75%, transparent) !important;
  border-color: color-mix(in srgb, var(--bx-line) 80%, transparent) !important;
  color: var(--bx-text) !important;
}

/* buttons */
.btn{
  background: color-mix(in srgb, var(--bx-panel) 75%, transparent) !important;
  border-color: color-mix(in srgb, var(--bx-line) 80%, transparent) !important;
  color: var(--bx-text) !important;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(47,107,255,.95), rgba(47,107,255,.70)) !important;
  border-color: color-mix(in srgb, var(--bx-primary) 55%, transparent) !important;
  color:#fff !important;
}

/* =========================
   LIGHT MODE TEXT FIXES
   ========================= */
html[data-theme="light"] .panel,
html[data-theme="light"] .planCard,
html[data-theme="light"] .pick,
html[data-theme="light"] .msg,
html[data-theme="light"] .box,
html[data-theme="light"] .table,
html[data-theme="light"] .tr,
html[data-theme="light"] .item{
  color: var(--bx-text) !important;
}

/* headings */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .planTitle,
html[data-theme="light"] .pTitle{
  color: var(--bx-text) !important;
}

/* muted labels / subtitles / hints */
html[data-theme="light"] .lbl,
html[data-theme="light"] .hint,
html[data-theme="light"] .planSub,
html[data-theme="light"] .price,
html[data-theme="light"] .pSub,
html[data-theme="light"] .sub,
html[data-theme="light"] .t2{
  color: var(--bx-muted) !important;
}

/* plans bullets text (these are usually hard-coded white) */
html[data-theme="light"] .bullets,
html[data-theme="light"] .bullets li,
html[data-theme="light"] .bullets li b{
  color: var(--bx-text) !important;
}

/* table cells */
html[data-theme="light"] .td{
  color: var(--bx-text) !important;
}
html[data-theme="light"] .td:last-child{
  color: var(--bx-muted) !important;
}

/* pills/badges on pages */
html[data-theme="light"] .pill,
html[data-theme="light"] .pill.ok,
html[data-theme="light"] .pill.bad,
html[data-theme="light"] .pill.warn{
  color: var(--bx-muted) !important;
}

/* inputs placeholder */
html[data-theme="light"] ::placeholder{
  color: color-mix(in srgb, var(--bx-muted) 70%, transparent) !important;
}

/* =========================
   LIGHT MODE BUTTON CONTRAST
   ========================= */

/* Non-primary buttons: dark text for readability */
html[data-theme="light"] .btn:not(.primary),
html[data-theme="light"] .qa,
html[data-theme="light"] .navItem,
html[data-theme="light"] .bxNavItem{
  color: var(--bx-text) !important;
  background: #ffffff !important; /* clean button surface */
  border-color: var(--bx-line) !important;
}

/* Primary buttons: keep white text */
html[data-theme="light"] .btn.primary{
  color: #ffffff !important;
}

/* If you have small buttons too */
html[data-theme="light"] .btn.small:not(.primary){
  color: var(--bx-text) !important;
}

/* Hover/active states (optional but nice) */
html[data-theme="light"] .btn:not(.primary):hover{
  background: color-mix(in srgb, #ffffff 80%, var(--bx-primary) 20%) !important;
  border-color: color-mix(in srgb, var(--bx-line) 60%, var(--bx-primary) 40%) !important;
}

/* =========================
   LIGHT MODE: STATUS PILL TEXT FIX
   (pay-offline, initiated, pending, successful, failed)
   ========================= */

html[data-theme="light"] .pill,
html[data-theme="light"] .pill.ok,
html[data-theme="light"] .pill.warn,
html[data-theme="light"] .pill.bad{
  color: var(--bx-text) !important;     /* ✅ readable text */
}

/* keep the background tints but ensure borders are visible */
html[data-theme="light"] .pill{
  background: #ffffff !important;
  border-color: var(--bx-line) !important;
}

html[data-theme="light"] .pill.warn{
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.55) !important;
}

html[data-theme="light"] .pill.ok{
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.55) !important;
}

html[data-theme="light"] .pill.bad{
  background: rgba(255,77,109,.18) !important;
  border-color: rgba(255,77,109,.55) !important;
}

/* =========================
   LIGHT MODE: SELECT/OPTION TEXT FIX
   (initiated, pay-offline etc in dropdown)
   ========================= */

html[data-theme="light"] select,
html[data-theme="light"] .input,
html[data-theme="light"] #statusFilter{
  color: var(--bx-text) !important;
  background: #ffffff !important;
  border-color: var(--bx-line) !important;
}

/* Some browsers allow styling options */
html[data-theme="light"] option{
  color: #0b1220 !important;
  background: #ffffff !important;
}