/* ===== Apple-like Light Theme (RTL, Liquid Glass) ===== */

/* Tokens */
:root{
  --bg:#ffffff;                /* pure white background */
  --surface:#ffffff;
  --surface-2:#fafafa;
  --border:#e9edf3;
  --text:#0b1220;
  --muted:#667085;

  --primary:#007aff;   /* iOS blue */
  --success:#34c759;
  --warning:#ff9f0a;
  --danger:#ff3b30;

  --radius:16px;

  /* Glass tokens */
  --glass: rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.72);
  --glass-border: 1px solid rgba(0,0,0,.06);
  --glass-edge: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  --glass-shadow: 0 10px 30px rgba(16,24,40,.08), 0 2px 10px rgba(16,24,40,.04);
  --edge-highlight: inset 0 1px 0 rgba(255,255,255,.8);
  --inner-bleed: inset 0 0 0 1px rgba(255,255,255,.35);
  --blur: 16px;
  --sat: 140%;

  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 26px 60px rgba(16,24,40,.14);

  /* Motion tokens */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-xs: .22s;
  --dur-sm: .45s;
  --dur-md: .7s;
  --dur-lg: 1.2s;

  /* Subtle sparkle for glass */
  --spark: radial-gradient(6px 6px at 20% 30%, rgba(255,255,255,.9) 0 35%, transparent 36%),
           radial-gradient(6px 6px at 60% 70%, rgba(255,255,255,.8) 0 35%, transparent 36%),
           radial-gradient(3px 3px at 80% 40%, rgba(255,255,255,.8) 0 45%, transparent 46%),
           radial-gradient(4px 4px at 40% 80%, rgba(255,255,255,.7) 0 45%, transparent 46%);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:clip}
body.root{
  margin:0; direction:rtl; color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Cairo,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
}

/* ===== Ultra-subtle background orbs on white (keeps page clean) ===== */
body.root::before,
body.root::after{
  content:""; position:fixed; inset:-15% -10% -20% -10%; z-index:-2; pointer-events:none;
  filter: blur(28px); will-change:transform;
}
body.root::before{
  background:
    radial-gradient(40% 35% at 85% 10%, rgba(0,122,255,.06) 0, transparent 60%),
    radial-gradient(30% 30% at 10% 90%, rgba(52,199,89,.05) 0, transparent 60%),
    radial-gradient(25% 25% at 30% 10%, rgba(255,159,10,.05) 0, transparent 60%);
  animation: bgDrift var(--dur-lg) ease-in-out infinite alternate;
}
body.root::after{
  /* faint static grid (animation removed to prevent wobble) */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 10px, transparent 11px 22px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.015) 0 10px, transparent 11px 22px);
  mix-blend-mode:multiply; opacity:.25; z-index:-3;
}

