<link rel="stylesheet" href="<?= BASE_URL ?>assets/css/style.css?v=<?= $cssV ?>">
<link rel="stylesheet" href="<?= BASE_URL ?>assets/css/responsive.css?v=<?= $cssV ?>">

:root{
  --brand:#f19003; --bg:#0f1220; --bg-soft:#181c2e;
  --text:#e7e9f3; --muted:#9aa3b2; --border:rgba(255,255,255,.08);
  --danger:#e74c3c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     background:linear-gradient(135deg,#0e0f16 0%, #121623 60%);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
/* Navbar */
.navbar{position:sticky;top:0;z-index:10;background:linear-gradient(90deg,var(--brand),#fbad3b);color:#181818;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.brand .logo{width:28px;height:28px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 4px var(--bg-soft)}
.nav{display:flex;gap:12px}
.nav a{background:#fff;color:#222;padding:8px 12px;border-radius:10px}
.nav a.cta{background:#181818;color:#fff;border:1px solid #000}
.nav a.danger{background:var(--danger);color:#fff}
/* Cards */
.card{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:16px;margin:12px 0}
.card h3{margin-top:0}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
/* Forms */
input,select,button,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#121729;color:var(--text)}
button,.btn{cursor:pointer;background:var(--brand);color:#181818;font-weight:700;border:none;border-radius:12px;padding:10px 14px}
.form-row{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.form-row .full{grid-column:1/-1}
/* Footer */
.footer{padding:24px;color:var(--muted);text-align:center}

/* ===== Sidebar ===== */
.layout{display:grid;grid-template-columns:260px 1fr;gap:16px}
.sidebar{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:16px;height:100%;position:sticky;top:72px}
.sb-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avatar{width:42px;height:42px;border-radius:12px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:800}
.sb-name{font-weight:700}
.sb-role{font-size:12px;color:var(--muted)}
.sb-menu{display:flex;flex-direction:column;gap:8px}
.sb-menu a{padding:10px 12px;border-radius:12px;background:#121729;border:1px solid var(--border)}
.sb-menu a:hover{transform:translateY(-1px)}
.sb-menu a.danger{background:var(--danger);color:#fff;border:none}
.sb-section{margin:8px 2px 2px;color:var(--muted);font-size:12px}
.content{min-height:50vh}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}
/* ===== Light override for form controls ===== */
input, select, textarea {
  background:#ffffff !important;
  color:#1b1f23 !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
}
input::placeholder, textarea::placeholder { color:#98a2ad !important; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:#1b1f23 !important;
}
/* تخلّص من أي فلّات داكنة قديمة */
.form-row input, .form-row select, .form-row textarea { background:#fff !important; }
:root{ --sidebar-w:300px; } /* عدّل القيمة إذا لزم */
@media (min-width: 992px){
  main, .app-main, .page-content{ padding-inline-end: calc(var(--sidebar-w) + 16px); }
  html[dir="ltr"] main, html[dir="ltr"] .app-main, html[dir="ltr"] .page-content{
    padding-inline-start: calc(var(--sidebar-w) + 16px);
    padding-inline-end: 16px;
  }
}
:root{
  --brand:#f19003;     /* تعديل */
  --brand-700:#cf7a02;
  --danger:#e74c3c;    /* حذف */
  --danger-700:#c0392b;
  --muted:#6b7280;
}

.actions{
  display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; border:1px solid transparent;
  font-weight:700; font-size:14px; line-height:1; cursor:pointer;
  text-decoration:none; transition:.18s transform ease, .18s background ease, .18s border-color ease, .18s box-shadow ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }

.btn-edit{
  background:linear-gradient(90deg,var(--brand),var(--brand-700));
  color:#0b0e19; box-shadow:0 6px 14px rgba(241,144,3,.25);
}
.btn-edit:hover{ filter:brightness(1.02); }

.btn-del{
  background:linear-gradient(90deg,var(--danger),var(--danger-700));
  color:#fff; box-shadow:0 6px 14px rgba(231,76,60,.25);
}
.btn-del:hover{ filter:brightness(1.03); }

.btn-ghost{
  background:#fff; color:#111827; border-color:#e5e7eb;
}
.btn-ghost:hover{ border-color:#cfd3da; }

.actions .icon{ font-size:16px; margin-inline-start:4px; }

/* اجعل الخلية تضبط نفسها في الجداول الضيقة */
td .actions{ min-width: 160px; }
/* أزرار أوضح + ألوان ثابتة */
.header-actions .btn,
.header-actions a.btn,
.header-actions button.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  border-radius:10px;
  background:#ffffff;              /* خلفية فاتحة لتباين قوي */
  color:#1b1f23 !important;        /* نص داكن على خلفية فاتحة */
  text-decoration:none;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .05s ease, background .2s ease, border-color .2s ease;
}

.header-actions .btn:hover{
  background:#fff7ec;              /* تلميح برتقالي خفيف */
  border-color:#f19003;
}

.header-actions .btn:active{ transform:translateY(1px); }

.header-actions .btn.primary{
  background:#f19003 !important;   /* البرتقالي الأساسي */
  border-color:#f19003 !important;
  color:#ffffff !important;         /* نص أبيض واضح */
}
.header-actions .btn.primary:hover{ filter:brightness(.96); }

/* أي أيقونة داخل الزر تكون مرئية */
.header-actions .btn svg{
  width:18px; height:18px;
  stroke:currentColor; fill:none;
}

/* زر الأيقونة الصغير إن وُجد بجانبها */
.header-actions .iconbtn{
  background:#ffffff;
  color:#1b1f23;
  border-color:var(--border, rgba(255,255,255,.12));
}
.header-actions .iconbtn:hover{
  border-color:#f19003; color:#f19003; background:#fff7ec;
}

/* تحسين الوصولية */
.header-actions .btn:focus-visible,
.header-actions .iconbtn:focus-visible{
  outline:2px solid #f19003; outline-offset:2px;
}

/* وضع داكن قوي الخلفية: تأكد أن الروابط داخل الهيدر لا تورث لون غامق غير مرئي */
.header-actions a.btn{ color:#1b1f23 !important; }

/* في الشاشات الصغيرة، اسمح بتفاف الزرار بدون اختفاء */
@media (max-width: 600px){
  .header-actions{ gap:6px; }
  .header-actions .btn{ padding:7px 10px; font-size:14px; }
}
/* ===== تحسين مظهر الترقيم (Pager) ===== */
.pager{ 
  margin-top:12px; display:flex; gap:8px; align-items:center; justify-content:flex-end;
}

.pager a.btn,
.pager span.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--border, rgba(0,0,0,.12));
  border-radius:12px;
  background:var(--card, #fff);     /* خلفية فاتحة واضحة */
  color:var(--text, #1b1f23) !important; /* نص داكن */
  font-weight:700; font-size:14px; line-height:1;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:background .2s,border-color .2s,transform .05s;
}

.pager a.btn:hover{
  background:#fff7ec;               /* تلميح برتقالي خفيف */
  border-color:#f19003;
}

.pager .active{
  background:#f19003 !important;    /* الحالي بالبرتقالي */
  border-color:#f19003 !important;
  color:#fff !important;
}

.pager .btn[disabled],
.pager span.btn[disabled]{
  opacity:.45; cursor:not-allowed;
}

/* رموز « » */
.pager a.btn[title], .pager span.btn{
  font-weight:800;
}

/* وضع داكن — التباين يبقى قوي */
@media (prefers-color-scheme: dark){
  .pager a.btn, .pager span.btn{
    background:#1b2130; color:#e7e9f3 !important; border-color:rgba(255,255,255,.12);
  }
  .pager a.btn:hover{ background:#232a3b; }
}