/* ═══════════════════════════════════════════════════════════════════
   CLEANTICK PANEL — MODERN UI v3 (bolder, 3D, slicker — theme-aware)
   Loads LAST, sitewide, after enhance.css.

   [FIX] v1/v2 applied dark colors unconditionally with !important,
   which silently broke the theme's ALREADY-BUILT light/dark toggle
   (day_night_btn / .nightmode, wired up in header.twig and fully
   implemented in the base theme's own CSS). Every color rule below is
   now scoped under body.nightmode, so:
     - .nightmode (dark, the default going forward) gets this bold 3D
       treatment, unchanged from before.
     - default / toggled-off-nightmode falls through cleanly to the
       theme's own original, already-working light styling -- nothing
       here fights it anymore.
   Shape/typography/motion rules that aren't color-dependent (fonts,
   border-radius, hover lift, 3D tilt) apply in both themes, since bold
   type and tactile motion read fine either way.
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --mu-void:        #07080b;
  --mu-surface:      #14171f;
  --mu-surface-2:    #1c2029;
  --mu-border:       rgba(255,255,255,.09);
  --mu-border-2:     rgba(255,255,255,.18);
  --mu-text:         #f5f7fa;
  --mu-text-muted:   #8b93a3;
  --mu-blue:         #3d8bff;
  --mu-green:        #22e58f;
  --mu-red:          #ff3c3c;
  --mu-gradient:     linear-gradient(135deg, var(--mu-blue), var(--mu-green));
  --mu-radius:       18px;
  --mu-radius-sm:    11px;
  --mu-font-display: 'Space Grotesk', 'Inter', sans-serif;
  --mu-font-body:    'Inter', -apple-system, sans-serif;
  --mu-font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  --mu-depth:     0 1px 0 rgba(255,255,255,.05) inset,
                  0 2px 4px rgba(0,0,0,.4),
                  0 12px 24px -8px rgba(0,0,0,.55),
                  0 24px 48px -16px rgba(0,0,0,.5);
  --mu-depth-hi:  0 1px 0 rgba(255,255,255,.08) inset,
                  0 4px 8px rgba(0,0,0,.45),
                  0 20px 36px -10px rgba(0,0,0,.6),
                  0 30px 60px -12px rgba(61,139,255,.22);

  /* Light-mode equivalents -- softer, no colored glow, shadows read as
     normal elevation instead of "depth in the dark". */
  --mu-depth-light:     0 1px 2px rgba(16,24,40,.06),
                        0 4px 10px rgba(16,24,40,.06),
                        0 10px 24px -6px rgba(16,24,40,.08);
  --mu-depth-light-hi:  0 1px 2px rgba(16,24,40,.07),
                        0 8px 18px rgba(16,24,40,.09),
                        0 18px 36px -10px rgba(16,24,40,.12);
}

/* ─── 1. TYPE SYSTEM (theme-agnostic — bold type reads fine either way) ─── */

body { font-family: var(--mu-font-body); }
body.dashboard.nightmode { background: var(--mu-void) !important; }

h1, h2, h3, h4, h5, h6,
.card-title, .card_v2 .card-body > h5, .card_v2 .card-body > h4,
#def_side_title .name, .menu_name, .kpi-lbl,
.pay-tab-btn .btn-label, .modal-title {
  font-family: var(--mu-font-display) !important;
  letter-spacing: -0.01em;
}

.user_balance .balance, .hstat-v, .kpi-num,
.order_id, .table td.price, .def_table td.price,
.pay-tab-btn .amount, #paymentAmount {
  font-family: var(--mu-font-mono) !important;
  letter-spacing: -0.01em;
}

/* ─── 2. CARDS — 3D depth in dark; theme's own card style in light ─── */

