/* ============================================================
   AB Sales — Premium Shared UI Theme (ab-ui.css)
   يُحمَّل بعد باقي ملفات CSS في كل الصفحات ما عدا index.html
   ============================================================ */

:root{
  --ab-void:#050711;
  --ab-ink:#f1f5f9;
  --ab-mist:#93a1b4;
  --ab-mist-2:#c8d0e0;
  --ab-violet:#8b5cf6;
  --ab-violet-soft:#a78bfa;
  --ab-violet-deep:#6d28d9;
  --ab-cyan:#22d3ee;
  --ab-mint:#34d399;
  --ab-line:rgba(255,255,255,.09);
  --ab-line-2:rgba(255,255,255,.16);
  --ab-glass:rgba(255,255,255,.035);
  --ab-glass-2:rgba(10,14,28,.72);
  --ab-radius:20px;
  --ab-shadow:0 30px 80px -30px rgba(0,0,0,.85);
  --ab-glow:0 10px 40px -10px rgba(139,92,246,.55);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ab-ink);
  background:
    radial-gradient(ellipse 80% 55% at 12% -8%,rgba(139,92,246,.28),transparent 52%),
    radial-gradient(ellipse 55% 45% at 92% 2%,rgba(34,211,238,.13),transparent 48%),
    radial-gradient(ellipse 60% 45% at 50% 108%,rgba(109,40,217,.16),transparent 55%),
    var(--ab-void);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
[dir=rtl] body{font-family:Tajawal,Inter,system-ui,sans-serif}
[dir=ltr] body{font-family:Inter,Tajawal,system-ui,sans-serif}

::selection{background:rgba(139,92,246,.35);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.45)}

h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.25}
h1{font-weight:900}
h2,h3{font-weight:800}
a{color:var(--ab-violet-soft)}
small,.muted,.sub{color:var(--ab-mist)}
code,kbd,pre{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ---------- Ambient background layer (injected by ab-ui.js) ---------- */
.ab-aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ab-aurora .ab-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.ab-aurora .o1{width:520px;height:520px;top:-180px;inset-inline-start:-140px;background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%);animation:abFloat 22s ease-in-out infinite}
.ab-aurora .o2{width:420px;height:420px;top:20%;inset-inline-end:-160px;background:radial-gradient(circle,rgba(34,211,238,.32),transparent 70%);animation:abFloat 28s ease-in-out infinite reverse}
.ab-aurora .o3{width:600px;height:600px;bottom:-260px;inset-inline-start:35%;background:radial-gradient(circle,rgba(109,40,217,.42),transparent 70%);animation:abFloat 34s ease-in-out infinite}
.ab-aurora .ab-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,#000 10%,transparent 72%);
}
@keyframes abFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-40px,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ab-aurora .ab-orb{animation:none}}

/* keep real content above the aurora */
body > *:not(.ab-aurora){position:relative;z-index:1}

/* ---------- Surfaces ---------- */
.card,.panel,.box,.kpi,.tile,.section,.glass,.widget,.form-card,.pane,.list-card{
  background:var(--ab-glass)!important;
  border:1px solid var(--ab-line)!important;
  border-radius:var(--ab-radius)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--ab-shadow);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .35s;
}
.card:hover,.kpi:hover,.tile:hover{
  transform:translateY(-4px);
  border-color:rgba(167,139,250,.34)!important;
  box-shadow:0 28px 60px -22px rgba(139,92,246,.35);
}
.featured,.card.featured{
  border-color:rgba(167,139,250,.55)!important;
  background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(255,255,255,.03))!important;
  box-shadow:0 0 0 1px rgba(167,139,250,.25),0 40px 80px -30px rgba(139,92,246,.55);
}