/* ===== Reusable: Liquid Glass surface ===== */
.glass{
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  position: relative;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: var(--glass-edge);
  mask: linear-gradient(#000, transparent 50%);
  opacity:.9;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: var(--inner-bleed);
  opacity:.85;
}

/* ===== Topbar (glass) — removed moving underline ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px;
  animation: slideDown .5s var(--ease) both;

  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(var(--sat));
  backdrop-filter: blur(18px) saturate(var(--sat));
  border-bottom: var(--glass-border);
  box-shadow: var(--edge-highlight), 0 6px 20px rgba(16,24,40,.06);
}
/* كان هنا خط أزرق متحرك — أُلغي نهائياً */
/* .topbar::after{ ... } */

.brand-wrap{display:flex;flex-direction:column}
.brand{color:var(--text);font-weight:800;font-size:22px;text-decoration:none;letter-spacing:.1px}
.brand-sub{color:var(--muted);font-size:12px;margin-top:-2px}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{
  color:var(--text);text-decoration:none;
  padding:8px 12px;border-radius:999px;border:1px solid transparent;
  position:relative; transition: transform var(--dur-xs) var(--ease), color .2s, background .2s, border-color .2s;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border: var(--glass-border);
}
.nav a:hover{
  background: rgba(255,255,255,.8);
  transform: translateY(-2px);
  color:#004fcc;
  border-color: rgba(0,0,0,.08);
}
.user{display:flex;align-items:center;gap:8px}
.hello{color:var(--muted)}

/* ===== Layout ===== */
.container{max-width:1180px;margin:24px auto;padding:0 16px; animation: fadeInUp var(--dur-sm) var(--ease) both}
.page-title{font-size:28px;font-weight:800;margin:8px 0 18px; position:relative}
.page-title::after{
  content:""; position:absolute; right:0; bottom:-6px; width:120px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,#007aff, #34c759, #ff9f0a);
  background-size:200% 100%; animation: gradientBar 2.8s ease infinite;
}

/* ===== Buttons (glass primary + shine + halo + ripple) ===== */
.btn{
  display:inline-block;cursor:pointer;text-decoration:none; contain:paint;
  color:#0b1220;font-weight:800;position:relative; overflow:hidden;
  border-radius:14px; padding:10px 16px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;

  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn:hover{filter:brightness(1.02); box-shadow:0 16px 36px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.8)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary,
.btn.primary{
  background: linear-gradient(180deg, rgba(27,156,255,.20), rgba(0,122,255,.28)), rgba(255,255,255,.75);
  color:#003a7a; border-color: rgba(0,122,255,.35);
}
.btn::before{
  content:""; position:absolute; top:-120%; bottom:-120%; width:24%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  transform:skewX(-18deg) translateX(-260%);
  transition: transform .6s var(--ease);
}
.btn:hover::before{ transform:skewX(-18deg) translateX(360%) }
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(0,122,255,.25);
  opacity:0; transition:opacity .22s, box-shadow .22s;
}
.btn:hover::after{ opacity:1; box-shadow:0 0 0 12px rgba(0,122,255,.12) }
.btn:active{
  background-image: radial-gradient(circle at center, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 60%);
  background-size:0% 0%; background-repeat:no-repeat; animation: ripple .5s ease;
}
.btn.ghost{
  background:rgba(255,255,255,.6);color:var(--text);
  border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:9px 14px;
}
.btn.danger{
  background: linear-gradient(180deg, rgba(255,59,48,.16), rgba(255,59,48,.24)), rgba(255,255,255,.75);
  border-color: rgba(255,59,48,.35); color:#6e1111;
}
.btn.success{
  background: linear-gradient(180deg, rgba(52,199,89,.16), rgba(52,199,89,.24)), rgba(255,255,255,.75);
  border-color: rgba(52,199,89,.35); color:#0b4d2a;
}

/* ===== Alerts (glass pop + sparkles) ===== */
.alerts{display:grid;gap:8px;margin-bottom:12px}
.alert{
  position:relative;
  padding:10px 12px;color:var(--text);
  animation: popIn .35s var(--ease) both;

  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border: var(--glass-border);
  border-radius:12px;
  box-shadow: var(--glass-shadow);
}
.alert::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; opacity:.12; pointer-events:none;
  background: var(--spark);
  animation: sparkPulse 2.8s ease-in-out infinite;
}

/* ===== Cards (Liquid Glass + edge glow) ===== */
.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;margin:18px 0;
}
.card-link{display:block;text-decoration:none}
.card.big{
  position:relative;height:170px;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transform-style:preserve-3d;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, filter .18s;
  animation: fadeInUp var(--dur-md) var(--ease) both;

  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.card.big::before{
  content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 2px);
  background:
    conic-gradient(from 0deg, rgba(0,122,255,.16), rgba(52,199,89,.16), rgba(255,159,10,.16), rgba(0,122,255,.16));
  filter: blur(10px); opacity:.0; transition:opacity .25s var(--ease); z-index:-1;
  animation: rotateHue 10s linear infinite;
}
.card.big::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.65;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 40%);
  border-radius:inherit;
  mix-blend-mode:screen;
}
.card.big:hover{
  transform:perspective(900px) rotateX(-4deg) rotateY(4deg) translateY(-10px) scale(1.03);
  box-shadow:var(--shadow-lg);
  filter:saturate(1.05);
}
.card.big:hover::before{ opacity:.9 }