.nightmode .card_v2 {
  background:
    linear-gradient(var(--mu-surface), var(--mu-surface)) padding-box,
    linear-gradient(135deg, rgba(61,139,255,.55), rgba(34,229,143,.35) 45%, rgba(255,255,255,.06) 100%) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: var(--mu-depth) !important;
}
.nightmode .card_v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 30%);
  pointer-events: none;
}
.nightmode .card_v2:hover { box-shadow: var(--mu-depth-hi) !important; }

/* Light mode: same bold shape (radius/motion), theme's own light surface
   colors, a normal soft elevation shadow instead of the dark glow stack. */
body:not(.nightmode) .card_v2 { box-shadow: var(--mu-depth-light) !important; }
body:not(.nightmode) .card_v2:hover { box-shadow: var(--mu-depth-light-hi) !important; }

/* Shape + motion, both themes */
.card_v2 {
  border-radius: var(--mu-radius) !important;
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateX(0deg) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1),
              border-color .35s ease;
}
.card_v2:hover {
  transform: perspective(900px) rotateX(2.5deg) translateY(-6px) translateZ(20px) scale(1.008);
}
.card_v2::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 38px; height: 38px;
  background: var(--mu-gradient);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  box-shadow: -6px 6px 16px rgba(34,229,143,.25);
  z-index: 1;
}

/* ─── 3. SIGNATURE TICK (gradient itself works on any background) ──── */

.card_v2 .card-body > h5, .card_v2 .card-body > h4,
#def_side_title .name {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
}
.card_v2 .card-body > h5::after, .card_v2 .card-body > h4::after,
#def_side_title .name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 3px;
  background: var(--mu-gradient);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(34,229,143,.5);
  transition: width .3s ease;
}
.card_v2:hover .card-body > h5::after,
.card_v2:hover .card-body > h4::after,
.card_v2:hover #def_side_title .name::after {
  width: 52px;
}

#orders_menu .nav-link { position: relative; }
#orders_menu .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--mu-gradient);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(34,229,143,.5);
}

/* ─── 4. BUTTONS — pressable/3D in dark; theme's own button style in light ─── */

