/* ============================================================
 *  SOMAGEC — نظام تصميم حديث 
 *  لوحة احترافية مبنية على تصميم COD-GX — RTL
 * ============================================================ */

:root {
  --brand:        #191919;   /* أسود رئيسي */
  --brand-dark:   #000000;
  --brand-700:    #111111;
  --brand-50:     #f3f4f6;
  --ink:          #1f1b46;
  --muted:        #6b7394;
  --line:         #e8eaf3;
  --bg:           #eef0f8;
  --side-1:       #2b2b2b;
  --side-2:       #111111;
}

[v-cloak] { display: none; }

* { -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--ink); }

/* الأيقونات */
.ic { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; display: inline-block; vertical-align: middle; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c7cbe0; border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- الحقول ---------------- */
.inp {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 0.85rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  color: var(--ink);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: #9aa0bd; }
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(25,25,25,.13); }
select.inp { cursor: pointer; }

/* ---------------- الأزرار ---------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .92rem;
  border-radius: 0.85rem; padding: 0.62rem 1.25rem;
  box-shadow: 0 8px 18px -7px rgba(25,25,25,.6);
  transition: background .15s, transform .06s, box-shadow .15s;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: #fff; color: #4a5170; font-weight: 600; font-size: .9rem;
  border: 1.5px solid var(--line);
  border-radius: 0.85rem; padding: 0.55rem 1rem;
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: #f6f7fc; border-color: #d8dbec; }

/* ---------------- البطاقات ---------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(20,20,60,.04), 0 10px 30px -18px rgba(40,40,90,.25);
  padding: 1.1rem;
}

.lbl  { font-size: .78rem; color: var(--muted); font-weight: 600; }
.lbl2 { display:block; font-size: .8rem; color: #4a5170; margin-bottom: .3rem; font-weight: 600; }
.val  { font-size: 1.5rem; font-weight: 800; margin-top: .15rem; letter-spacing: -.02em; }
.section-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); }

/* ---------------- بطاقات الإحصائيات (KPI) ---------------- */
.stat {
  position: relative;
  border-radius: 1.25rem;
  padding: 1rem 1.05rem;
  overflow: hidden;
  border: 1px solid transparent;
}
.stat .stat-ico {
  width: 2.7rem; height: 2.7rem; border-radius: .85rem;
  display: grid; place-items: center; background: rgba(255,255,255,.7);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.3);
}
.stat .stat-ico i { font-size: 1.25rem; }
.stat .stat-lbl { font-size: .78rem; font-weight: 700; opacity: .85; }
.stat .stat-val { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.stat--violet { background: #ece9fe; color: #5b34c4; }
.stat--cyan   { background: #d7f1f7; color: #0e7490; }
.stat--pink   { background: #fde2ec; color: #be185d; }
.stat--amber  { background: #fdeecd; color: #b15309; }
.stat--emerald{ background: #d6f4e5; color: #047a56; }
.stat--rose   { background: #fde4e4; color: #be2733; }
.stat--slate  { background: #e9ecf6; color: #475078; }
.stat--sky    { background: #ddeafe; color: #1d63c9; }

/* ---------------- الشارات ---------------- */
.badge { font-size: .72rem; font-weight: 700; border-radius: 9999px; padding: .2rem .65rem; white-space: nowrap; }

/* ---------------- الشريط الجانبي ---------------- */
.sidebar {
  background: linear-gradient(180deg, var(--side-1) 0%, var(--side-2) 100%);
  color: #fff;
}
.nav-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem .9rem; border-radius: .9rem;
  color: rgba(255,255,255,.78); font-weight: 600; font-size: .95rem;
  transition: background .15s, color .15s;
  width: 100%; text-align: left;
}
.nav-item i { width: 1.25rem; text-align: center; flex: 0 0 auto; }
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active {
  background: #fff; color: var(--brand-dark);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.45);
}

.topbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* ---------------- إشعار عائم ---------------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: #fff; padding: .7rem 1.2rem; border-radius: .9rem; z-index: 60;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.4); font-weight: 700; font-size: .9rem;
}

/* مؤشر تحميل */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #d4d7ea; border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* نافذة منبثقة */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}
.modal-box {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* طباعة */
@media print {
  .no-print, .print\:hidden { display: none !important; }
  .lg\:pl-72 { padding-left: 0 !important; }
  body { background: white !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  .sidebar { display: none !important; }
  .topbar { display: none !important; }
  main { padding: 0 !important; }
}