/* ============================================================
   Supply Hub — Admin Theme (Indigo / Professional) — ADR-0011
   لا Vite. Bootstrap + هذا الملف. هوية سهلة التغيير عبر المتغيّرات.
   ============================================================ */

/* ---------- الخط: Cairo (محلي) ---------- */
@font-face { font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/cairo/latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/cairo/arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/cairo/latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/cairo/arabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/cairo/latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/cairo/arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/cairo/latin-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/cairo/arabic-800.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }

/* ---------- المتغيّرات (الهوية) ---------- */
:root {
  /* الإنديغو — غيّر هذه القيم لتغيّر الهوية كلها */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;
  --brand-950: #1e1b4b;

  --sidebar-w: 264px;
  --topbar-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;

  --ink: #0f172a;
  --muted: #64748b;
  --line: #e8ecf3;
  --surface: #ffffff;
  --bg: #f4f6fb;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow: 0 4px 16px rgba(31,41,72,.08);
  --shadow-lg: 0 12px 34px rgba(31,41,72,.14);

  /* مزامنة مع Bootstrap (primary = الإنديغو) */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 79,70,229;
  --bs-link-color: var(--brand-600);
  --bs-link-color-rgb: 79,70,229;
  --bs-link-hover-color: var(--brand-700);
  --bs-border-radius: var(--radius-sm);
  --bs-body-font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
}

* { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- التخطيط ---------- */
.admin-wrapper { display:flex; min-height:100vh; }

/* ---------- Sidebar (داكن إنديغو) ---------- */
.admin-sidebar {
  width: var(--sidebar-w); flex-shrink:0;
  background: linear-gradient(185deg, var(--brand-950) 0%, var(--brand-900) 60%, #211c5e 100%);
  color: #c7d2fe;
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start; height:100vh;
}
.admin-brand {
  display:flex; align-items:center; gap:.7rem;
  padding:1.15rem 1.35rem; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.admin-brand .logo-mark {
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand-400), var(--brand-600));
  border-radius:11px; box-shadow:0 6px 16px rgba(79,70,229,.5);
}
.admin-brand .logo-mark svg { width:22px; height:22px; }
.admin-brand .brand-text { line-height:1.1; }
.admin-brand .brand-text b { font-weight:800; font-size:1.06rem; letter-spacing:.2px; display:block; }
.admin-brand .brand-text small { color:var(--brand-300); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; }

.admin-nav { padding:1rem .75rem; overflow-y:auto; flex:1; }
.admin-nav .nav-section {
  color:var(--brand-400); font-size:.68rem; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; padding:.6rem .85rem .35rem; opacity:.8;
}
.admin-nav .nav-link {
  display:flex; align-items:center; gap:.75rem;
  color:#c7d2fe; padding:.62rem .85rem; margin-bottom:.15rem;
  border-radius:10px; font-weight:600; font-size:.92rem;
  transition:background .15s, color .15s, transform .15s;
  position:relative;
}
.admin-nav .nav-link i { width:20px; text-align:center; font-size:1rem; color:var(--brand-300); transition:color .15s; }
.admin-nav .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.admin-nav .nav-link:hover i { color:#fff; }
.admin-nav .nav-link.active {
  background:linear-gradient(90deg, var(--brand-600), var(--brand-500));
  color:#fff; box-shadow:0 8px 20px rgba(79,70,229,.45);
}
.admin-nav .nav-link.active i { color:#fff; }

.admin-sidebar-foot { padding:.85rem 1rem; border-top:1px solid rgba(255,255,255,.07); }

/* ---------- Main / Topbar ---------- */
.admin-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-topbar {
  height:var(--topbar-h); background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; padding:0 1.4rem;
  position:sticky; top:0; z-index:1020; box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.admin-page-title { font-size:1.12rem; margin:0; font-weight:700; }
.topbar-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--brand-50); color:var(--brand-700);
  border-radius:999px; padding:.3rem .7rem; font-size:.78rem; font-weight:700;
}
.user-chip {
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.3rem .55rem; border-radius:999px; transition:background .15s;
}
.user-chip:hover { background:var(--brand-50); }
.user-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem;
  box-shadow:0 4px 10px rgba(79,70,229,.35);
}

.admin-content { padding:1.6rem; flex:1; }
.admin-content > * { animation: fadeUp .35s ease both; }

@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- البطاقات ---------- */
.card {
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); background:var(--surface);
}
.card .card-header {
  background:transparent; border-bottom:1px solid var(--line);
  padding:1rem 1.25rem; font-weight:700;
}
.card .card-header i { color:var(--brand-600); }