.nightmode .btn-primary, .nightmode .btn.btn-primary {
  background: var(--mu-gradient) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 6px 0 rgba(15,60,140,.55),
              0 10px 22px rgba(61,139,255,.35) !important;
}
.nightmode .btn-primary:hover, .nightmode .btn.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
              0 8px 0 rgba(15,60,140,.55),
              0 16px 30px rgba(61,139,255,.45) !important;
}
.nightmode .btn-primary:active, .nightmode .btn.btn-primary:active {
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset,
              0 2px 0 rgba(15,60,140,.55),
              0 4px 10px rgba(61,139,255,.3) !important;
}
.nightmode .btn-success, .nightmode .btn.btn-success {
  background: linear-gradient(135deg, #1fae72, var(--mu-green)) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 6px 0 rgba(12,90,60,.55),
              0 10px 22px rgba(34,229,143,.3) !important;
}
.nightmode .btn-success:active, .nightmode .btn.btn-success:active {
  box-shadow: 0 2px 0 rgba(12,90,60,.55), 0 4px 10px rgba(34,229,143,.25) !important;
}

/* Shape + press motion, both themes (color comes from theme's own .btn-primary in light) */
.btn-primary, .btn.btn-primary, .btn-success, .btn.btn-success {
  border-radius: var(--mu-radius-sm) !important;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover, .btn.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active, .btn.btn-primary:active,
.btn-success:active, .btn.btn-success:active { transform: translateY(3px); }
.btn { border-radius: var(--mu-radius-sm) !important; }

/* ─── 5. TABLES ──────────────────────────────────────────────────── */

.nightmode .def_table th, .nightmode .table th {
  color: var(--mu-text-muted) !important;
  border-bottom: 1px solid var(--mu-border) !important;
}
.nightmode .def_table tbody tr, .nightmode .table.order_page tbody tr {
  border-bottom: 1px solid var(--mu-border) !important;
}
.nightmode .def_table tbody tr:hover, .nightmode .table.order_page tbody tr:hover {
  background: rgba(255,255,255,.025) !important;
}
.def_table tbody tr, .table.order_page tbody tr { transition: background .2s ease; }

/* ─── 6. INPUTS — inset depth + glow only in dark ────────────────── */

.nightmode .form-control, .nightmode .form-select, .nightmode select.form-control {
  background: var(--mu-surface-2) !important;
  border: 1px solid var(--mu-border) !important;
  color: var(--mu-text) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) inset !important;
}
.nightmode .form-control:focus, .nightmode .form-select:focus {
  border-color: var(--mu-blue) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) inset, 0 0 0 3px rgba(61,139,255,.22) !important;
}
.form-control, .form-select, select.form-control {
  border-radius: var(--mu-radius-sm) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ─── 7. SIDEBAR ─────────────────────────────────────────────────── */

.nightmode .sidebar_menu, .nightmode #sidebar, .nightmode .main_sidebar { background: var(--mu-void) !important; }

/* [FIX] The base theme's own .menu_item.active rule sets a hard 2px
   border (border: 2px solid var(--bg-menu-active)) that neither
   enhance.css nor the previous version of this file ever cleared --
   only the background/box-shadow were being overridden, so that border
   stayed in place regardless of theme, producing a boxy outline around
   whichever nav item is active instead of a clean pill. Cleared
   explicitly below, in both themes now (previously only nightmode was
   addressed here). */
.menu_item.active,
.nightmode .menu_item.active {
  border: none !important;
  border-radius: var(--mu-radius-sm) !important;
  position: relative;
}
.nightmode .menu_item.active {
  background: linear-gradient(90deg, rgba(61,139,255,.16) 0%, rgba(34,229,143,.05) 100%) !important;
}
body:not(.nightmode) .menu_item.active {
  background: linear-gradient(90deg, rgba(61,139,255,.12) 0%, rgba(34,229,143,.04) 100%) !important;
}
/* Left accent bar instead of a full border -- keeps the site's red-accent
   language as a thin marker rather than boxing the whole row. */
.menu_item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3d8bff, #22e58f);
}
.menu_item {
  border-radius: var(--mu-radius-sm) !important;
  transition: background .15s ease, transform .1s ease;
}
.menu_item:active { transform: scale(.98); }

/* [FIX] This is the actual bug from the screenshots: no rule anywhere in
   the theme (base, enhance.css, or the previous version of this file)
   styled .menu_item:focus. On mobile, a tapped link keeps browser focus
   after the tap completes, so whichever item was tapped *last* -- not
   necessarily the active page -- kept the browser's raw default focus
   outline (a plain blue rectangle). That's why the box showed up on
   "Coupon" while "Add Funds" was the actual active page: it had nothing
   to do with .active state at all. Replaced with a soft glow that
   doesn't look like a stray leftover box, and removed entirely on tap/
   click via :focus:not(:focus-visible) so it only shows for genuine
   keyboard navigation. */
.menu_item:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,139,255,.35);
}
.menu_item:focus:not(:focus-visible) {
  box-shadow: none;
}

#more_menu {
  display: block !important;
  overflow: visible !important;
}

.sidebar_menu .menu_icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  flex-shrink: 0;
}
body:not(.nightmode) .sidebar_menu .menu_icon { background: rgba(0,0,0,.04); }
.menu_item.active .menu_icon {
  background: linear-gradient(135deg, rgba(61,139,255,.25), rgba(34,229,143,.25));
}

/* ─── 8. STAT / KPI CARDS ─────────────────────────────────────────── */

.nightmode .hstat-v, .nightmode .kpi-num {
  text-shadow: 0 2px 12px rgba(61,139,255,.25);
}

/* ─── 9. REDUCED MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card_v2, .card_v2:hover,
  .btn-primary, .btn-primary:hover, .btn-primary:active,
  .btn-success, .btn-success:active {
    transform: none !important;
    transition: none !important;
  }
}