/* =========================================
   IMDTEC Portal Shell — Unified CSS
   ========================================= */

/* Root tokens */
:root{
  --ps-topbar-h: 56px;
  --ps-sidebar-w: 280px;
  --ps-radius: 12px;
  --ps-shadow: 0 2px 10px rgba(0,0,0,.06);
  --ps-bg: #ffffff;
  --ps-bg-soft: #f7f8fa;
  --ps-text: #1f2937;
  --ps-muted: #6b7280;
  --ps-brand: #003192;
  --ps-accent: #08915E;
  --ps-border: #e9ecef;
  --ps-gap: 16px;

  /* Sidebar palette */
  --ps-sidebar-link-active:#17488A;    /* الأزرق الأساسي */
  --ps-sidebar-sub-bg:#f2f6fc;         /* خلفية افتراضية للفرعي عند الإغلاق */
}

/* Resets & primitives */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ps-text); background:var(--ps-bg-soft);
  font:400 15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img{ max-width:100%; height:auto }
.ps-container{ max-width:1320px; margin:0 auto; padding:0 16px }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  left:8px; top:8px; width:auto; height:auto; background:#000; color:#fff;
  padding:6px 10px; border-radius:8px; z-index:9999;
}
.ps-menu{ list-style:none; margin:0; padding:0 }

/* =========================================
   Topbar
   ========================================= */
.ps-topbar{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--ps-border);
  height:var(--ps-topbar-h);
}
.ps-topbar__inner{ display:flex; align-items:center; gap:12px; height:var(--ps-topbar-h) }
.ps-brand{
  display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none;
}
.ps-brand img{
  display:inline-block; vertical-align:middle;
  max-height:24px; height:22px; /* يضمن الظهور حتى لو كان SVG بلا أبعاد داخلية */
}
.ps-topnav{ margin-left:auto }

.ps-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; border-radius:10px; padding:8px 10px; background:transparent; cursor:pointer;
}
.ps-btn--icon:hover{ background:rgba(0,0,0,.05) }

/* =========================================
   Layout
   ========================================= */
.ps-layout{ display:flex; min-height:calc(100vh - var(--ps-topbar-h)) }
.ps-sidebar{
  width:var(--ps-sidebar-w); background:#fff; border-right:1px solid var(--ps-border);
  position:relative; z-index:30; /* فوق صفحة المحتوى */
}
.ps-page{ flex:1; min-width:0; background:var(--ps-bg) }
.ps-page__container{ padding:20px }

/* =========================================
   Sidebar Menu (Vertical)
   ========================================= */

/* الروابط الأساسية للرئيسي */
.ps-menu--vertical .menu-item > a{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-radius:10px;
  color:#334155; text-decoration:none; position:relative;
}
.ps-menu--vertical .menu-item > a:hover{
  background:rgba(23,72,138,.08);
  color:var(--ps-brand);
}

/* القائمة الفرعية — افتراضيًا مغلقة */
.ps-menu--vertical .menu-item-has-children > .sub-menu{
  display:none;
  margin:6px 0 6px 0;
  padding:8px 0 8px 8px;
  background:var(--ps-sidebar-sub-bg);
  border-left:2px solid rgba(23,72,138,.25);
  border-radius:10px;
}
.ps-menu--vertical .menu-item-has-children > .sub-menu.open{
  display:block; animation:ps-fade .18s ease;
}

/* العنصر النشط في المستوى الرئيسي */
.ps-menu--vertical .current-menu-item > a,
.ps-menu--vertical .current-menu-ancestor > a{
  color:var(--ps-sidebar-link-active);
  font-weight:600;
}

