/* static/css/site.css */
/* هوية بصرية موحّدة للموقع (المعقب)
   ألوان أساسية: أزرق #1E3A5F، أخضر #2E7D32، عنابي #8B1E3F، أبيض #FFFFFF، رمادي فاتح #F5F5F5
   يدعم الوضعين: نهاري/ليلي عبر html[data-theme="dark"]
*/

/* =========================
   المتغيرات (نهاري افتراضي)
   ========================= */
:root{
  --blue:#1E3A5F;      /* أزرق داكن */
  --green:#2E7D32;     /* أخضر أكاديمي */
  --white:#FFFFFF;
  --maroon:#8B1E3F;    /* عنابي */
  --gray:#F5F5F5;      /* رمادي فاتح */

  --bg:var(--gray);
  --card:#fff;
  --text:#222;
  --muted:#6b7280;
  --border:#e6e6e6;
  --shadow:0 8px 24px rgba(0,0,0,.06);

  --radius:14px;
  --radius-sm:10px;
  --gap:12px;
  --container:1100px;
  --transition: .18s ease;
}

/* ==============
   الوضع الليلي
   ============== */
html[data-theme="dark"]{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#334155;
  --shadow:0 8px 24px rgba(0,0,0,.25);

  /* تباينات يسيرة للعلامات */
  --blue:#93c5fd;
  --green:#86efac;
  --maroon:#fca5a5;
}

/* =========
   الأساسيات
   ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo','Tajawal','Poppins','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background var(--transition), color var(--transition);
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* =========
   حاويات
   ========= */
.container{max-width:var(--container);margin:18px auto;padding:0 16px}
.grid{display:grid;gap:var(--gap)}
.hidden{display:none}
.spacer{flex:1}

/* ========
   بطاقات
   ======== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* =========
   أزرار
   ========= */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#eee;
  color:#111;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  transition:filter var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover{filter:brightness(.97)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(.96)}

.btn-secondary{background:var(--green);border-color:var(--green);color:#fff}
.btn-secondary:hover{filter:brightness(.96)}

.btn-danger{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-danger:hover{filter:brightness(.96)}

/* =========
   حقول إدخال
   ========= */
.input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,58,95,.15);
}

/* =========
   شارات/حالات
   ========= */
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:#eef2ff;
  color:#3730a3;
}
.status-submitted{background:#e0f2fe;color:#075985}
.status-available,.status-awaiting_payment{background:#ecfccb;color:#365314}
.status-paid{background:#fef9c3;color:#92400e}
.status-approved{background:#dcfce7;color:#166534}
.status-unavailable,.status-rejected{background:#fee2e2;color:#991b1b}

/* =========
   رسائل/محادثة
   ========= */
.messages-box{
  max-height:260px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px;
  background:var(--card);
}
.bubble{
  max-width:80%;
  padding:8px 10px;
  border-radius:12px;
  margin:6px 0;
  line-height:1.6;
}
.bubble-user{background:#f5f5f5;color:#111}
.bubble-admin{background:#e6f4ff;color:#111}
html[data-theme="dark"] .bubble-user{background:#1f2937;color:#e5e7eb}
html[data-theme="dark"] .bubble-admin{background:#0ea5e9; color:#0b1220}

/* =========
   شبكة البرامج
   ========= */
.programs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1400px){.programs-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){.programs-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.programs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.programs-grid{grid-template-columns:1fr}}

/* =========
   ترويسة/تنقل
   ========= */
.topbar{background:#1E3A5F;color:#fff}
.nav{background:var(--card);border-bottom:1px solid var(--border);display:flex;gap:12px}

/* =========
   عناوين/نصوص مساعدة
   ========= */
h1,h2,h3{margin:0 0 8px 0}
.muted{color:var(--muted);font-size:13px}

/* =======
   المودال
   ======= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-card{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  min-width:320px;
  max-width:520px;
  box-shadow:var(--shadow);
}

/* =========
   جدول بسيط (للإعدادات)
   ========= */
.adminlist{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
.adminlist th, .adminlist td{padding:10px 12px;border-bottom:1px solid var(--border)}
.adminlist thead th{background:#f8fafc;color:#0f172a;text-align:right}
html[data-theme="dark"] .adminlist thead th{background:#0b1220;color:#e5e7eb}
.adminlist tbody tr:hover{background:rgba(0,0,0,.03)}
html[data-theme="dark"] .adminlist tbody tr:hover{background:rgba(255,255,255,.04)}


/* --- News Ticker --- */
/* --- News Ticker (continuous, right-to-left visual, scrolling to the RIGHT) --- */

.news-ticker{
  position:relative;
  background:#0f172a;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  height:38px;
}
.news-ticker .ticker-viewport{
  width:100%;
  overflow:hidden;
}
.news-ticker .ticker-track{
  display:inline-flex;
  align-items:center;
  gap:32px;
  white-space:nowrap;
  padding:8px 16px;
  will-change:transform;
  /* يمين بشكل متصل */
  animation: ticker-right var(--ticker-speed, 28s) linear infinite;
}
.news-ticker .ticker-item{
  opacity:.95;
  font-size:14px;
}
.news-ticker:hover .ticker-track{
  animation-play-state: paused;
}
@keyframes ticker-right{
  0%   { transform: translateX(0); }      /* يبدأ ظاهر فوراً */
  100% { transform: translateX(50%); }    /* يتحرّك يميناً نصف العرض ثم يعيد نفسه بلا قفزة */
}

@media (prefers-reduced-motion: reduce){
  .news-ticker .ticker-track{ animation: none; }
}