/* ============================================
   Flexy Design System v2 — Purple Glass Theme
   ============================================ */

/* === CSS Variables === */
:root {
  --bg-deep: #0a0618;
  --bg-surface: rgba(255,255,255,0.04);
  --bg-surface-strong: rgba(255,255,255,0.06);
  --text-primary: #f0f0f0;
  --text-muted: rgba(255,255,255,0.5);
  --text-dim: rgba(255,255,255,0.3);
  --purple: #a78bfa;
  --purple-strong: #7c3aed;
  --purple-glow: rgba(124,58,237,0.3);
  --pink: #f472b6;
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
}

/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:hidden;overflow-x:clip}
body{
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Grid Background === */
.grain-bg{
  background-image: radial-gradient(rgba(167,139,250,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* === Glass Morphism === */
.glass{
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
}
.glass-strong{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* === Gradients === */
.gradient-primary{ background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.gradient-hero{ background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 30%, #a78bfa 60%, #f472b6 100%); }
.gradient-green{ background: linear-gradient(135deg, #059669, #34d399); }
.text-gradient{
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Animations === */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glow{0%,100%{box-shadow:0 0 30px rgba(167,139,250,0.15)}50%{box-shadow:0 0 60px rgba(167,139,250,0.3)}}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.7}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes tickBump{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.animate-fadeup{animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) both}
.animate-fadein{animation:fadeIn .4s ease both}
.animate-float{animation:float 4s ease-in-out infinite}
.animate-glow{animation:glow 3s ease-in-out infinite}
.animate-pulse-slow{animation:pulse 2.5s ease-in-out infinite}
.animate-slide-down{animation:slideDown .3s ease both}
.animate-slide-up{animation:slideUp .3s ease both}
.animate-scale-in{animation:scaleIn .25s ease both}

/* Stagger children */
.stagger > *{animation:fadeUp .5s cubic-bezier(.2,.9,.3,1) both}
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s}
.stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s}
.stagger > *:nth-child(6){animation-delay:.3s}
.stagger > *:nth-child(7){animation-delay:.35s}
.stagger > *:nth-child(8){animation-delay:.4s}

/* Page enter = first child fades up */
.page-enter > :first-child{animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) both}

/* === Balance Card === */
.balance-card{
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(124,58,237,0.3);
}
.balance-card::before{
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  border-radius: 50%;
}
.balance-card::after{
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(244,114,182,0.2), transparent 70%);
  border-radius: 50%;
}

/* === Quick Actions === */
.quick-action{
  transition: all .25s cubic-bezier(.2,.9,.3,1);
  position: relative;
  overflow: hidden;
}
.quick-action:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(167,139,250,0.3) !important;
  box-shadow: 0 8px 25px rgba(124,58,237,0.1);
}
.quick-action:active{ transform: scale(.97); }

/* === Buttons === */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: all .25s cubic-bezier(.2,.9,.3,1);
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primary{
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 30px rgba(124,58,237,0.5); }
.btn-primary:active{ transform: scale(.97); }
.btn-outline{
  background: transparent;
  border: 2px solid rgba(167,139,250,0.4);
  color: var(--purple);
}
.btn-outline:hover{ background: rgba(167,139,250,0.1); border-color: var(--purple); }
.btn-green{
  background: linear-gradient(135deg, #059669, #34d399);
  color: #fff;
  box-shadow: 0 4px 20px rgba(5,150,105,0.3);
}

/* === Inputs === */
input[type="text"], input[type="tel"], input[type="number"],
input[type="email"], input[type="url"], input[type="password"],
input[type="search"], select, textarea{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: .95rem;
  transition: all .2s;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
  background: rgba(255,255,255,0.08);
}
input::placeholder, textarea::placeholder{ color: var(--text-dim); }

/* === Cards === */
.card{
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all .25s;
}
.card:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(167,139,250,0.15);
}

/* === Navigation === */
.nav-link{
  transition: all .2s;
  position: relative;
}
.nav-link:hover{ color: var(--purple) !important; }
.nav-link.active{ color: var(--purple) !important; }

/* Desktop sidebar */
@media (min-width: 640px) {
  .nav-sidebar-btn{
    transition: all .25s cubic-bezier(.2,.9,.3,1);
  }
  .nav-sidebar-btn:hover{
    background: rgba(167,139,250,0.1) !important;
    border-color: rgba(167,139,250,0.3) !important;
    color: var(--purple) !important;
  }
}

/* Mobile bottom nav */
@media (max-width: 639px) {
  .mobile-nav{
    background: rgba(10,6,24,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
}

/* === Toasts === */
.toast{
  animation: slideDown .3s ease both;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* === Transaction items === */
.txn-item{
  transition: all .2s;
}
.txn-item:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(167,139,250,0.1) !important;
}

/* === Scrollbar === */
::-webkit-scrollbar{ width: 5px; height: 5px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(167,139,250,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(167,139,250,0.4); }

/* === Responsive === */
@media (max-width: 639px) {
  .balance-card{ border-radius: var(--radius-lg); }
  input[type="tel"], input[type="text"]{ font-size: 16px !important; } /* prevent iOS zoom */
  .btn{ padding: .7rem 1.5rem; font-size: .85rem; }
}

/* === Safe Area === */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-area-bottom{ padding-bottom: env(safe-area-inset-bottom); }
  .safe-area-top{ padding-top: env(safe-area-inset-top); }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Print === */
@media print {
  body{ background: white !important; color: black !important; }
  .glass, .card, .balance-card{ background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; }
  nav, .mobile-nav, .nav-sidebar-btn{ display: none !important; }
}

/* === Modal === */
.modal-container{
  animation: fadeIn .2s ease;
}
.modal-container > div{
  animation: scaleIn .2s ease;
}

/* === Live indicator === */
.live-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   Style Overrides — يحول التصميم القديم للجديد
   ============================================ */

/* Gray backgrounds → Glass */
.bg-gray-800, .bg-gray-800\/40, .bg-gray-900, .bg-gray-900\/50,
.bg-slate-800, .bg-slate-800\/40, .bg-slate-800\/60, .bg-slate-900,
[class*="bg-gray-800"], [class*="bg-gray-900"] {
  background: var(--bg-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Gray borders → subtle white */
.border-gray-700, .border-gray-700\/30, .border-gray-700\/40, .border-gray-700\/50,
.border-gray-800, .border-slate-700, .border-slate-700\/30, .border-slate-700\/40, .border-slate-700\/50 {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Gray text → muted white */
.text-gray-300 { color: rgba(255,255,255,0.7) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: rgba(255,255,255,0.3) !important; }
.text-gray-600, .text-slate-500, .text-slate-600 { color: rgba(255,255,255,0.25) !important; }

/* Emerald/Green accents → Violet/Purple */
.text-flexy-400, .text-emerald-400 { color: var(--purple) !important; }
.text-flexy-500, .text-emerald-500, .text-green-400 { color: var(--purple-strong) !important; }
.bg-flexy-600, .bg-emerald-600, .bg-green-600 { 
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; 
}
.bg-flexy-500\/10, .bg-emerald-500\/10, .bg-green-500\/10 { background: rgba(167,139,250,0.1) !important; }
.bg-emerald-500\/20 { background: rgba(167,139,250,0.15) !important; }
.hover\:bg-flexy-700:hover, .hover\:bg-emerald-700:hover { background: #6d28d9 !important; }
.hover\:text-emerald-400:hover, .hover\:text-flexy-400:hover { color: var(--purple) !important; }

/* Focus rings → violet */
.focus\:ring-flexy-500:focus, .focus\:ring-emerald-500:focus {
  --tw-ring-color: rgba(167,139,250,0.5) !important;
}
.focus\:border-flexy-500:focus { border-color: var(--purple) !important; }

/* Shadow overrides */
.shadow-flexy-600\/20, .shadow-flexy-600\/25, .shadow-emerald-600\/20, .shadow-emerald-600\/25 {
  box-shadow: 0 4px 20px rgba(124,58,237,0.3) !important;
}
.shadow-emerald-500\/20 { box-shadow: 0 4px 20px rgba(167,139,250,0.2) !important; }

/* HAS selector for checked radio borders */
.has-\[\:checked\]\:border-flexy-500:has(:checked) { border-color: var(--purple) !important; }
.has-\[\:checked\]\:bg-flexy-950\/30:has(:checked) { background: rgba(124,58,237,0.1) !important; }

/* Hover border overrides */
.hover\:border-flexy-500:hover, .hover\:border-emerald-500:hover { border-color: var(--purple) !important; }

/* Text colors for different message types */
.text-emerald-300 { color: var(--green) !important; }
.text-emerald-200\/70, .text-emerald-200\/80 { color: rgba(167,139,250,0.6) !important; }
.text-emerald-200\/60 { color: rgba(167,139,250,0.5) !important; }

/* Placeholder text */
.placeholder-gray-500::placeholder { color: rgba(255,255,255,0.2) !important; }

/* Smooth transitions on all interactive elements */
.bg-gray-800, .bg-gray-900, .bg-slate-800, .bg-slate-900,
.border-gray-700, .border-slate-700,
a, button, input, select, textarea {
  transition: all .25s cubic-bezier(.2,.9,.3,1);
}

/* Round all cards consistently */
.bg-gray-800, .bg-gray-900, .bg-slate-800, .bg-slate-900,
.rounded-2xl, .rounded-xl {
  border-radius: var(--radius-lg) !important;
}

/* ============================================ */

/* === Utility: hidden until loaded === */
[x-cloak], .cloak{ display: none !important; }