/* ═══════════════════════════════════════════════════════════════════
   CLEANTICK PANEL ENHANCE — v1.0
   Bold text + Animated icons + Red accent colours
   Loaded after all theme CSS — safe overrides only
═══════════════════════════════════════════════════════════════════ */

/* ─── 1. KEYFRAME LIBRARY ─────────────────────────────────────── */

@keyframes enh-spin       { to   { transform: rotate(360deg); } }
@keyframes enh-spin-rev   { to   { transform: rotate(-360deg); } }
@keyframes enh-pulse      { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.22);opacity:.75} }
@keyframes enh-bounce     { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} 70%{transform:translateY(-2px)} }
@keyframes enh-wiggle     { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-7deg)} 80%{transform:rotate(7deg)} }
@keyframes enh-beat       { 0%,100%{transform:scale(1)} 14%{transform:scale(1.3)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} }
@keyframes enh-shake      { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes enh-tada       { 0%{transform:scale(1) rotate(0)} 10%{transform:scale(.95) rotate(-3deg)} 20%{transform:scale(1.05) rotate(3deg)} 40%{transform:scale(1.08) rotate(-2deg)} 60%{transform:scale(1.05) rotate(2deg)} 80%{transform:scale(1) rotate(-1deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes enh-float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes enh-flicker    { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes enh-glow-red   { 0%,100%{text-shadow:0 0 6px rgba(220,53,69,.5)} 50%{text-shadow:0 0 14px rgba(220,53,69,.9),0 0 26px rgba(220,53,69,.4)} }
@keyframes enh-glow-cyan  { 0%,100%{text-shadow:0 0 6px rgba(0,200,255,.45)} 50%{text-shadow:0 0 14px rgba(0,200,255,.85),0 0 26px rgba(0,200,255,.35)} }
@keyframes enh-slide-r    { from{transform:translateX(-3px)} to{transform:translateX(2px)} }
@keyframes enh-ring       { 0%,100%{transform:rotate(0)} 10%,30%{transform:rotate(-12deg)} 20%,40%{transform:rotate(12deg)} 50%{transform:rotate(0)} }
@keyframes enh-pop        { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes enh-red-flash  { 0%,100%{color:inherit} 50%{color:#dc3545} }

/* ─── 2. BOLD TEXT GLOBALLY ───────────────────────────────────── */

/* All headings — heavier */
.dashboard h1, .dashboard h2, .dashboard h3,
.dashboard h4, .dashboard h5, .dashboard h6 {
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

/* Sidebar menu labels */
.menu_name {
  font-weight: 700 !important;
  letter-spacing: 0.1px;
}

/* Card titles, section headings */
.card-title,
.card_v2 .card-body > h5,
.card_v2 .card-body > h4,
#def_side_title .name {
  font-weight: 800 !important;
}

/* Table headers */
thead th,
.table th,
.order_page th,
.def_table th {
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* Table data — slightly heavier for readability */
.table td,
.order_page td {
  font-weight: 500 !important;
}

/* Nav tabs, pills */
.nav-link,
#orders_menu .nav-link {
  font-weight: 600 !important;
}

/* Buttons */
.btn {
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}

/* Labels & form text */
label,
.form-label,
.control-label {
  font-weight: 600 !important;
}

/* Balance display */
.user_balance .balance,
.hstat-v,
.kpi-num {
  font-weight: 800 !important;
}

/* Status badges */
.ordStatus span,
.badge {
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}

/* Stat labels in sidebar */
.hstat-l,
.kpi-lbl {
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ─── 3. ICON BASE — smooth transition for all icons ─────────── */

.fas, .far, .fab, .fal, .fad,
.menu_icon .fas,
.menu_icon .far,
.menu_icon .fab {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1),
              color 0.25s ease,
              text-shadow 0.25s ease;
  will-change: transform;
}

/* ─── 4. SIDEBAR MENU ICONS — bounce on hover ────────────────── */

.menu_item:hover .menu_icon .fas,
.menu_item:hover .menu_icon .far,
.menu_item:hover .menu_icon .fab {
  animation: enh-bounce 0.55s ease;
  color: #ff3c3c;
}

/* Active menu item icon glows red */
.menu_item.active .menu_icon .fas,
.menu_item.active .menu_icon .far,
.menu_item.active .menu_icon .fab {
  animation: enh-glow-red 2.5s ease-in-out infinite;
  color: #ff3c3c;
}

/* ─── 5. SPECIFIC ICON ANIMATIONS — always-on subtle ─────────── */

/* Shopping cart — subtle float */
.fa-shopping-cart,
.fa-cart-plus { animation: enh-float 3s ease-in-out infinite; }

/* Bell — ring every 6s */
.fa-bell       { animation: enh-ring 6s ease-in-out infinite; }

/* Dollar / money icons — pulse */
.fa-hand-holding-usd,
.fa-wallet,
.fa-sack-dollar,
.fa-badge-dollar,
.fa-coins       { animation: enh-pulse 3s ease-in-out infinite; }

/* WiFi / API — flicker */
.fa-wifi        { animation: enh-flicker 2.5s ease-in-out infinite; }

/* Heart — beat */
.fa-heart       { animation: enh-beat 1.8s ease-in-out infinite; }

/* Refresh / redo — slow spin */
.fa-redo,
.fa-sync,
.fa-sync-alt    { animation: enh-spin 3s linear infinite; }

/* Check / double check — pop */
.fa-check-double { animation: enh-pop 2s ease-in-out infinite; }

/* Globe — slow reverse spin */
.fa-globe       { animation: enh-spin-rev 8s linear infinite; }

/* Arrow right — slide */
.fa-arrow-right,
.fa-chevron-right { animation: enh-slide-r 1.2s ease-in-out infinite alternate; }

/* Users — float */
.fa-users,
.fa-user-plus   { animation: enh-float 4s ease-in-out infinite; }

/* Download */
.fa-download    { animation: enh-bounce 2.5s ease-in-out infinite; }

/* Map signs */
.fa-map-signs   { animation: enh-float 3.5s ease-in-out infinite; }

/* ─── 6. HOVER ANIMATIONS — on interactive elements ─────────── */

/* Buttons: wiggle icon on hover */
.btn:hover .fas,
.btn:hover .far,
.btn:hover .fab {
  animation: enh-wiggle 0.5s ease;
}

/* Card hover: icon pops */
.card_v2:hover #def_side_title .icon .fas,
.card_v2:hover #def_side_title .icon .far {
  animation: enh-tada 0.6s ease;
  color: #ff3c3c;
}

/* Table action buttons */
.btn-actions:hover .fas,
.btn-actions:hover .far {
  animation: enh-shake 0.4s ease;
}

/* Top header icons */
.day_night_btn:hover .fas {
  animation: enh-spin 0.6s ease;
  color: #ff3c3c;
}

/* ─── 7. RED COLOUR ACCENTS ───────────────────────────────────── */

/* Sidebar active item — red accent bar */
.menu_item.active {
  border-left: 3px solid #dc3545 !important;
  background: linear-gradient(90deg,
    rgba(220,53,69,0.1) 0%,
    rgba(220,53,69,0.03) 100%) !important;
}

/* Sidebar menu item hover */
.menu_item:hover {
  border-left: 3px solid rgba(220,53,69,0.5) !important;
}

/* New Order button — red gradient */
.menu_item[href="/"]:not(.active),
.menu_item[href="/"]:first-of-type {
  position: relative;
}

/* Primary "New Order" CTA stands out in red */
.sidebar_menu > .menu_item:first-child {
  background: linear-gradient(135deg,
    rgba(220,53,69,0.15) 0%,
    rgba(220,53,69,0.04) 100%) !important;
  border-left: 3px solid #dc3545 !important;
}
.sidebar_menu > .menu_item:first-child .menu_icon .fas {
  color: #ff3c3c !important;
  animation: enh-glow-red 2.5s ease-in-out infinite;
}
.sidebar_menu > .menu_item:first-child .menu_name {
  color: #ff6b6b !important;
}

/* Red glow on Add Funds button */
.menu_item[href="/addfunds"] .menu_icon .fas {
  color: #ff3c3c !important;
}

/* Status badges — red for canceled/rejected */
.ordStatus[style*="#ec4646"],
.badge.bg-danger,
.badge[style*="background: #ec4646"] {
  background: #dc3545 !important;
  box-shadow: 0 0 8px rgba(220,53,69,0.4);
}

/* Red highlight on important numbers */
.user_balance .balance {
  color: #ff6b6b !important;
  text-shadow: 0 0 12px rgba(255,60,60,0.2);
}

/* Active nav tab — red underline */
#orders_menu .nav-link.active {
  border-bottom: 2px solid #dc3545 !important;
  color: #ff6b6b !important;
}
#orders_menu .nav-link:hover {
  color: #ff6b6b !important;
}

/* Red accent on card top border on hover */
.card_v2:hover {
  border-top: 2px solid rgba(220,53,69,0.35) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ticket count badge — red */
.sidebar_menu .badge {
  background: #dc3545 !important;
  box-shadow: 0 0 8px rgba(220,53,69,0.5);
  animation: enh-pulse 2s ease-in-out infinite;
}

/* Top header balance area — red glow */
.top_header .fa-bars:hover {
  color: #ff3c3c;
  animation: enh-wiggle 0.4s ease;
}

/* Table row hover — red left accent */
.table.order_page tbody tr:hover,
.def_table tbody tr:hover {
  border-left: 2px solid rgba(220,53,69,0.4);
}

/* Order ID — red subtle */
.order_id {
  color: #ff6b6b !important;
  font-weight: 700 !important;
}

/* ─── 8. MOBILE BOTTOM NAV — red active ──────────────────────── */

.mob-nav-item.active {
  color: #ff3c3c !important;
}
.mob-nav-item.active::after {
  background: #dc3545 !important;
}
.mob-nav-icon-center {
  background: linear-gradient(135deg, #dc3545, #ff6b6b) !important;
  box-shadow: 0 4px 18px rgba(220,53,69,0.5) !important;
}
.mob-nav-center.active .mob-nav-icon-center {
  box-shadow: 0 6px 28px rgba(220,53,69,0.75) !important;
}

/* ─── 9. REDUCE MOTION — respect user preference ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .fas, .far, .fab, .fal,
  .menu_icon .fas, .menu_icon .far,
  .menu_icon .fab {
    animation: none !important;
    transition: color 0.2s ease !important;
  }
}