/* V21 - compact global admin dashboard */
:root{
  --v21-navy:#173852;
  --v21-teal:#367a80;
  --v21-ice:#f3f9fb;
  --v21-line:#d6e4ea;
  --v21-gold:#e7c258;
  --v21-gold-deep:#b88f29;
  --v21-danger:#b94848;
  --v21-shadow:0 12px 28px rgba(20,56,82,.10);
}

html body.dashboard-page.global-medical-ui,
html body.dashboard-page{
  background:linear-gradient(180deg,#f7fbfd 0%,#eef6f8 100%) !important;
}

/* ---------- one-row administration header ---------- */
html body.dashboard-page.global-medical-ui .page-head,
html body.dashboard-page .page-head{
  width:100% !important;
  min-height:108px !important;
  padding:13px 18px !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  direction:rtl !important;
  overflow:visible !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%) !important;
  border:0 !important;
  border-bottom:4px solid transparent !important;
  border-image:linear-gradient(90deg,#5eb8cf,#4da888,#dfbd4f) 1 !important;
  box-shadow:0 9px 24px rgba(18,57,82,.09) !important;
}
html body.dashboard-page.global-medical-ui .page-head > *,
html body.dashboard-page .page-head > *{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

html body.dashboard-page.global-medical-ui .page-head .brand.system-title,
html body.dashboard-page .page-head .brand.system-title{
  order:1 !important;
  flex:0 1 410px !important;
  min-width:330px !important;
  max-width:430px !important;
  height:80px !important;
  min-height:80px !important;
  padding:8px 12px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border:1px solid var(--v21-line) !important;
  border-inline-start:6px solid var(--v21-gold) !important;
  border-radius:18px !important;
  box-shadow:var(--v21-shadow) !important;
}
html body.dashboard-page.global-medical-ui .page-head .brand.system-title .lab-system-logo,
html body.dashboard-page .page-head .brand.system-title .lab-system-logo{
  position:static !important;
  inset:auto !important;
  order:1 !important;
  flex:0 1 265px !important;
  width:265px !important;
  min-width:210px !important;
  max-width:265px !important;
  height:62px !important;
  min-height:62px !important;
  max-height:62px !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body.dashboard-page.global-medical-ui .page-head .brand.system-title > span,
html body.dashboard-page .page-head .brand.system-title > span{
  display:none !important;
}
html body.dashboard-page.global-medical-ui .page-head .brand.system-title small,
html body.dashboard-page .page-head .brand.system-title small{
  position:static !important;
  inset:auto !important;
  order:2 !important;
  flex:1 1 120px !important;
  max-width:135px !important;
  min-width:105px !important;
  height:auto !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  padding:8px 10px !important;
  margin:0 !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,#34747b,#438991) !important;
  border:0 !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  text-shadow:none !important;
}
html body.dashboard-page.global-medical-ui .page-head .brand.system-title small span,
html body.dashboard-page .page-head .brand.system-title small span{color:#ffffff !important;}

html body.dashboard-page.global-medical-ui .page-head .top-user,
html body.dashboard-page .page-head .top-user{
  order:2 !important;
  flex:0 1 245px !important;
  min-width:190px !important;
  max-width:245px !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#26475d !important;
  background:#eef7f8 !important;
  border:1px solid #cfe1e5 !important;
  border-radius:15px !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:800 !important;
}
html body.dashboard-page.global-medical-ui .page-head .top-user span,
html body.dashboard-page.global-medical-ui .page-head .top-user b,
html body.dashboard-page .page-head .top-user span,
html body.dashboard-page .page-head .top-user b{color:#26475d !important;overflow:hidden !important;text-overflow:ellipsis !important;}

html body.dashboard-page.global-medical-ui .page-head .current-page-title,
html body.dashboard-page .page-head .current-page-title{
  order:3 !important;
  flex:0 1 300px !important;
  min-width:230px !important;
  max-width:310px !important;
  height:72px !important;
  min-height:72px !important;
  padding:9px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:right !important;
  overflow:hidden !important;
  background:#eef7f8 !important;
  border:1px solid #cfe1e5 !important;
  border-inline-start:5px solid #5aa1a6 !important;
  border-radius:17px !important;
  box-shadow:none !important;
}
html body.dashboard-page.global-medical-ui .page-head .current-page-title .page-title-label,
html body.dashboard-page .page-head .current-page-title .page-title-label{
  color:#4a7180 !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}
html body.dashboard-page.global-medical-ui .page-head .current-page-title b,
html body.dashboard-page.global-medical-ui .page-head .current-page-title b span,
html body.dashboard-page .page-head .current-page-title b,
html body.dashboard-page .page-head .current-page-title b span{
  color:#173852 !important;
  font-size:21px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}

html body.dashboard-page.global-medical-ui .page-head .head-actions,
html body.dashboard-page .page-head .head-actions{
  order:4 !important;
  flex:0 0 264px !important;
  width:264px !important;
  min-width:264px !important;
  max-width:264px !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.dashboard-page.global-medical-ui .page-head .head-actions > *,
html body.dashboard-page .page-head .head-actions > *{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:50px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:16px !important;
  border:1px solid transparent !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(18,57,82,.10) !important;
}
html body.dashboard-page.global-medical-ui .page-head .head-actions .btn-back,
html body.dashboard-page.global-medical-ui .page-head .head-actions .medical-back,
html body.dashboard-page .page-head .head-actions .btn-back{
  color:#173852 !important;
  background:linear-gradient(180deg,#f1d36d,#e5bd4f) !important;
  border-color:var(--v21-gold-deep) !important;
}
html body.dashboard-page.global-medical-ui .page-head .head-actions .logout,
html body.dashboard-page.global-medical-ui .page-head .head-actions .medical-logout,
html body.dashboard-page .page-head .head-actions .logout{
  color:#ffffff !important;
  background:linear-gradient(180deg,#4e94b1,#377a99) !important;
  border-color:#2e6c87 !important;
}
body.dashboard-page.lang-ar .page-head .head-actions .en{display:none !important;}
body.dashboard-page.lang-ar .page-head .head-actions .ar{display:inline !important;}
body.dashboard-page.lang-en .page-head .head-actions .ar{display:none !important;}
body.dashboard-page.lang-en .page-head .head-actions .en{display:inline !important;}

html body.dashboard-page.global-medical-ui .page-head .medical-language-switch,
html body.dashboard-page .page-head .medical-language-switch{
  order:5 !important;
  position:relative !important;
  inset:auto !important;
  flex:0 0 132px !important;
  width:132px !important;
  min-width:132px !important;
  max-width:132px !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
}

/* ---------- compact dashboard content ---------- */
html body.dashboard-page.global-medical-ui .wrap,
html body.dashboard-page .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:18px 28px 12px !important;
}
html body.dashboard-page.global-medical-ui .wrap .panel,
html body.dashboard-page .wrap .panel{
  border-radius:18px !important;
  border:1px solid var(--v21-line) !important;
  box-shadow:0 10px 24px rgba(20,56,82,.06) !important;
}
html body.dashboard-page.global-medical-ui .welcome-line,
html body.dashboard-page .welcome-line{
  min-height:52px !important;
  margin:0 0 12px !important;
  padding:0 18px !important;
  display:flex !important;
  align-items:center !important;
  color:#35566b !important;
  background:#ffffff !important;
  font-size:12px !important;
}
html body.dashboard-page.global-medical-ui .dashboard-section-keys,
html body.dashboard-page .dashboard-section-keys{
  min-height:0 !important;
  margin:0 !important;
  padding:16px 18px 18px !important;
  background:#ffffff !important;
  overflow:hidden !important;
}
html body.dashboard-page.global-medical-ui .dashboard-section-keys .menu-header,
html body.dashboard-page .dashboard-section-keys .menu-header{
  min-height:58px !important;
  margin:0 !important;
  padding:0 0 12px !important;
  display:flex !important;
  align-items:center !important;
  border-bottom:1px solid #e3edf1 !important;
}
html body.dashboard-page.global-medical-ui .dashboard-section-keys .menu-header b,
html body.dashboard-page .dashboard-section-keys .menu-header b{font-size:16px !important;color:#173852 !important;}
html body.dashboard-page.global-medical-ui .dashboard-section-keys .menu-header small,
html body.dashboard-page .dashboard-section-keys .menu-header small{font-size:11px !important;color:#6d8694 !important;}

html body.dashboard-page.global-medical-ui .section-key-grid,
html body.dashboard-page .section-key-grid{
  width:100% !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:12px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin !important;
}
html body.dashboard-page.global-medical-ui .section-key,
html body.dashboard-page .section-key{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:116px !important;
  height:116px !important;
  padding:15px 16px !important;
  gap:5px !important;
  border-radius:17px !important;
  box-shadow:0 10px 22px rgba(27,70,109,.13) !important;
}
html body.dashboard-page.global-medical-ui .section-key .key-icon,
html body.dashboard-page .section-key .key-icon{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  font-size:21px !important;
  border-radius:13px !important;
}
html body.dashboard-page.global-medical-ui .section-key b,
html body.dashboard-page .section-key b{
  font-size:15px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body.dashboard-page.global-medical-ui .section-key small,
html body.dashboard-page .section-key small{
  font-size:10.5px !important;
  line-height:1.3 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body.dashboard-page.global-medical-ui .dashboard-title,
html body.dashboard-page .dashboard-title{
  width:100% !important;
  max-width:none !important;
  margin:14px auto 9px !important;
  padding:0 28px !important;
  color:#173852 !important;
  font-size:19px !important;
  font-weight:900 !important;
}
html body.dashboard-page.global-medical-ui .cards,
html body.dashboard-page .cards{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:0 28px 24px !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin !important;
}
html body.dashboard-page.global-medical-ui .cards .card,
html body.dashboard-page .cards .card{
  flex:1 1 0 !important;
  min-width:135px !important;
  max-width:none !important;
  min-height:94px !important;
  height:94px !important;
  padding:13px 14px !important;
  border-radius:16px !important;
  border:1px solid var(--v21-line) !important;
  box-shadow:0 8px 20px rgba(20,56,82,.07) !important;
}
html body.dashboard-page.global-medical-ui .cards .card b,
html body.dashboard-page .cards .card b{
  color:#5a7485 !important;
  font-size:11px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}
html body.dashboard-page.global-medical-ui .cards .card > span,
html body.dashboard-page .cards .card > span{
  margin-top:7px !important;
  color:#347a80 !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
html body.dashboard-page.global-medical-ui .cards .alert-card > span,
html body.dashboard-page .cards .alert-card > span{color:#b94848 !important;}

@media (max-width:1450px){
  html body.dashboard-page.global-medical-ui .page-head,
  html body.dashboard-page .page-head{gap:9px !important;padding-inline:12px !important;}
  html body.dashboard-page.global-medical-ui .page-head .brand.system-title,
  html body.dashboard-page .page-head .brand.system-title{flex-basis:350px !important;min-width:295px !important;}
  html body.dashboard-page.global-medical-ui .page-head .brand.system-title .lab-system-logo,
  html body.dashboard-page .page-head .brand.system-title .lab-system-logo{width:220px !important;min-width:180px !important;}
  html body.dashboard-page.global-medical-ui .page-head .top-user,
  html body.dashboard-page .page-head .top-user{flex-basis:205px !important;min-width:170px !important;}
  html body.dashboard-page.global-medical-ui .page-head .current-page-title,
  html body.dashboard-page .page-head .current-page-title{flex-basis:255px !important;min-width:210px !important;}
  html body.dashboard-page.global-medical-ui .page-head .head-actions,
  html body.dashboard-page .page-head .head-actions{flex-basis:236px !important;width:236px !important;min-width:236px !important;max-width:236px !important;}
}
@media (max-width:1120px){
  html body.dashboard-page.global-medical-ui .page-head,
  html body.dashboard-page .page-head{flex-wrap:wrap !important;justify-content:center !important;}
  html body.dashboard-page.global-medical-ui .page-head .brand.system-title,
  html body.dashboard-page .page-head .brand.system-title{flex:1 1 100% !important;max-width:none !important;}
  html body.dashboard-page.global-medical-ui .section-key,
  html body.dashboard-page .section-key{min-width:190px !important;}
}
@media (max-width:760px){
  html body.dashboard-page.global-medical-ui .wrap,
  html body.dashboard-page .wrap,
  html body.dashboard-page.global-medical-ui .dashboard-title,
  html body.dashboard-page .dashboard-title,
  html body.dashboard-page.global-medical-ui .cards,
  html body.dashboard-page .cards{padding-inline:12px !important;}
  html body.dashboard-page.global-medical-ui .page-head .top-user,
  html body.dashboard-page .page-head .top-user,
  html body.dashboard-page.global-medical-ui .page-head .current-page-title,
  html body.dashboard-page .page-head .current-page-title,
  html body.dashboard-page.global-medical-ui .page-head .head-actions,
  html body.dashboard-page .page-head .head-actions{flex:1 1 100% !important;width:100% !important;max-width:none !important;}
}