/* بطاقة إحصائية */
.stat-card { position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat-card .stat-icon {
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  font-size:1.4rem; color:#fff;
}
.stat-card .stat-value { font-size:1.9rem; font-weight:800; line-height:1; color:var(--ink); }
.stat-card .stat-label { color:var(--muted); font-size:.85rem; font-weight:600; }
.stat-card .stat-deco {
  position:absolute; inset-inline-end:-18px; top:-18px; width:90px; height:90px;
  border-radius:50%; opacity:.08;
}
.grad-indigo { background:linear-gradient(135deg,#6366f1,#4338ca); }
.grad-emerald{ background:linear-gradient(135deg,#34d399,#059669); }
.grad-amber  { background:linear-gradient(135deg,#fbbf24,#d97706); }
.grad-sky    { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.grad-rose   { background:linear-gradient(135deg,#fb7185,#e11d48); }

/* ---------- الأزرار ---------- */
.btn { font-weight:600; border-radius:var(--radius-sm); }
.btn-primary {
  background:linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border:none; box-shadow:0 6px 16px rgba(79,70,229,.35);
}
.btn-primary:hover, .btn-primary:focus {
  background:linear-gradient(135deg, var(--brand-600), var(--brand-800));
  box-shadow:0 8px 20px rgba(79,70,229,.45);
}
.btn-outline-primary { color:var(--brand-600); border-color:var(--brand-300); }
.btn-outline-primary:hover { background:var(--brand-600); border-color:var(--brand-600); }

/* ---------- الفورمات ---------- */
.form-control, .form-select {
  border-radius:var(--radius-sm); border-color:var(--line); padding:.55rem .8rem;
}
.form-control:focus, .form-select:focus {
  border-color:var(--brand-400); box-shadow:0 0 0 .22rem rgba(99,102,241,.18);
}
.form-label { font-weight:600; font-size:.86rem; color:#334155; margin-bottom:.35rem; }

/* ---------- الجداول ---------- */
.table { --bs-table-hover-bg: var(--brand-50); }
.table > thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
.table > :not(caption) > * > * { padding:.8rem 1rem; }

/* ---------- البادجات ---------- */
.badge { font-weight:700; border-radius:999px; padding:.4em .7em; }

/* ---------- شريط التمرير ---------- */
.admin-nav::-webkit-scrollbar, .admin-content::-webkit-scrollbar { width:8px; }
.admin-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:8px; }
.admin-content::-webkit-scrollbar-thumb { background:#d6deea; border-radius:8px; }

/* ============================================================
   صفحة الدخول (Split-screen)
   ============================================================ */
.auth-wrap { min-height:100vh; display:flex; }
.auth-brand {
  flex:1.1; position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 55%, var(--brand-950) 100%);
  display:flex; flex-direction:column; justify-content:center; padding:3.5rem;
}
.auth-brand::before, .auth-brand::after {
  content:""; position:absolute; border-radius:50%; filter:blur(2px);
}
.auth-brand::before { width:340px; height:340px; background:rgba(129,140,248,.25); top:-90px; inset-inline-end:-70px; }
.auth-brand::after  { width:260px; height:260px; background:rgba(67,56,202,.4); bottom:-80px; inset-inline-start:-50px; }
.auth-brand .auth-brand-inner { position:relative; z-index:2; max-width:430px; }
.auth-brand .logo-mark { width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand-400), var(--brand-600)); box-shadow:0 14px 34px rgba(0,0,0,.3); margin-bottom:1.6rem; }
.auth-brand .logo-mark svg { width:36px; height:36px; }
.auth-brand h1 { font-weight:800; font-size:2.1rem; margin-bottom:.8rem; }
.auth-brand p { color:var(--brand-200); font-size:1.02rem; line-height:1.8; }
.auth-brand .auth-points { margin-top:1.8rem; display:grid; gap:.8rem; }
.auth-brand .auth-points div { display:flex; align-items:center; gap:.7rem; color:var(--brand-100); font-weight:600; }
.auth-brand .auth-points i { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.12); display:grid; place-items:center; }

.auth-form-side { flex:1; display:flex; align-items:center; justify-content:center; padding:2.5rem; background:var(--surface); }
.auth-card { width:100%; max-width:380px; }
.auth-card .auth-head { margin-bottom:1.8rem; }
.auth-card .auth-head h2 { font-weight:800; font-size:1.55rem; margin-bottom:.25rem; }
.auth-card .auth-head p { color:var(--muted); margin:0; }
.auth-card .form-control { padding:.7rem .9rem; }
.auth-card .input-icon { position:relative; }
.auth-card .input-icon i { position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:.9rem; color:var(--muted); }
.auth-card .input-icon .form-control { padding-inline-start:2.5rem; }

@media (max-width: 860px) { .auth-brand { display:none; } }

/* ============================================================
   تجاوب (موبايل)
   ============================================================ */
@media (max-width: 991.98px) {
  .admin-sidebar {
    position:fixed; inset-block:0; inset-inline-start:0; z-index:1045;
    transform:translateX(-110%); transition:transform .25s ease;
    box-shadow:var(--shadow-lg);
  }
  html[dir="rtl"] .admin-sidebar { transform:translateX(110%); }
  .admin-sidebar.open { transform:translateX(0) !important; }
  .sidebar-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1044; }
}

/* ===== select2 (بحث/اختيار) — مواءمة مع هوية الإنديغو وارتفاع form-select ===== */
.select2-container--bootstrap-5 .select2-selection {
  border-color: var(--bs-border-color, #ced4da);
  border-radius: var(--radius-sm);
  min-height: calc(1.5em + .75rem + 2px);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .15);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-600);
}
.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: var(--brand-100);
  color: var(--brand-900);
}
.select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-lg);
}
/* داخل الكروت/الفلتر-بار العرض كامل دون فيض */
.select2-container { max-width: 100%; }
.was-validated .select2-hidden-accessible.is-invalid + .select2-container .select2-selection,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection {
  border-color: var(--bs-danger, #dc3545);
}