/* ══════════════════════════════════════════════════════════════════════════
   GSM CRON on the GSM X Tool material. Loaded after gx.css.
     1. Pieces gx.css does not have: the brand lock-up, the dashboard hero,
        a few public-page widgets, and dark mode for the auth modal.
     2. A bridge for the Blade pages: their Tailwind classes (cards, buttons,
        inputs, tables, text colours) are re-skinned inside the app shell and
        the auth card, so the markup keeps working and the material changes.
        Dark terminals (bg-slate-900/950, bg-black) are left alone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Brand lock-up: the mark plus the app name ─────────────────────────── */
.gx-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--gx-text); white-space: nowrap; }
.gx-brand img { width: 28px; height: 28px; display: block; }
.gx-brand b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.gx-brand-img { height: 30px; width: auto; display: block; }
.gx-brand.is-light, .gx-modal-brand .gx-brand { color: #fff; }
.gx-nav.on-dark:not(.is-scrolled) .gx-brand { color: #fff; }
.gx-side-logo .gx-brand b { font-size: 16px; }
.gx-footer-brand .gx-brand img { width: 32px; height: 32px; }
.gx-footer-brand .gx-brand b { font-size: 19px; }
.gx-modal-logo-sm { display: block; }
@media (min-width: 820px) { .gx-modal-logo-sm { display: none; } }

/* ── Public widgets ───────────────────────────────────────────────────── */
.gx-step-n { font: 500 12px var(--gx-mono); color: var(--gx-accent); letter-spacing: .14em; }
.gx-live-dot { width: 8px; height: 8px; border-radius: 999px; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: gxPulse 2s infinite; flex-shrink: 0; display: inline-block; }
@keyframes gxPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.gx-status-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 999px; }
.gx-contact { display: grid; gap: 16px; }
@media (min-width: 900px) { .gx-contact { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.gx-contact-row { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; }
.gx-contact-row small { display: block; font-size: 12.5px; color: var(--gx-faint); }
.gx-contact-row b { display: block; font-size: 16px; font-weight: 500; margin-top: 2px; word-break: break-all; }
.gx-reseller-head { display: flex; align-items: center; gap: 14px; }
.gx-reseller-head h3 { font-size: 19px !important; }
.gx-reseller-logo { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--gx-border); padding: 6px; }
.gx-reseller-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gx-prose ul { padding-left: 20px; margin: 0 0 14px; }
.gx-prose-foot { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--gx-border); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.gx-about-silk { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: inherit; opacity: .55; }
.gx-card-ink.gx-tile > :not(canvas) { position: relative; }
.gx-check { width: 16px; height: 16px; accent-color: #0B0B10; }
html.dark .gx-check { accent-color: var(--gx-accent); }
.gx-cta .gx-hero-cta { margin-top: 28px; }
select.gx-input { appearance: auto; }

/* The auth modal has no dark state in gx.css; give it one. */
html.dark .gx-modal-box { background: rgba(18,18,26,.96); border-color: rgba(255,255,255,.08); }
html.dark .gx-modal-x:hover { background: rgba(255,255,255,.08); }
html.dark .gx-field .gx-input, html.dark .gx-sso-btn, html.dark .gx-steps b { background: rgba(255,255,255,.06); }
html.dark .gx-field .gx-eye:hover { background: rgba(255,255,255,.08); }
html.dark .gx-socials a { background: rgba(255,255,255,.06); }
html.dark .gx-socials a:hover { background: #fff; color: #0B0B10 !important; }
html.dark .gx-footer-word { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; }

/* ── App shell additions ──────────────────────────────────────────────── */
.gx-app .gx-side, .gx-app .gx-drawer { border-radius: 28px; }
.gx-side-user form { margin: 0; }
.gx-ip-chip {
  display: none; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 12px; margin-right: 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gx-border); background: var(--gx-surface-soft); color: var(--gx-muted); font: inherit; transition: border-color .2s, background .2s;
}
.gx-ip-chip:hover { border-color: var(--gx-border-hover); }
.gx-ip-chip-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.gx-ip-chip-txt small { font-size: 10px; color: var(--gx-faint); }
.gx-ip-chip-txt b { font: 500 12.5px var(--gx-mono); color: var(--gx-text); }
.gx-ip-chip > i { font-size: 13px; color: var(--gx-faint); }
@media (min-width: 640px) { .gx-ip-chip { display: inline-flex; } }

/* Dashboard hero on the silk, as on the Pay merchant dashboard */
.gx-app .dh-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 36px; min-height: 230px;
  background: #070A24; color: #fff; box-shadow: var(--gx-shadow-lift);
}
.gx-app .dh-hero canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: -1; opacity: .95; }
.gx-app .dh-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,10,36,.92) 0%, rgba(7,10,36,.55) 55%, rgba(7,10,36,.1) 100%); }
.gx-app .dh-hero-copy { position: relative; max-width: 600px; }
.gx-app .dh-plan { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.gx-app .dh-hello { margin: 16px 0 8px; font-size: clamp(1.8rem, 3vw, 2.5rem) !important; font-weight: 400 !important; letter-spacing: -0.04em !important; color: #fff !important; }
.gx-app .dh-text { margin: 0 0 22px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.65; }
.gx-app .dh-text strong { color: #fff; font-weight: 600; }
.gx-app .dh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gx-app .dh-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; background: #fff; color: #0B0B10 !important; border: 0; cursor: pointer; transition: transform .2s, background .2s; }
.gx-app .dh-btn:hover { background: #EDEBFF; transform: translateY(-1px); }
.gx-app .dh-btn.is-ghost { background: rgba(255,255,255,.06); color: #fff !important; border: 1px solid rgba(255,255,255,.24); }
.gx-app .dh-btn.is-ghost:hover { background: rgba(255,255,255,.14); }
.gx-app .dh-btn.is-danger { background: rgba(239,68,68,.16); color: #FCA5A5 !important; border: 1px solid rgba(239,68,68,.4); }
.gx-app .dh-btn.is-danger:hover { background: #DC2626; color: #fff !important; }
@media (max-width: 640px) { .gx-app .dh-hero { padding: 26px 22px; min-height: 0; } }

/* Cron engine animation — job tracks whose dispatch pulse sweeps across and fires on schedule */
.gx-app .dh-cron { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); width: min(40%, 300px); display: flex; flex-direction: column; gap: 14px; z-index: 0; pointer-events: none; }
.gx-app .dh-cron-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.62); }
.gx-app .dh-cron-pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: dhPulse 1.8s ease-out infinite; }
@keyframes dhPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.gx-app .dh-cron-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.gx-app .dh-cron-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: 999px; background: linear-gradient(90deg, rgba(99,102,241,0), #6366f1 60%, #a855f7); transform: translateX(-120%); animation: dhRun 3.6s cubic-bezier(.65,0,.35,1) infinite; animation-delay: var(--d, 0s); }
@keyframes dhRun { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }
.gx-app .dh-cron-track::after { content: ''; position: absolute; top: 50%; right: -1px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #34d399; opacity: .22; animation: dhFire 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes dhFire { 0%, 48% { opacity: .22; box-shadow: 0 0 0 0 rgba(52,211,153,0); } 56% { opacity: 1; box-shadow: 0 0 0 6px rgba(52,211,153,.35); } 72% { opacity: .25; box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { opacity: .22; } }
@media (max-width: 860px) { .gx-app .dh-cron { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-app .dh-cron-pulse, .gx-app .dh-cron-track::before, .gx-app .dh-cron-track::after { animation: none; } .gx-app .dh-cron-track::before { transform: translateX(70%); } }

/* ════════ Full-width pages — let page containers use the whole content area ════════ */
.gx-app .gx-content .max-w-7xl,
.gx-app .gx-content .max-w-6xl,
.gx-app .gx-content .max-w-5xl,
.gx-app .gx-content .max-w-4xl { max-width: 100% !important; }

/* ════════ Sidebar nav refresh — tied to the violet→blue brand identity ════════ */
.gx-app .gx-side-group {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gx-faint); padding: 0 12px; margin: 22px 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.gx-app .gx-side-group::after { content: ''; flex: 1; height: 1px; background: var(--gx-border); }
.gx-app .gx-side-group:first-child { margin-top: 4px; }

.gx-app .gx-side-link {
  position: relative; gap: 12px; padding: 9px 12px; border-radius: 14px; margin-bottom: 3px;
  font-size: 14px; font-weight: 500; color: var(--gx-muted) !important;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gx-app .gx-side-link i {
  font-size: 15px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--gx-surface-soft); border: 1px solid var(--gx-border); color: var(--gx-muted);
  transition: inherit;
}
.gx-app .gx-side-link:hover { background: var(--gx-accent-soft); color: var(--gx-text) !important; transform: translateX(3px); }
.gx-app .gx-side-link:hover i { color: var(--gx-accent); border-color: var(--gx-accent-line); }

/* Active item: brand gradient pill with glow and a soft inner highlight */
.gx-app .gx-side-link.is-on,
html.dark .gx-app .gx-side-link.is-on {
  background: var(--gx-brand); color: #fff !important; font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(90,61,255,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
.gx-app .gx-side-link.is-on:hover { transform: none; }
.gx-app .gx-side-link.is-on i,
html.dark .gx-app .gx-side-link.is-on i {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: #fff;
}

/* Plan chip: subtle lift on hover */
.gx-app .gx-side-plan { transition: background .2s, border-color .2s, transform .2s; }
.gx-app .gx-side-plan:hover { transform: translateY(-1px); border-color: var(--gx-accent); }

@media (prefers-reduced-motion: reduce) {
  .gx-app .gx-side-link, .gx-app .gx-side-plan { transition: none; }
  .gx-app .gx-side-link:hover, .gx-app .gx-side-plan:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tailwind bridge — dashboard content (.gx-content) and auth card (.gx-auth-body)
   ══════════════════════════════════════════════════════════════════════════ */
.gx-content, .gx-auth-body { font-family: var(--gx-font); }

/* Cards: anything white with a border becomes a glass panel. */
.gx-app .gx-content .bg-white,
.gx-app .gx-content .bg-gray-800 { background: var(--gx-surface); }
.gx-app .gx-content .bg-white.border,
.gx-app .gx-content .bg-white[class*="shadow"] {
  background: var(--gx-glass); backdrop-filter: var(--gx-blur); -webkit-backdrop-filter: var(--gx-blur);
  border-color: var(--gx-glass-border); box-shadow: var(--gx-shadow), var(--gx-lip);
}
.gx-app .gx-content [class*="rounded-[2rem]"], .gx-app .gx-content [class*="rounded-[2.5rem]"],
.gx-app .gx-content [class*="rounded-[3rem]"] { border-radius: 28px; }

/* Soft fills */
.gx-app .gx-content :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-slate-200) { background-color: var(--gx-row); }
html.dark .gx-app .gx-content :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-slate-200) { background-color: rgba(255,255,255,.05); }
.gx-app .gx-content :is(.bg-slate-50, .bg-gray-50).border { background-color: var(--gx-surface-soft); }

/* Hairlines */
.gx-app .gx-content :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300, .border-slate-700, .border-slate-800),
.gx-auth-body :is(.border-gray-200, .border-gray-300, .border-slate-200) { border-color: var(--gx-border); }
.gx-app .gx-content :is(.divide-slate-100, .divide-slate-200, .divide-gray-100, .divide-gray-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--gx-border); }

/* Type */
.gx-app .gx-content :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800),
.gx-auth-body :is(.text-gray-900, .text-gray-800, .text-slate-900) { color: var(--gx-text); }
.gx-app .gx-content :is(.text-slate-500, .text-slate-600, .text-slate-700, .text-gray-500, .text-gray-600, .text-gray-700),
.gx-auth-body :is(.text-gray-500, .text-gray-600, .text-gray-700) { color: var(--gx-muted); }
.gx-app .gx-content :is(.text-slate-400, .text-gray-400, .text-slate-300),
.gx-auth-body .text-gray-400 { color: var(--gx-faint); }
.gx-app .gx-content :is(h1, h2, h3, h4) { font-family: var(--gx-font); color: var(--gx-text); }
.gx-app .gx-content :is(h1, h2, h3).font-bold, .gx-app .gx-content :is(h1, h2, h3).font-black { font-weight: 500; letter-spacing: -0.025em; }
.gx-app .gx-content .font-black { font-weight: 600; }
.gx-app .gx-content .font-mono, .gx-auth-body .font-mono { font-family: var(--gx-mono); }

/* The brand colour: blue/indigo/purple become the GSM X Tool violet. */
.gx-app .gx-content :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600, .text-purple-500, .text-purple-600),
.gx-auth-body :is(.text-blue-500, .text-blue-600, .text-blue-700) { color: var(--gx-accent); }
.gx-app .gx-content :is(.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-purple-50, .bg-purple-100) { background-color: var(--gx-accent-soft); }
.gx-app .gx-content :is(.border-blue-100, .border-blue-200, .border-blue-500, .border-indigo-100, .border-indigo-200, .border-purple-200) { border-color: var(--gx-accent-line); }
.gx-app .gx-content :not(a):not(button):is(.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600) { background: var(--gx-brand); }
.gx-app .gx-content :not(a):not(button):is(.from-blue-500, .from-blue-600, .from-indigo-500, .from-indigo-600, .from-purple-500, .from-purple-600) {
  --tw-gradient-from: #7E00FF var(--tw-gradient-from-position); --tw-gradient-to: #0072FF var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Buttons: anything clickable with a fill and vertical padding is a pill. */
.gx-app .gx-content :is(a, button)[class*="py-"][class*="bg-"],
.gx-app .gx-content input[type="submit"],
.gx-auth-body :is(a, button)[class*="py-"][class*="bg-"],
.gx-auth-body button[type="submit"] { border-radius: 999px; font-weight: 500; letter-spacing: 0; box-shadow: none; }

/* Primary: ink pill, white in dark mode */
.gx-app .gx-content :is(a, button, input[type="submit"]):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-slate-900, .bg-gray-900, .bg-gradient-to-r, .bg-gradient-to-br),
.gx-auth-body :is(a, button):is(.bg-blue-600, .bg-gradient-to-r, .bg-indigo-600),
.gx-auth-body button[type="submit"] {
  background: #0B0B10; background-image: none; color: #fff !important; border-color: #0B0B10;
  box-shadow: 0 10px 24px -14px rgba(11,11,16,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.gx-app .gx-content :is(a, button, input[type="submit"]):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-slate-900, .bg-gray-900, .bg-gradient-to-r, .bg-gradient-to-br):hover,
.gx-auth-body :is(a, button):is(.bg-blue-600, .bg-gradient-to-r, .bg-indigo-600):hover,
.gx-auth-body button[type="submit"]:hover { background: #26262F; background-image: none; }
html.dark .gx-app .gx-content :is(a, button, input[type="submit"]):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-slate-900, .bg-gray-900, .bg-gradient-to-r, .bg-gradient-to-br),
html.dark .gx-auth-body :is(a, button):is(.bg-blue-600, .bg-gradient-to-r, .bg-indigo-600),
html.dark .gx-auth-body button[type="submit"] { background: #F4F4F7; color: #0B0B10 !important; border-color: #F4F4F7; }
html.dark .gx-app .gx-content :is(a, button, input[type="submit"]):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-slate-900, .bg-gray-900, .bg-gradient-to-r, .bg-gradient-to-br):hover,
html.dark .gx-auth-body button[type="submit"]:hover { background: #fff; }

/* Danger and success keep their meaning, in the soft-pill family. */
.gx-app .gx-content :is(a, button):is(.bg-rose-500, .bg-rose-600, .bg-red-500, .bg-red-600) { background: #DC2626; color: #fff !important; }
.gx-app .gx-content :is(a, button):is(.bg-rose-500, .bg-rose-600, .bg-red-500, .bg-red-600):hover { background: #B91C1C; }
.gx-app .gx-content :is(a, button):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600) { background: #16A34A; color: #fff !important; }
.gx-app .gx-content :is(a, button):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600):hover { background: #15803D; }

/* Secondary: white or soft buttons become glass pills. */
.gx-app .gx-content :is(a, button)[class*="py-"]:is(.bg-white, .bg-slate-100, .bg-gray-100, .bg-slate-50),
.gx-auth-body :is(a, button)[class*="py-"]:is(.bg-white, .bg-gray-50) {
  background: rgba(255,255,255,.78); color: var(--gx-text) !important; border: 1px solid var(--gx-border);
  backdrop-filter: var(--gx-blur); -webkit-backdrop-filter: var(--gx-blur); box-shadow: var(--gx-lip);
}
html.dark .gx-app .gx-content :is(a, button)[class*="py-"]:is(.bg-white, .bg-slate-100, .bg-gray-100, .bg-slate-50),
html.dark .gx-auth-body :is(a, button)[class*="py-"]:is(.bg-white, .bg-gray-50) { background: rgba(255,255,255,.07); }

/* Inputs */
.gx-app .gx-content :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.gx-input),
.gx-auth-body :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea) {
  background-color: rgba(255,255,255,.72); border: 1px solid var(--gx-border); border-radius: 14px; color: var(--gx-text);
  font-family: var(--gx-font); box-shadow: none; min-height: 44px; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.gx-app .gx-content textarea:not(.gx-input), .gx-auth-body textarea { border-radius: 16px; }
.gx-app .gx-content :is(input, select, textarea):not(.gx-input):focus,
.gx-auth-body :is(input, select, textarea):focus {
  outline: none; background-color: #fff; border-color: var(--gx-accent-line); box-shadow: 0 0 0 4px var(--gx-accent-soft); --tw-ring-shadow: 0 0 #0000;
}
html.dark .gx-app .gx-content :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.gx-input),
html.dark .gx-auth-body :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea) { background-color: rgba(255,255,255,.06); }
html.dark .gx-app .gx-content :is(input, select, textarea):not(.gx-input):focus,
html.dark .gx-auth-body :is(input, select, textarea):focus { background-color: rgba(255,255,255,.1); }
.gx-app .gx-content :is(input, textarea)::placeholder, .gx-auth-body :is(input, textarea)::placeholder { color: var(--gx-faint); }
.gx-app .gx-content select option, .gx-auth-body select option { background: #fff; color: #0B0B10; }
html.dark .gx-app .gx-content select option, html.dark .gx-auth-body select option { background: #15151D; color: #F4F4F7; }
.gx-app .gx-content input[type="checkbox"], .gx-auth-body input[type="checkbox"] { color: #0B0B10; border-color: var(--gx-border-hover); border-radius: 6px; }
html.dark .gx-app .gx-content input[type="checkbox"], html.dark .gx-auth-body input[type="checkbox"] { color: var(--gx-accent); background-color: transparent; }
.gx-app .gx-content input[type="checkbox"]:focus, .gx-auth-body input[type="checkbox"]:focus { box-shadow: 0 0 0 4px var(--gx-accent-soft); }

/* Tables */
.gx-app .gx-content table thead :is(th, td) { color: var(--gx-faint); font-weight: 500; letter-spacing: .02em; }
.gx-app .gx-content table thead :is(tr, th)[class*="bg-"] { background: transparent; }
.gx-app .gx-content table tbody tr:hover { background-color: var(--gx-row); }

/* Shadows: coloured glows give way to the soft gx shadow. */
.gx-app .gx-content :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl):not(button):not(a) { box-shadow: var(--gx-shadow); }

/* ── Auth card (Blade login, register, OTP, 2FA …) ─────────────────────── */
.gx-auth-body { --gx-auth-bg: rgba(255,255,255,.96); color: var(--gx-text); }
html.dark .gx-auth-body { --gx-auth-bg: rgb(18,18,26); }
.gx-auth-body h2 { font-size: 28px !important; font-weight: 400 !important; letter-spacing: -0.035em; }
.gx-auth-body label, .gx-auth-body .block.font-medium.text-sm { font-size: 12.5px; }
.gx-auth-body .bg-white:not(button):not(a) { background: var(--gx-auth-bg); }
.gx-auth-body button[type="submit"], .gx-auth-body a[class*="py-3"] { min-height: 48px; }
.gx-auth-body a[class*="bg-[#1877F2]"], .gx-auth-body a[class*="bg-[#24292e]"] { border-radius: 999px; }
.gx-auth-body .text-center.mb-6 > p { font-size: 14px; }

/* ════════ New GSM CRON logo — bigger in the header, aspect kept everywhere ════════ */
.gx-app .gx-side-logo { margin-bottom: 26px; }
.gx-app .gx-side-logo .gx-brand { display: flex; align-items: center; }
.gx-app .gx-side-logo img { height: 42px !important; width: auto !important; }
.gx-footer-brand .gx-brand img { height: 34px !important; width: auto !important; }