/* الخلفية الزرقاء الكاملة عند فتح الفرع + نص أبيض داخله */
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu{
  background: var(--ps-sidebar-link-active);
  border-left-color: transparent; /* لا نحتاج حد جانبي مع الخلفية الزرقاء */
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu a{
  color:#fff;
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu a:hover{
  background: rgba(255,255,255,.14);
  color:#fff;
}

/* زر السهم (caret) كزر مستقل بعد الرابط */
.ps-menu--vertical .menu-item-has-children > .ps-caret{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-right:8px;
  border:0; background:transparent; cursor:pointer;
  border-radius:8px; transition:transform .2s ease;
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .ps-caret{
  transform: rotate(180deg);
}

/* حركة بسيطة */
@keyframes ps-fade{ from{opacity:.0; transform:translateY(-4px)} to{opacity:1; transform:none} }

/* =========================================
   Footer
   ========================================= */
.ps-footer{ border-top:1px solid var(--ps-border); background:#fff }
.ps-footer__inner{ display:grid; grid-template-columns:1fr auto; gap:12px; padding:16px 0 }
.ps-footer .ps-menu--footer{ display:flex; gap:10px }
.ps-copy{ color:var(--ps-muted) }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1199.98px){
  .ps-layout{ flex-direction:column }
  .ps-sidebar{
    position:fixed; inset:var(--ps-topbar-h) 0 0 auto; width:320px; max-width:85vw;
    transform:translateX(-100%); transition:transform .25s ease; z-index:999; box-shadow:var(--ps-shadow)
  }
  .ps-sidebar.is-open{ transform:none }
  .ps-menu--horizontal{ display:none }
}
@media (min-width: 1200px){
  .ps-layout{ flex-direction:row }
}

/* =========================================
   Feature actions (search/lang/notifications/profile)
   ========================================= */
.ps-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ps-search{
  display:flex; align-items:center; gap:6px;
  background:#f1f5f9; border:1px solid var(--ps-border); border-radius:12px; padding:4px 8px;
}
.ps-search input{ border:0; outline:0; background:transparent; min-width:220px; font:inherit; color:inherit; }
.ps-btn--avatar{ padding:0; border-radius:999px; overflow:hidden; border:1px solid var(--ps-border); background:#fff; }
.ps-badge{ position:relative; display:inline-flex; }
.ps-badge::after{
  content:attr(data-badge); position:absolute; top:-6px; right:-6px; height:16px; min-width:16px;
  padding:0 4px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; line-height:16px; text-align:center;
}

/* Dropdowns */
.ps-dropdown{ position:relative; }
.ps-dropdown__menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--ps-border); border-radius:12px; box-shadow:var(--ps-shadow);
  padding:6px; display:none; z-index:1200;
}
.ps-dropdown.open > .ps-dropdown__menu{ display:block; animation:ps-fade .16s ease; }
.ps-dropdown__menu--lg{ min-width:280px; }
.ps-dropdown__header{ padding:8px 10px; font-weight:600; border-bottom:1px solid #f1f5f9; }
.ps-dropdown__body .ps-item{ display:block; padding:8px 10px; border-radius:8px; color:#1f2937; text-decoration:none; }
.ps-dropdown__body .ps-item:hover{ background:#f8fafc; }
.ps-dropdown__footer{ padding:8px 10px; border-top:1px solid #f1f5f9; text-align:right; }

/* =========================================
   Grid / Cards / Titles
   ========================================= */
.row{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--ps-gap); }
.col{ grid-column:span 12; }
@media (min-width:576px){ .col-sm-6{ grid-column:span 6; } }
@media (min-width:1200px){
  .col-xl-3{ grid-column:span 3; }
  .col-xl-6{ grid-column:span 6; }
}
.card{ background:#fff; border:1px solid var(--ps-border); border-radius:12px; box-shadow:var(--ps-shadow); }
.card-header{ padding:16px 16px 0 16px; border-bottom:0; }
.card-body{ padding:16px; }
.card-title{ margin:0; font-size:16px; }
.ps-page-title{ margin:0 0 16px 0; font-size:28px; line-height:1.2; }

/* Progress */
.progress{ display:flex; height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.progress-bar{ flex:0 0 auto; background:var(--ps-brand); }
.progress-bar + .progress-bar{ background:var(--ps-accent); }

/* =========================================
   Optional icon sprites on menu items
   ========================================= */
.ps-menu--vertical .menu-item > a{ padding-left:38px; }
.ps-menu--vertical .menu-item > a::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.95;
  background-size:18px 18px; background-repeat:no-repeat;
}

/* Icons examples (use classes like .icon-dashboard on <li>) */
.ps-menu--vertical .menu-item.icon-dashboard > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/></svg>");
}
.ps-menu--vertical .menu-item.icon-email > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M12 13 2 6.76V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.76L12 13zM20 4H4a2 2 0 0 0-2 2l10 6 10-6a2 2 0 0 0-2-2z'/></svg>");
}
.ps-menu--vertical .menu-item.icon-calendar > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/></svg>");
}
.ps-menu--vertical .menu-item.icon-crm > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/></svg>");
}
.ps-menu--vertical .menu-item.icon-academic > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm0 13L5.74 12 12 8.5 18.26 12 12 16z'/></svg>");
}
.ps-menu--vertical .menu-item.icon-manage > a::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2317488A'><path d='M12 8a4 4 0 104 4 4 4 0 00-4-4zm8 4a8 8 0 11-8-8 8 8 0 018 8zm-8 5a7 7 0 00-6.12 3.5A1 1 0 007.72 22h8.56a1 1 0 00.84-1.5A7 7 0 0012 17z'/></svg>");
}



