/* ═══════════════════════════════════════════════════════════════════
   CLEANTICK PANEL — MODERN UI v4 (calm, friendly, simple)
   Loads LAST, sitewide, after enhance.css.

   [REWORK] v1-v3 leaned hard into glowing gradient borders, stacked
   multi-layer shadows, 3D tilt on hover, and glow-pulse effects on
   nearly everything. Feedback was clear: it reads as busy/heavy, not
   friendly or simple to use. This version keeps the same dark theme
   and the same functional fixes (menu active-state border bug, missing
   focus styles, the "more menu" visibility fix) but replaces almost
   all of the decorative glow/gradient treatment with plain, calm
   surfaces -- a single soft shadow for elevation, solid subtle
   borders, a small clean lift on hover, nothing that glows or pulses.
   Typography system (Space Grotesk / Inter / IBM Plex Mono) is kept
   as-is -- that was never part of the complaint, it's just good type.
═══════════════════════════════════════════════════════════════════ */

@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:        #0d0f14;
  --mu-surface:      #171a21;
  --mu-surface-2:    #1e222b;
  --mu-border:       rgba(255,255,255,.08);
  --mu-border-2:     rgba(255,255,255,.14);
  --mu-text:         #f0f2f5;
  --mu-text-muted:   #93a0b0;
  --mu-blue:         #3d8bff;
  --mu-green:        #22c58f;
  --mu-radius:       14px;
  --mu-radius-sm:    10px;
  --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;

  /* One calm elevation shadow -- no colored glow, no stacked layers */
  --mu-shadow:     0 1px 2px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.18);
  --mu-shadow-hi:  0 2px 4px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.22);
  --mu-shadow-light:     0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.06);
  --mu-shadow-light-hi:  0 2px 4px rgba(16,24,40,.06), 0 8px 16px rgba(16,24,40,.08);
}

/* ─── 1. TYPE SYSTEM (unchanged -- not part of the complaint) ────── */

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 — one calm shadow, solid border, small lift ───────── */

.nightmode .card_v2 {
  background: var(--mu-surface) !important;
  border: 1px solid var(--mu-border) !important;
  box-shadow: var(--mu-shadow) !important;
}
.nightmode .card_v2:hover {
  border-color: var(--mu-border-2) !important;
  box-shadow: var(--mu-shadow-hi) !important;
}
body:not(.nightmode) .card_v2 { box-shadow: var(--mu-shadow-light) !important; }
body:not(.nightmode) .card_v2:hover { box-shadow: var(--mu-shadow-light-hi) !important; }

.card_v2 {
  border-radius: var(--mu-radius) !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.card_v2:hover { transform: translateY(-2px); }

/* Section heading underline -- plain, no glow */
.card_v2 .card-body > h5, .card_v2 .card-body > h4,
#def_side_title .name {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.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: 20px; height: 2px;
  border-radius: 2px;
  background: var(--mu-blue);
  opacity: .6;
}

#orders_menu .nav-link { position: relative; }
#orders_menu .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--mu-blue);
  border-radius: 2px;
}

/* ─── 3. BUTTONS — solid fill, small lift, no fake bezel shadow ──── */

.nightmode .btn-primary, .nightmode .btn.btn-primary {
  background: var(--mu-blue) !important;
  border: none !important;
  box-shadow: var(--mu-shadow) !important;
}
.nightmode .btn-primary:hover, .nightmode .btn.btn-primary:hover {
  background: #4f97ff !important;
  box-shadow: var(--mu-shadow-hi) !important;
}
.nightmode .btn-success, .nightmode .btn.btn-success {
  background: var(--mu-green) !important;
  border: none !important;
  box-shadow: var(--mu-shadow) !important;
}

.btn-primary, .btn.btn-primary, .btn-success, .btn.btn-success {
  border-radius: var(--mu-radius-sm) !important;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .btn.btn-primary:hover,
.btn-success:hover, .btn.btn-success:hover { transform: translateY(-1px); }
.btn-primary:active, .btn.btn-primary:active,
.btn-success:active, .btn.btn-success:active { transform: translateY(0); }
.btn { border-radius: var(--mu-radius-sm) !important; }

/* ─── 4. 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,.02) !important;
}

/* ─── 5. INPUTS — plain, clear focus, no glow ────────────────────── */

.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;
}
.nightmode .form-control:focus, .nightmode .form-select:focus {
  border-color: var(--mu-blue) !important;
  box-shadow: 0 0 0 3px rgba(61,139,255,.15) !important;
}
.form-control, .form-select, select.form-control {
  border-radius: var(--mu-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* ─── 6. SIDEBAR ─────────────────────────────────────────────────── */

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

/* [FIX kept] The base theme's .menu_item.active rule sets a hard 2px
   border that nothing else was clearing, producing a boxy outline
   around the active nav item. Cleared, replaced with a plain tinted
   background + thin left accent bar -- no glow. */
.menu_item.active,
.nightmode .menu_item.active {
  border: none !important;
  border-radius: var(--mu-radius-sm) !important;
  position: relative;
}
.nightmode .menu_item.active { background: rgba(61,139,255,.1) !important; }
body:not(.nightmode) .menu_item.active { background: rgba(61,139,255,.08) !important; }
.menu_item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--mu-blue);
}
.menu_item {
  border-radius: var(--mu-radius-sm) !important;
  transition: background .15s ease;
}

/* [FIX kept] No :focus style existed for .menu_item, so a tapped item
   kept the browser's raw default focus outline regardless of which
   page was actually active. */
.menu_item:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,139,255,.3);
}
.menu_item:focus:not(:focus-visible) { box-shadow: none; }

.sidebar_menu .menu_icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
}
body:not(.nightmode) .sidebar_menu .menu_icon { background: rgba(0,0,0,.03); }

/* [FIX kept] "Show More" used to hide Child Panel/Affiliates/Updates/API
   behind a collapsed toggle. Always visible now. */
#more_menu {
  display: block !important;
  overflow: visible !important;
}

/* ─── 7. STAT / KPI NUMBERS — plain, no text-glow ────────────────── */
.hstat-v, .kpi-num { text-shadow: none; }

/* ─── 8. REDUCED MOTION ─────────────────────────────────────────── */

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