:root {
  --brand: #7c4dff;
  --brand-dark: #4c2889;
  --brand-light: #f3edff;
  --brand-accent: #ff7aa8;
  --brand-gold: #f5a623;
  --bg: #f6f5fb;
  --danger-soft: #fdecea;
  --warn-soft: #fff6e0;
  --ok-soft: #e9f7ef;
}

* { font-family: 'Cairo', 'Segoe UI', sans-serif; }
body { background: var(--bg); }

/* ---------- تسجيل الدخول ---------- */
.login-screen { min-height: 100vh; display: flex; }
.login-form-panel {
  flex: 0 0 440px; max-width: 100%; display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 24px;
}
.login-card { width: 100%; max-width: 380px; }
.login-logo {
  width: 108px; height: 108px; border-radius: 24px; background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 52px; margin: 0 auto 16px;
  overflow: hidden;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; }

/* اللوحة الجانبية الكبيرة - بتعرض صورة الدعاية اللي بترفعها من الإعدادات، أو شكل افتراضي لحد ما ترفع صورة */
.login-ad-panel {
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
/* لما تكون فيه صورة دعاية مرفوعة فعلاً، خلي خلفية اللوحة بيضاء بدل التدرج الأخضر، عشان أي فراغ حوالين الصورة (لو نسبتها مختلفة عن اللوحة) يندمج بهدوء بدل ما يبان كخط لون غريب */
.login-ad-panel.has-ad-image { background: #fff; }
.login-ad-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.login-ad-placeholder { color: rgba(255,255,255,.35); font-size: 64px; }
@media (max-width: 900px) {
  .login-ad-panel { display: none; }
  .login-form-panel { flex: 1 1 auto; }
}

/* رابط واتساب تحت رابط "تسجيل حساب جديد" بشاشة الدخول - يظهر بس لو مدير المنصة فعّله وحط رقم */
.login-whatsapp-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #25d366; font-weight: 700; font-size: 13px; text-decoration: none;
}
.login-whatsapp-link:hover { color: #1da851; text-decoration: underline; }
.login-whatsapp-link i { font-size: 16px; }

/* معاينة الشعار وصورة الدعاية في شاشة الإعدادات */
.logo-preview {
  width: 64px; height: 64px; border-radius: 12px; background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; flex-shrink: 0;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.login-ad-preview {
  width: 100%; height: 120px; border-radius: 12px; background: var(--bg); border: 1px dashed #cfd8d5;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.login-ad-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- الهيكل العام ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; background: var(--brand-dark); color: #fff; flex-shrink: 0;
  position: fixed; top: 0; bottom: 0; right: 0; overflow-y: auto; z-index: 1030;
  transition: transform .25s ease;
  /* مخفي افتراضيًا على كل أحجام الشاشات - بيتفتح كـ"درج" منزلق بزرار القائمة (☰) في الأعلى */
  transform: translateX(100%);
}
.sidebar.open { transform: translateX(0); }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 20px 18px; font-weight: 800; font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-brand i { font-size: 24px; color: #ffce6b; }
.sidebar-brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; background: #fff; }
.sidebar-nav { padding: 12px 10px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); text-decoration: none;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 4px; font-size: 15px; font-weight: 500;
}
.sidebar-nav a i { font-size: 18px; width: 22px; text-align: center; }
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a.active { background: #ffce6b; color: var(--brand-dark); font-weight: 700; }

/* أزرار المجموعات القابلة للفتح (شئون الطفل / شئون العاملين / الحسابات) */
.sidebar-nav .nav-group-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  background: none; border: none; color: rgba(255,255,255,.85);
  padding: 11px 14px; border-radius: 10px; margin-bottom: 4px; font-size: 15px; font-weight: 500;
}
.sidebar-nav .nav-group-btn .nav-icon { font-size: 18px; width: 22px; text-align: center; }
.sidebar-nav .nav-group-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav .nav-group-btn.has-active { background: rgba(255,206,107,.14); color: #ffce6b; }
.sidebar-nav .nav-group-btn .chevron { margin-left: auto; font-size: 12px; transition: transform .2s ease; }
.sidebar-nav .nav-group-btn[aria-expanded="true"] .chevron { transform: rotate(-90deg); }
.sidebar-nav .nav-submenu { padding-right: 12px; }
.sidebar-nav .nav-submenu a { padding: 9px 14px 9px 14px; font-size: 14px; font-weight: 400; }
.sidebar-nav .nav-submenu a i { font-size: 15px; }

/* عنصر "الباقات الشهرية" - مميز عن باقي عناصر القائمة عشان العميل يلاحظه بسهولة */
.sidebar-nav a.nav-link-special {
  margin-top: 10px;
  background: linear-gradient(135deg, #ffce6b 0%, #f5a623 100%);
  color: var(--brand-dark); font-weight: 800;
  box-shadow: 0 2px 10px rgba(245,166,35,.35);
}
.sidebar-nav a.nav-link-special:hover { color: var(--brand-dark); filter: brightness(1.05); }
.sidebar-nav a.nav-link-special.active { background: linear-gradient(135deg, #ffce6b 0%, #f5a623 100%); }
.sidebar-nav a.nav-link-special .nav-special-badge {
  margin-inline-start: auto; background: var(--brand-dark); color: #ffce6b; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* شريط الإعلانات المتحرك - يتحكم فيه مدير المنصة، يتحرك من الشمال إلى اليمين */
.announcement-bar {
  background: linear-gradient(90deg, #c62839, #e6394d);
  color: #fff; overflow: hidden; white-space: nowrap;
  padding: 7px 0; font-size: 14px; font-weight: 600;
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  box-shadow: 0 2px 10px rgba(198,40,57,.35);
}
body.has-announcement .login-screen,
body.has-announcement .app-shell { margin-top: 34px; }
body.has-announcement .sidebar { top: 34px; }
.announcement-bar .announcement-track {
  display: inline-block; white-space: nowrap;
  animation: announcementMarquee 18s linear infinite;
}
.announcement-bar .announcement-track i { margin: 0 8px; }
/* من الشمال إلى اليمين: النص بيبدأ خارج الشاشة من اليسار وبيتحرك لحد ما يخرج من اليمين */
@keyframes announcementMarquee {
  from { transform: translateX(-100vw); }
  to { transform: translateX(100vw); }
}

.main-area { margin-right: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff;
  border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 1020;
}
.content { padding: 20px; flex: 1; }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1025;
}


/* ---------- عناصر عامة ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-title { font-size: 22px; font-weight: 800; color: var(--brand-dark); margin: 0; }
.card-soft { background: #fff; border: 1px solid #e9ecef; border-radius: 14px; }
.stat-card { background: #fff; border-radius: 12px; padding: 12px 14px; border: 1px solid #e9ecef; }
.stat-card .stat-value { font-size: 19px; font-weight: 800; color: var(--brand-dark); }
.stat-card .stat-label { color: #6c757d; font-size: 12px; }
.stat-card i { font-size: 17px; }

/* كروت الوصول السريع في لوحة التحكم - اختصارات لكل شاشة بشكل بصري واضح، من غير كارت/إطار حوالين كل عنصر */
.quick-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 8px 4px; text-decoration: none; color: inherit; height: 100%; transition: transform .15s ease; cursor: pointer;
}
.quick-card:hover { transform: translateY(-3px); color: inherit; }
.quick-card-icon {
  width: 132px; height: 132px; border-radius: 32px; display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s ease; position: relative;
}
.quick-card:hover .quick-card-icon { box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.quick-card-emoji { font-size: 64px; line-height: 1; }
.quick-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }
.quick-card-label { font-size: 14.5px; font-weight: 700; color: #3a3550; line-height: 1.3; }

/* بادچ صغير بيظهر على غلاف المجموعة يوضح عدد الشاشات اللي جواها (زي عداد التطبيقات جوه مجلد على الموبايل) */
.quick-card-count {
  position: absolute; top: -6px; left: -6px; background: var(--brand-dark); color: #fff;
  font-size: 14px; font-weight: 800; min-width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid #fff;
}
/* على شاشات الموبايل الضيقة بيكون فيه 3 كروت في الصف - بنصغّر الحجم شوية عشان محدش يتزنق أو يفيض بره الشاشة */
@media (max-width: 480px) {
  .quick-card-icon { width: 88px; height: 88px; border-radius: 24px; }
  .quick-card-emoji { font-size: 42px; }
  .quick-card-img { border-radius: 24px; }
}

/* كروت أيام الأسبوع القابلة للاختيار - مستخدمة في UI.openForm (نوع الحقل 'weekdays') زي شاشة الأنشطة */
.weekday-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.weekday-chip {
  border: 1px solid #ddd; background: #fff; color: #555; border-radius: 10px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s;
}
.weekday-chip:hover { border-color: var(--brand); }
.weekday-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.badge-status-paid { background: var(--ok-soft); color: #1e7e42; }
.badge-status-due_soon { background: var(--warn-soft); color: #a06c00; }
.badge-status-overdue { background: var(--danger-soft); color: #c0392b; }
.badge-status-upcoming { background: #eef1f4; color: #555; }
.badge-status-present { background: var(--ok-soft); color: #1e7e42; }
.badge-status-absent { background: var(--danger-soft); color: #c0392b; }
.badge-status-paused { background: #eef1f4; color: #555; }
.badge-status-active { background: var(--ok-soft); color: #1e7e42; }
.badge-status-inactive { background: #eef1f4; color: #555; }
.badge-status-withdrawn { background: var(--danger-soft); color: #c0392b; }
.badge-status-pending { background: var(--warn-soft); color: #a06c00; }
.badge-status-approved { background: var(--ok-soft); color: #1e7e42; }
.badge-status-rejected { background: var(--danger-soft); color: #c0392b; }

.condition-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.condition-chip { border: 1px solid #ddd; background: #fff; color: #555; border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s; }
.condition-chip:hover { border-color: var(--brand); }
.condition-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.table thead th { background: var(--brand-light); color: var(--brand-dark); font-weight: 700; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }

.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.text-brand { color: var(--brand); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--brand); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
a { color: var(--brand); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }

.toast-host { position: fixed; top: 16px; left: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.app-toast { min-width: 260px; background: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.15); border-inline-start: 4px solid var(--brand); font-weight: 600; }
.app-toast.error { border-inline-start-color: #dc3545; }

.qr-scan-box { max-width: 420px; margin: 0 auto; }

/* ---------- كروت الباقات الشهرية - شكل شيك ومميز ---------- */
.plan-card {
  border: 1px solid #ece5fb !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(76,40,137,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.plan-card::before {
  content: ""; display: block; height: 6px; margin: -1.5rem -1.5rem 1.25rem;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(76,40,137,.16); }
.plan-card.plan-card-current {
  border-color: #b7e4c7 !important;
  box-shadow: 0 6px 20px rgba(30,126,66,.12);
}
.plan-card.plan-card-current::before { background: linear-gradient(90deg, #1e7e42 0%, #34c77b 100%); }
.plan-card .plan-name { font-size: 18px; }
.plan-card .plan-price {
  font-size: 30px; font-weight: 900;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-card .btn-primary {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
  border: none; font-weight: 700; padding: 10px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(124,77,255,.3);
}
.plan-card .btn-primary:hover { filter: brightness(1.06); }
.plan-current-badge {
  background: linear-gradient(90deg, #1e7e42, #34c77b) !important;
}

/* ---------- الطباعة ---------- */
@media print {
  .no-print, .sidebar, .topbar, .sidebar-backdrop { display: none !important; }
  .main-area { margin-right: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; }
  .card-soft { border: none !important; }
  a[href]:after { content: "" !important; }
}
.print-header { display: none; }
@media print {
  .print-header { display: block; text-align: center; margin-bottom: 16px; }
  .print-header h3 { font-weight: 800; margin-bottom: 2px; }
}