/* ═══════════════════════════════════════════════════════
   ثيم إكسل ميرجر — نفس ألوان التطبيق الأصلي
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

:root{
  /* ألوان الخلفيات */
  --bg:#0f1419;
  --sur:#1a1f26;
  --s2:#232930;
  --s3:#2a3038;

  /* حدود */
  --bd:#2d343c;
  --b2:#3a424b;
  --b3:#4a525c;

  /* نصوص */
  --tx:#e8ecf0;
  --t2:#9aa4b0;
  --t3:#6b7580;

  /* ألوان رئيسية */
  --ac:#4f7ef8;   /* أزرق */
  --tl:#1abc9c;   /* فيروزي */
  --gn:#2ecc71;   /* أخضر */
  --rd:#e74c3c;   /* أحمر */
  --gd:#f5c842;   /* ذهبي */
  --pu:#9b59b6;   /* بنفسجي */
  --wn:#f39c12;   /* برتقالي تحذير */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--tx);
  direction:rtl;
  line-height:1.6;
  font-size:13px;
  min-height:100vh;
}

a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}

/* ═══ صناديق ═══ */
.card{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:22px;
}

/* ═══ نماذج ═══ */
.field{margin-bottom:14px}
label{
  display:block;
  font-size:11px;
  color:var(--t2);
  margin-bottom:5px;
  font-weight:700;
}
.inp,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],select,textarea{
  width:100%;
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:7px;
  padding:10px 12px;
  color:var(--tx);
  font-family:'Cairo',sans-serif;
  font-size:13px;
  direction:rtl;
}
.inp:focus,input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ac);
  box-shadow:0 0 0 3px rgba(79,126,248,.15);
}
.hint{font-size:10px;color:var(--t3);margin-top:4px;line-height:1.5}

/* ═══ أزرار ═══ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--ac);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  font-family:'Cairo',sans-serif;
  font-size:13px;
  transition:all .15s;
  text-decoration:none;
}
.btn:hover{opacity:.9;text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.btn-sm{padding:6px 11px;font-size:11px}
.btn-lg{padding:13px 22px;font-size:14px}

.btn-tl{background:var(--tl)}
.btn-gn{background:var(--gn)}
.btn-rd{background:var(--rd)}
.btn-gd{background:var(--gd);color:#000}
.btn-pu{background:var(--pu)}
.btn-ou{background:transparent;border:1px solid var(--b2);color:var(--tx)}
.btn-ou:hover{border-color:var(--ac);color:var(--ac)}

/* ═══ رسائل فلاش ═══ */
.flash{
  padding:10px 13px;
  border-radius:8px;
  margin-bottom:12px;
  font-size:12px;
  border:1px solid;
}
.flash-ok{background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.4);color:#2ecc71}
.flash-err{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.4);color:#e74c3c}
.flash-inf{background:rgba(79,126,248,.1);border-color:rgba(79,126,248,.4);color:#4f7ef8}
.flash-warn{background:rgba(243,156,18,.1);border-color:rgba(243,156,18,.4);color:#f39c12}

/* ═══ Navbar ═══ */
.topbar{
  background:var(--sur);
  border-bottom:1px solid var(--bd);
  padding:11px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  position:sticky;
  top:0;
  z-index:40;
}
.topbar .logo{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:900;color:var(--tx);
}
.topbar .logo-ico{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--ac),var(--tl));
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.topbar .spacer{flex:1}
.topbar .nav-item{
  font-size:12px;color:var(--t2);
  padding:6px 11px;border-radius:6px;
}
.topbar .nav-item:hover{background:var(--s2);color:var(--tx);text-decoration:none}
.topbar .nav-item.active{background:var(--s2);color:var(--ac)}
.topbar .user-menu{
  display:flex;align-items:center;gap:7px;
  background:var(--s2);padding:5px 11px;border-radius:20px;
  font-size:11px;
}
.topbar .user-menu .avatar{
  width:24px;height:24px;
  background:var(--ac);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}

/* ═══ صفحات المصادقة (دخول/تسجيل) ═══ */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(79,126,248,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(26,188,156,.08) 0%, transparent 50%),
    var(--bg);
}
.auth-box{
  max-width:420px;
  width:100%;
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:30px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.auth-logo{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:20px;
}
.auth-logo-ico{
  width:52px;height:52px;
  background:linear-gradient(135deg,var(--ac),var(--tl));
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  box-shadow:0 4px 20px rgba(79,126,248,.3);
}
.auth-logo h1{
  font-size:22px;
  font-weight:900;
  color:var(--tx);
}
.auth-sub{
  text-align:center;
  color:var(--t2);
  font-size:12px;
  margin-bottom:22px;
}
.auth-footer{
  text-align:center;
  margin-top:18px;
  font-size:12px;
  color:var(--t2);
  padding-top:15px;
  border-top:1px solid var(--bd);
}

/* ═══ صفحات الأدمن ═══ */
.admin-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100vh;
}
.admin-sidebar{
  background:var(--sur);
  border-left:1px solid var(--bd);
  padding:18px 0;
}
.admin-sidebar .brand{
  padding:0 20px 20px;
  border-bottom:1px solid var(--bd);
  margin-bottom:10px;
}
.admin-sidebar .brand-title{
  font-size:13px;font-weight:900;
  display:flex;align-items:center;gap:8px;
}
.admin-sidebar .brand-sub{
  font-size:10px;color:var(--t3);margin-top:2px;
}
.admin-sidebar .menu-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;
  color:var(--t2);
  font-size:12px;
  border-right:3px solid transparent;
  transition:all .15s;
}
.admin-sidebar .menu-item:hover{
  background:var(--s2);color:var(--tx);
  text-decoration:none;
}
.admin-sidebar .menu-item.active{
  background:var(--s2);
  color:var(--ac);
  border-right-color:var(--ac);
}
.admin-sidebar .menu-ico{font-size:15px}
.admin-sidebar .badge{
  background:var(--rd);
  color:#fff;
  font-size:9px;
  padding:1px 6px;
  border-radius:10px;
  margin-right:auto;
  font-weight:700;
}

