/* Phase 10.2.7 — Laptop Compact Executive Fit
   الهدف: عند الشاشات الصغيرة/اللابتوب، نحافظ على فخامة التصميم لكن نعرض محتوى أكثر
   دون تكسير الواجهة أو ترك الـ Sidebar يأكل مساحة البيانات.
*/

/* 1) وضع اللابتوب: سايدبار مختصر + محتوى أعرض + ارتفاع أقل */
@media (min-width: 1181px) and (max-width: 1760px), (min-width: 1181px) and (max-height: 900px) {
  body.page-dashboard .elite-shell {
    min-height: 100vh !important;
  }

  body.page-dashboard .elite-sidebar {
    width: 92px !important;
    padding: 16px 10px !important;
    overflow-x: hidden !important;
  }
  body.page-dashboard .elite-main,
  html[dir="rtl"] body.page-dashboard .elite-main,
  body.elite-body.page-dashboard[dir="rtl"] .elite-main {
    margin-inline-start: 92px !important;
    margin-inline-end: 0 !important;
    padding: 14px 18px 22px !important;
  }

  body.page-dashboard .elite-brand {
    justify-content: center !important;
    padding: 0 0 14px !important;
    margin-bottom: 10px !important;
  }
  body.page-dashboard .elite-brand > span:not(.elite-brand-mark),
  body.page-dashboard .elite-nav a b,
  body.page-dashboard .elite-nav a em,
  body.page-dashboard .elite-sidebar-card,
  body.page-dashboard .elite-sidebar-footer {
    display: none !important;
  }
  body.page-dashboard .elite-brand-mark {
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
    margin: 0 auto !important;
  }
  body.page-dashboard .elite-brand-mark img {
    width: 48px !important;
    height: 48px !important;
  }
  body.page-dashboard .elite-nav {
    gap: 10px !important;
  }
  body.page-dashboard .elite-nav a,
  body.page-dashboard .elite-nav a.disabled {
    min-height: 48px !important;
    padding: 9px !important;
    justify-content: center !important;
    border-radius: 16px !important;
  }
  body.page-dashboard .elite-nav a span {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }
  body.page-dashboard .elite-nav a.active {
    box-shadow: 0 14px 34px rgba(31,181,174,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  /* 2) Topbar مضغوط أكثر، ولا يغطي المحتوى */
  body.page-dashboard .elite-topbar {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(240px, .88fr) minmax(180px, 230px) minmax(260px, 430px) auto auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    margin: 0 0 14px !important;
    border-radius: 24px !important;
  }
  body.page-dashboard .elite-title-block h1 {
    max-width: 340px !important;
    font-size: clamp(1.55rem, 1.8vw, 2.05rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.06em !important;
  }
  body.page-dashboard .elite-title-block p {
    margin-top: 5px !important;
    font-size: .76rem !important;
    line-height: 1.32 !important;
    max-width: 320px !important;
  }
  body.page-dashboard .elite-branch-select {
    min-width: 0 !important;
    height: 54px !important;
    padding: 9px 12px !important;
  }
  body.page-dashboard .elite-search {
    max-width: none !important;
    min-width: 0 !important;
    height: 50px !important;
  }
  body.page-dashboard .elite-search input {
    height: 50px !important;
    font-size: .86rem !important;
  }
  body.page-dashboard .elite-meta {
    min-width: 80px !important;
    line-height: 1.05 !important;
  }
  body.page-dashboard .elite-lang {
    height: 48px !important;
    padding: 0 14px !important;
    display: grid !important;
    place-items: center !important;
  }
  body.page-dashboard .elite-user {
    min-width: 106px !important;
    gap: 8px !important;
  }
  body.page-dashboard .elite-user > span {
    width: 38px !important;
    height: 38px !important;
  }

  /* 3) تقليل الارتفاعات العامة لإظهار المزيد من الصفحة فوق الطية */
  body.page-dashboard .cmdx {
    gap: 11px !important;
  }
  body.page-dashboard .cmdx-situation {
    grid-template-columns: 1.34fr .86fr 1.05fr .92fr .92fr 1.03fr !important;
    border-radius: 20px !important;
  }
  body.page-dashboard .cmdx-situation article {
    min-height: 108px !important;
    padding: 14px 17px !important;
    gap: 5px !important;
  }
  body.page-dashboard .cmdx-situation article:after {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    inset: auto 10px 10px auto !important;
  }
  body.page-dashboard .cmdx-status-tile {
    grid-template-columns: 48px 1fr !important;
    gap: 12px !important;
  }
  body.page-dashboard .cmdx-status-tile .cmdx-live-chip {
    position: absolute !important;
    top: 10px !important;
    inset-inline-end: 12px !important;
  }
  body.page-dashboard .cmdx-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
    font-size: 1.15rem !important;
  }
  body.page-dashboard .cmdx-square {
    width: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    margin-bottom: 4px !important;
  }
  body.page-dashboard .cmdx-mini-ring {
    width: 50px !important;
    height: 50px !important;
    box-shadow: inset 0 0 0 8px rgba(10,14,40,.94), 0 10px 24px rgba(0,0,0,.14) !important;
  }
  body.page-dashboard .cmdx-situation small {
    font-size: .66rem !important;
  }
  body.page-dashboard .cmdx-situation strong {
    font-size: clamp(1.38rem, 1.85vw, 2rem) !important;
  }
  body.page-dashboard .cmdx-situation em {
    font-size: .74rem !important;
    line-height: 1.22 !important;
  }
  body.page-dashboard .cmdx-spark {
    height: 26px !important;
  }
  body.page-dashboard .cmdx-pressure i {
    width: 18px !important;
    height: 6px !important;
  }

  body.page-dashboard .cmdx-section-head {
    margin-top: 0 !important;
    align-items: center !important;
  }
  body.page-dashboard .cmdx-section-head h2 {
    font-size: 1.1rem !important;
    margin-top: 3px !important;
  }
  body.page-dashboard .cmdx-updated {
    padding: 9px 12px !important;
    border-radius: 14px !important;
  }

  body.page-dashboard .cmdx-pulse-row {
    grid-template-columns: repeat(7, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  body.page-dashboard .cmdx-pulse-card {
    min-height: 86px !important;
    padding: 11px 12px !important;
    border-radius: 17px !important;
    grid-template-columns: 34px 1fr !important;
    gap: 8px !important;
  }
  body.page-dashboard .cmdx-pulse-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }
  body.page-dashboard .cmdx-pulse-card small {
    font-size: .68rem !important;
    line-height: 1.12 !important;
  }
  body.page-dashboard .cmdx-pulse-card strong {
    font-size: 1.08rem !important;
    margin-top: 4px !important;
  }
  body.page-dashboard .cmdx-pulse-card em {
    font-size: .62rem !important;
    line-height: 1.1 !important;
  }
  body.page-dashboard .cmdx-card-spark {
    right: 10px !important;
    bottom: 8px !important;
    height: 18px !important;
  }

  body.page-dashboard .cmdx-grid {
    grid-template-columns: minmax(0,1.12fr) minmax(0,.92fr) minmax(320px,.84fr) !important;
    grid-template-areas:
      "flow capacity finance"
      "clinical alerts actions" !important;
    gap: 12px !important;
  }
  body.page-dashboard .cmdx-panel {
    padding: 14px !important;
    border-radius: 20px !important;
  }
  body.page-dashboard .cmdx-panel-title {
    margin-bottom: 10px !important;
  }
  body.page-dashboard .cmdx-panel-title span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 11px !important;
  }
  body.page-dashboard .cmdx-panel-title h3 {
    font-size: .95rem !important;
  }

  body.page-dashboard .cmdx-flow-line {
    grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1.05fr 16px 1fr !important;
    gap: 3px !important;
    padding: 4px 0 8px !important;
  }
  body.page-dashboard .cmdx-flow-node {
    min-height: 90px !important;
    padding: 9px !important;
    border-radius: 999px !important;
  }
  body.page-dashboard .cmdx-flow-node.primary {
    min-height: 104px !important;
  }
  body.page-dashboard .cmdx-flow-node span {
    width: 30px !important;
    height: 30px !important;
  }
  body.page-dashboard .cmdx-flow-node b {
    font-size: 1.1rem !important;
  }
  body.page-dashboard .cmdx-flow-node small {
    font-size: .64rem !important;
  }
  body.page-dashboard .cmdx-panel footer {
    margin-top: 7px !important;
    padding-top: 8px !important;
    font-size: .70rem !important;
  }

  body.page-dashboard .cmdx-capacity-body {
    grid-template-columns: 118px 1fr !important;
    gap: 14px !important;
  }
  body.page-dashboard .cmdx-donut {
    width: 112px !important;
    height: 112px !important;
    box-shadow: 0 15px 32px rgba(16,24,40,.07), inset 0 0 0 12px #fff !important;
  }
  body.page-dashboard .cmdx-units {
    gap: 10px !important;
  }
  body.page-dashboard .cmdx-units div {
    grid-template-columns: 68px 1fr 34px !important;
    gap: 8px !important;
  }

  body.page-dashboard .cmdx-finance-grid,
  body.page-dashboard .cmdx-clinical-top {
    gap: 8px !important;
  }
  body.page-dashboard .cmdx-finance-grid div,
  body.page-dashboard .cmdx-clinical-top div {
    padding: 11px !important;
    border-radius: 13px !important;
  }
  body.page-dashboard .cmdx-finance-grid strong,
  body.page-dashboard .cmdx-clinical-top strong {
    font-size: .92rem !important;
  }
  body.page-dashboard .cmdx-specialties {
    gap: 7px !important;
    margin-top: 10px !important;
  }
  body.page-dashboard .cmdx-specialties li {
    padding: 7px 9px !important;
    border-radius: 12px !important;
  }
  body.page-dashboard .cmdx-specialties b,
  body.page-dashboard .cmdx-specialties em {
    font-size: .72rem !important;
  }

  body.page-dashboard .cmdx-alert,
  body.page-dashboard .cmdx-action {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  body.page-dashboard .cmdx-alert span {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-dashboard .cmdx-alert b {
    font-size: .98rem !important;
  }
  body.page-dashboard .cmdx-alert p,
  body.page-dashboard .cmdx-action span {
    font-size: .72rem !important;
  }
  body.page-dashboard .cmdx-action-center {
    padding: 11px 14px !important;
    margin-top: 10px !important;
  }

  body.page-dashboard .cmdx-quick,
  body.page-dashboard .cmdx-trust {
    border-radius: 16px !important;
  }
  body.page-dashboard .cmdx-quick {
    padding: 10px 12px !important;
  }
  body.page-dashboard .cmdx-quick a {
    padding: 8px 12px !important;
    border-radius: 12px !important;
  }
  body.page-dashboard .cmdx-trust div {
    padding: 11px 14px !important;
  }
}

/* 4) عند عرض متوسط جدًا: بدل تكسير العناصر، نتحول لتخطيط 2 أعمدة مريح */
@media (min-width: 1181px) and (max-width: 1440px) {
  body.page-dashboard .elite-topbar {
    grid-template-columns: minmax(260px,1fr) minmax(190px,240px) auto auto auto !important;
  }
  body.page-dashboard .elite-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  body.page-dashboard .cmdx-situation {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body.page-dashboard .cmdx-status-tile {
    grid-column: 1 / -1 !important;
  }
  body.page-dashboard .cmdx-pulse-row {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  }
  body.page-dashboard .cmdx-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "flow flow"
      "capacity finance"
      "clinical alerts"
      "actions actions" !important;
  }
}

/* 5) عند شاشات أصغر من ذلك: استخدم Drawer بدل sidebar حتى لا ينهار المحتوى */
@media (max-width: 1180px) {
  body.page-dashboard .elite-main,
  html[dir="rtl"] body.page-dashboard .elite-main,
  body.elite-body.page-dashboard[dir="rtl"] .elite-main {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}