/* ---------- Buttons ---------- */
button,.btn,.button{font-family:inherit}
.btn,.button,button.primary,.btn-primary{
  border:0;
  border-radius:14px;
  padding:13px 18px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9 55%,#4f46e5);
  box-shadow:var(--ab-glow);
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn:hover,.button:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px -10px rgba(139,92,246,.8)}
.btn:disabled,.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost,.btn.secondary,.btn-secondary,.ghost{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--ab-line-2)!important;
  color:var(--ab-mist-2)!important;
  box-shadow:none!important;
}
.btn-ghost:hover,.ghost:hover{color:#fff!important;border-color:rgba(167,139,250,.5)!important}
.btn-danger,.danger{background:linear-gradient(135deg,#f43f5e,#be123c)!important;box-shadow:0 10px 34px -12px rgba(244,63,94,.7)!important}

/* ---------- Forms ---------- */
input,select,textarea,.email,.input,.field{
  width:100%;
  box-sizing:border-box;
  background:rgba(6,9,18,.75)!important;
  border:1px solid var(--ab-line)!important;
  border-radius:13px!important;
  color:var(--ab-ink)!important;
  padding:12px 14px;
  font-family:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(167,139,250,.65)!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.16);
}
input::placeholder,textarea::placeholder{color:#5c6780}
label{font-size:13px;font-weight:700;color:var(--ab-mist-2)}
.form-group{margin-bottom:16px}

/* ---------- Chips / badges ---------- */
.chip,.badge,.pill,.tag,.market-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:800;
  background:linear-gradient(135deg,rgba(52,211,153,.13),rgba(34,211,238,.08));
  border:1px solid rgba(52,211,153,.28);
  color:#6ee7b7;
}
.badge.warn,.tag.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:#fcd34d}
.badge.err,.tag.err{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.3);color:#fda4af}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
thead th{
  text-align:start;font-weight:800;color:var(--ab-mist);
  padding:12px 14px;border-bottom:1px solid var(--ab-line);
  background:rgba(255,255,255,.02);
}
tbody td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--ab-mist-2)}
tbody tr:hover td{background:rgba(139,92,246,.06)}

/* ---------- Modal ---------- */
.modal{background:rgba(3,6,15,.78)!important;backdrop-filter:blur(10px)}
.modal .panel,.modal-panel{
  background:linear-gradient(165deg,rgba(18,22,38,.96),rgba(8,11,22,.98))!important;
  border:1px solid rgba(167,139,250,.24)!important;
  border-radius:26px!important;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05);
  animation:abPop .35s cubic-bezier(.22,1,.36,1);
}
@keyframes abPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.close{background:rgba(255,255,255,.07)!important;border:1px solid var(--ab-line)!important;color:#fff!important}
.close:hover{background:rgba(244,63,94,.2)!important}

/* ---------- Payment option rows ---------- */
.pay{
  display:block;width:100%;
  padding:14px 16px!important;margin:8px 0!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid var(--ab-line)!important;
  border-radius:16px!important;
  color:#fff!important;text-align:start;cursor:pointer;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
}
.pay:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.6)!important;background:rgba(139,92,246,.12)!important;box-shadow:0 16px 40px -18px rgba(139,92,246,.8)}
.pay.primary{border-color:rgba(52,211,153,.45)!important;background:linear-gradient(135deg,rgba(52,211,153,.12),rgba(34,211,238,.06))!important}
.pay-row{display:flex;align-items:center;gap:12px}
.pay-txt b{font-size:14px;font-weight:800}
.pay-txt small{color:var(--ab-mist)}

/* ---------- Prices ---------- */
.price{
  font-size:38px!important;font-weight:900;
  background:linear-gradient(135deg,#fff,#e2e8f0 40%,#a78bfa 80%,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Sidebar / shell ---------- */
.sidebar,.app-sidebar,aside.shell{
  background:rgba(8,11,22,.85)!important;
  border-inline-end:1px solid var(--ab-line)!important;
  backdrop-filter:blur(20px);
}
.topbar,.app-topbar,header.shell{
  background:rgba(5,7,17,.75)!important;
  border-bottom:1px solid var(--ab-line)!important;
  backdrop-filter:blur(18px);
}
.nav-item,.sidebar a{border-radius:12px;transition:background .2s,color .2s}
.nav-item:hover,.sidebar a:hover{background:rgba(139,92,246,.14)}
.nav-item.active,.sidebar a.active{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(34,211,238,.08));color:#fff}

/* ---------- Utilities ---------- */
.ab-gradient-text{
  background:linear-gradient(135deg,#fff 0%,#e2e8f0 30%,#a78bfa 65%,#22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.ab-reveal.ab-show{opacity:1;transform:none}
.ab-divider{height:1px;background:linear-gradient(90deg,transparent,var(--ab-line-2),transparent);margin:28px 0}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .grid{grid-template-columns:1fr!important}
  .price{font-size:32px!important}
  .card,.panel{border-radius:18px!important}
}