.admin-main{
  padding:22px 28px;
  overflow-x:auto;
}
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid var(--bd);
  flex-wrap:wrap;gap:10px;
}
.admin-header h1{font-size:19px;font-weight:700}
.admin-header .sub{font-size:11px;color:var(--t2);margin-top:3px}

/* ═══ جداول ═══ */
.table-wrap{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:10px;
  overflow:hidden;
}
table.data{width:100%;border-collapse:collapse;font-size:12px}
table.data thead th{
  background:var(--s2);
  padding:10px 12px;
  text-align:right;
  font-weight:700;
  color:var(--t2);
  font-size:11px;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}
table.data tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--bd);
  vertical-align:middle;
}
table.data tbody tr:hover td{background:rgba(79,126,248,.04)}
table.data tbody tr:last-child td{border-bottom:none}

/* ═══ شارات ═══ */
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.badge-active{background:rgba(46,204,113,.15);color:var(--gn);border:1px solid rgba(46,204,113,.4)}
.badge-trial{background:rgba(79,126,248,.15);color:var(--ac);border:1px solid rgba(79,126,248,.4)}
.badge-expired{background:rgba(231,76,60,.15);color:var(--rd);border:1px solid rgba(231,76,60,.4)}
.badge-frozen{background:rgba(107,117,128,.15);color:var(--t2);border:1px solid var(--b2)}
.badge-pending{background:rgba(245,200,66,.15);color:var(--gd);border:1px solid rgba(245,200,66,.4)}
.badge-approved{background:rgba(46,204,113,.15);color:var(--gn);border:1px solid rgba(46,204,113,.4)}
.badge-rejected{background:rgba(231,76,60,.15);color:var(--rd);border:1px solid rgba(231,76,60,.4)}

/* ═══ كروت الإحصائيات ═══ */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.stat-card{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:16px;
  border-right:3px solid var(--ac);
}
.stat-card.tl{border-right-color:var(--tl)}
.stat-card.gn{border-right-color:var(--gn)}
.stat-card.gd{border-right-color:var(--gd)}
.stat-card.pu{border-right-color:var(--pu)}
.stat-card.rd{border-right-color:var(--rd)}
.stat-card .v{font-size:24px;font-weight:900;line-height:1}
.stat-card .l{font-size:11px;color:var(--t2);margin-top:5px}

/* ═══ الصفحة الرئيسية (landing) ═══ */
.landing{
  max-width:900px;
  margin:0 auto;
  padding:40px 20px;
}
.hero{
  text-align:center;
  padding:40px 0;
}
.hero h1{
  font-size:38px;
  font-weight:900;
  margin-bottom:14px;
  background:linear-gradient(135deg,var(--ac),var(--tl));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{font-size:15px;color:var(--t2);max-width:560px;margin:0 auto 26px}
.hero .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin:30px 0;
}
.feat{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:20px;
}
.feat-ico{font-size:28px;margin-bottom:8px}
.feat h3{font-size:14px;margin-bottom:6px}
.feat p{font-size:11px;color:var(--t2);line-height:1.6}

/* ═══ صفحة الاشتراك ═══ */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:20px 0;
}
.plan-card{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:all .2s;
}
.plan-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.plan-card.featured{border-color:var(--tl);box-shadow:0 0 0 2px rgba(26,188,156,.2)}
.plan-card.featured::before{
  content:'⭐ الأكثر توفيراً';
  position:absolute;top:-11px;right:14px;
  background:var(--tl);color:#fff;
  padding:3px 10px;border-radius:12px;
  font-size:9px;font-weight:700;
}
.plan-name{font-size:16px;font-weight:900;margin-bottom:8px}
.plan-price{font-size:32px;font-weight:900;color:var(--ac);line-height:1}
.plan-price .cur{font-size:13px;color:var(--t2);margin-right:4px}
.plan-duration{font-size:11px;color:var(--t2);margin-top:5px}
.plan-desc{font-size:12px;color:var(--t2);margin:14px 0;flex:1;line-height:1.7}
.plan-btn{margin-top:auto}

/* ═══ Modal ═══ */
.modal-bg{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  z-index:500;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-bg.open{display:flex}
.modal{
  background:var(--sur);
  border:1px solid var(--b2);
  border-radius:14px;
  padding:25px;
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
}
.modal h2{font-size:17px;margin-bottom:15px}
.modal-actions{display:flex;gap:8px;margin-top:18px}

/* ═══ Utility ═══ */
.text-center{text-align:center}
.text-muted{color:var(--t2)}
.mb-2{margin-bottom:10px}
.mb-3{margin-bottom:15px}
.mt-3{margin-top:15px}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-2{gap:10px}

/* ═══ Responsive ═══ */
@media(max-width:768px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:sticky;top:0;z-index:30}
  .hero h1{font-size:28px}
  .topbar{padding:10px 12px;flex-wrap:wrap}
  .topbar .nav-item{font-size:11px;padding:5px 8px}
}