/* 3.1 — تأكيد الخلفية الزرقاء الكاملة عند فتح الفرع */
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu{
  background: var(--ps-sidebar-link-active) !important; /* أزرق كامل */
  border-left-color: transparent;
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu a{
  color:#fff !important;
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > .sub-menu a:hover{
  background: rgba(255,255,255,.14);
  color:#fff !important;
}

/* 3.2 — وضع سهم (caret) كعنصر مستقل بعد الرابط أو بداخله */
.ps-menu--vertical .menu-item-has-children > a .ps-caret{
  margin-inline-start: auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:8px; transition:transform .2s ease;
}
.ps-menu--vertical .menu-item-has-children[aria-expanded="true"] > a .ps-caret{
  transform: rotate(180deg);
}

/* 3.3 — دعم الفتح من اليمين عند استخدام RTL */
html[dir="rtl"] .ps-sidebar{
  inset: var(--ps-topbar-h) 0 0 auto;         /* مثبت يمين */
  transform: translateX(100%);                /* مخفي خارج الشاشة يمين */
}
html[dir="rtl"] .ps-sidebar.is-open{
  transform: none;
}

/* 3.4 — حجم/موضع الشعار داخل الهيدر لضمان الظهور */
.ps-brand img{ max-height:24px; height:24px; display:inline-block; }



/* ===== Sidebar (Blue) ===== */
#ps-sidebar.ps-sidebar{
  --sidebar-blue: #17488A;
  background: var(--sidebar-blue);
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.25);
}

/* الروابط الرئيسية داخل الـ sidebar */
#ps-sidebar .ps-menu--vertical .menu-item > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}
#ps-sidebar .ps-menu--vertical .menu-item > a:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* الحالة النشطة */
#ps-sidebar .ps-menu--vertical .current-menu-item > a,
#ps-sidebar .ps-menu--vertical .current-menu-ancestor > a{
  color: #fff;
  font-weight: 600;
}

/* القوائم الفرعية (مغلقة/افتراضي) */
#ps-sidebar .ps-menu--vertical .menu-item-has-children > .sub-menu{
  display: none;
  margin: 6px 0;
  padding: 8px 0 8px 8px;
  background: rgba(255,255,255,.06);
  border-left: 2px solid rgba(255,255,255,.25);
  border-radius: 10px;
}

/* عند الفتح (aria-expanded=true) */
#ps-sidebar .menu-item-has-children[aria-expanded="true"] > .sub-menu{
  display: block;
  background: var(--sidebar-blue);
  border-left-color: transparent;
}
#ps-sidebar .menu-item-has-children[aria-expanded="true"] > .sub-menu a{
  color: #fff;
}
#ps-sidebar .menu-item-has-children[aria-expanded="true"] > .sub-menu a:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* أيقونة قبل الروابط (إن وُجدت) لتظهر بوضوح على الأزرق */
#ps-sidebar .ps-menu--vertical .menu-item > a::before{
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* شارة التنبيهات داخل الـ sidebar (إن وُجدت) */
#ps-sidebar .ps-badge::after{
  background: #fff;
  color: var(--sidebar-blue);
}