.card-icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(238,242,255,.9), rgba(230,236,255,.7));
  color:#2f54ff;font-size:28px;
  border:1px solid rgba(47,84,255,.18);
  box-shadow:inset 0 1px 0 #fff, 0 8px 20px rgba(2,8,20,.06);
  transition:transform .16s ease;
  animation: floatY 4s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(47,84,255,.18));
}
.card.big:hover .card-icon{transform:translateZ(30px) scale(1.06); animation-play-state:paused}
.card-title{font-weight:800;color:#1f2937}

/* ===== Table (glass head + hover lift) ===== */
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  border-radius:14px;overflow:hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:right}
.table th{
  color:#0f172a;font-weight:800;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  background-image:
    linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  background-size:250% 100%, auto;
  animation: subtleShine 4.5s linear infinite;
}
.table tr:nth-child(2n) td{background:rgba(255,255,255,.5)}
.table tbody tr{
  transition: background .2s, transform .2s, box-shadow .2s;
  position:relative;
}
.table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16,24,40,.06);
}
.table tbody tr:hover td{
  background:rgba(234,242,255,.75) !important;
}
.table tbody tr::before{
  content:""; position:absolute; right:0; top:0; bottom:0; width:0;
  background:linear-gradient(180deg, rgba(0,122,255,.28), rgba(0,122,255,.1));
  transition: width .25s var(--ease);
}
.table tbody tr:hover::before{ width:6px }

/* ===== Forms (glass inputs + focus glow) ===== */
label{display:block;margin-top:10px;margin-bottom:6px;color:#111827;font-weight:800}
input,select,textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7); color:#0f172a; outline:none;
  transition:border .15s, box-shadow .15s, transform .08s, background .15s;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-sm);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,122,255,.45);
  box-shadow:0 0 0 6px rgba(0,122,255,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}
input:required:valid{
  border-color:#34c759; box-shadow:0 0 0 6px rgba(52,199,89,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== Toolbars ===== */
.filters{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;flex-wrap:wrap}

/* ===== Footer ===== */
.footer{color:var(--muted);text-align:center;padding:22px 0;margin-top:28px}

/* ===== Links ===== */
a{color:#0a58ff;text-decoration:none; transition: color .15s, text-shadow .15s}
a:hover{text-decoration:underline; text-shadow:0 6px 20px rgba(10,88,255,.2)}

/* ===== Decorative underline for top nav ===== */
.nav a::after{
  content:""; position:absolute; right:12px; left:12px; bottom:4px; height:3px;
  background: var(--primary);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-xs) var(--ease);
}
.nav a:hover::after{ transform: scaleX(1) }

/* ===== Focus ring ===== */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:10px;
}

/* ===== Utility ===== */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* ===== Keyframes ===== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes slideDown{ from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:translateY(0)} }
@keyframes floatY{ 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
@keyframes subtleShine{ from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes popIn{ 0%{opacity:0; transform:scale(.96) translateY(6px)} 100%{opacity:1; transform:scale(1) translateY(0)} }
@keyframes bgDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-3%,2%,0) scale(1.04)} }
@keyframes gradientBar{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ripple{ 0%{background-size:0% 0%} 100%{background-size:250% 250%} }
@keyframes rotateHue{ 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes sparkPulse{ 0%,100%{opacity:.0; transform:scale(.98)} 50%{opacity:.25; transform:scale(1)} }

/* Reduced motion (optional) */
/*
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}
*/