/* JUST AQAR — Global Icon Contrast + Action Labels
   Build: 20260808.2310
   هدفه: منع الأيقونات الباهتة على الخلفيات الفاتحة وتوحيد أزرار الإجراءات. */

:root{
  --ja-icon-medium:#456a63;
  --ja-icon-medium-strong:#315950;
  --ja-icon-soft-bg:#edf6f3;
  --ja-icon-soft-border:#c6dad4;
  --ja-icon-danger:#a63a35;
  --ja-icon-danger-bg:#fff1f1;
  --ja-icon-danger-border:#efc6c4;
  --ja-icon-warning:#8b642b;
  --ja-icon-warning-bg:#fff7e7;
  --ja-icon-warning-border:#ead8ad;
  --ja-icon-success:#176c54;
  --ja-icon-success-bg:#eaf6f1;
  --ja-icon-success-border:#c6dfd5;
}

/* Do not let enabled icons fade to near-white on light surfaces. */
html body:not(#ja-disable-global-icon-contrast) :is(
  button:not(:disabled),
  a,
  [role="button"]:not([aria-disabled="true"])
) :is(.material-symbols-rounded,.material-icons,.material-icons-round,.fa,.fas,.far,.fab,[data-icon]){
  opacity:1!important;
}

/* Standalone icons on normal/light content surfaces also use the medium tone.
   Buttons/links and semantic states keep their own context colors. */
html body:not(#ja-disable-global-icon-contrast) .material-symbols-rounded:not(
  button .material-symbols-rounded,
  a .material-symbols-rounded,
  [role="button"] .material-symbols-rounded,
  .ja-page-banner .material-symbols-rounded,
  [class*="hero"] .material-symbols-rounded,
  .app-header .material-symbols-rounded,
  .site-header .material-symbols-rounded,
  .app-bottom-nav .material-symbols-rounded,
  .bottom-nav .material-symbols-rounded,
  [class*="danger"] .material-symbols-rounded,
  [class*="delete"] .material-symbols-rounded,
  [class*="success"] .material-symbols-rounded,
  [class*="approve"] .material-symbols-rounded,
  [class*="warning"] .material-symbols-rounded
){
  color:var(--ja-icon-medium)!important;
  opacity:1!important;
}

/* Neutral icon tiles / stat icons / card icons use one medium visual weight. */
html body:not(#ja-disable-global-icon-contrast) :is(
  [class*="stat-icon"],
  [class*="metric-icon"],
  [class*="card-icon"],
  [class*="quick-icon"],
  [class*="service-icon"],
  [class*="feature-icon"],
  [class*="section-icon"],
  [class*="filter-icon"],
  [class*="field-icon"],
  [class*="upload-icon"],
  [class*="empty-icon"],
  [class*="info-icon"]
){
  color:var(--ja-icon-medium)!important;
}
html body:not(#ja-disable-global-icon-contrast) :is(
  [class*="stat-icon"],
  [class*="metric-icon"],
  [class*="card-icon"],
  [class*="quick-icon"],
  [class*="service-icon"],
  [class*="feature-icon"],
  [class*="section-icon"],
  [class*="filter-icon"],
  [class*="field-icon"],
  [class*="upload-icon"],
  [class*="empty-icon"],
  [class*="info-icon"]
) :is(.material-symbols-rounded,.material-icons,.material-icons-round,.fa,.fas,.far,.fab,svg){
  color:inherit!important;
  opacity:1!important;
}

/* Neutral action / icon-only controls on light backgrounds. High specificity is intentional
   because several legacy page files contain !important light icon colors. */
html body:not(#ja-disable-global-icon-contrast) :is(
  [class*="action-btn"],
  [class*="actions-btn"],
  [class*="icon-btn"],
  .ja-btn-icon,
  .ja-ui-icon-btn,
  [data-ja-action-control="1"]
):not([class*="danger"]):not([class*="delete"]):not([class*="remove"]):not([class*="destructive"]):not([class*="primary"]):not([class*="success"]):not([class*="approve"]):not([class*="warning"]){
  color:var(--ja-icon-medium-strong)!important;
}

/* When an icon-only action gets an automatic text label, make the whole control readable. */
html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label{
  width:auto!important;
  min-width:40px!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid var(--ja-icon-soft-border)!important;
  border-radius:13px!important;
  background:var(--ja-icon-soft-bg)!important;
  color:var(--ja-icon-medium-strong)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label :is(.material-symbols-rounded,.material-icons,.material-icons-round,.fa,.fas,.far,.fab){
  color:inherit!important;
  opacity:1!important;
  font-size:19px!important;
}
html body:not(#ja-disable-global-icon-contrast) .ja-global-action-label{
  display:inline-block!important;
  color:inherit!important;
  font-family:'Almarai',sans-serif!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-indent:0!important;
  white-space:nowrap!important;
}

/* Semantic actions keep their meaning but use medium, readable shades. */
html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label:is(
  [class*="danger"],[class*="delete"],[class*="remove"],[class*="destructive"],[data-action="delete"],[data-action="remove"]
){
  color:var(--ja-icon-danger)!important;
  background:var(--ja-icon-danger-bg)!important;
  border-color:var(--ja-icon-danger-border)!important;
}
html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label:is(
  [class*="approve"],[class*="success"],[data-action="approve"],[data-action="accept"]
){
  color:var(--ja-icon-success)!important;
  background:var(--ja-icon-success-bg)!important;
  border-color:var(--ja-icon-success-border)!important;
}
html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label:is(
  [class*="warning"],[data-action="suspend"],[data-action="hold"]
){
  color:var(--ja-icon-warning)!important;
  background:var(--ja-icon-warning-bg)!important;
  border-color:var(--ja-icon-warning-border)!important;
}

/* Action areas should wrap instead of clipping labels. */
html body:not(#ja-disable-global-icon-contrast) :is(
  .ja-global-actions-cell,
  .ja-global-actions-area,
  [class*="accordion-actions"],
  [class*="record-actions"],
  [class*="row-actions"],
  [class*="card-actions"],
  [class$="-actions"]
).ja-action-labels-enabled{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  white-space:normal!important;
}

/* Keep icons white where the design intentionally uses a dark/brand surface. */
html body:not(#ja-disable-global-icon-contrast) :is(
  .ja-page-banner,
  [class*="hero"],
  .app-header,
  .site-header,
  .header-main,
  .app-bottom-nav,
  .bottom-nav
) :is(
  [class*="menu-btn"],
  [class*="hero-btn"],
  [class*="header-btn"],
  [class*="refresh"],
  [class*="nav-btn"]
) :is(.material-symbols-rounded,.material-icons,.material-icons-round,.fa,.fas,.far,.fab){
  color:inherit!important;
  opacity:1!important;
}

/* Disabled controls may remain visually muted. */
html body:not(#ja-disable-global-icon-contrast) :is(button:disabled,[aria-disabled="true"]) :is(.material-symbols-rounded,.material-icons,.material-icons-round,.fa,.fas,.far,.fab){
  opacity:.48!important;
}

/* Make local masked Material Symbols crisp and medium-weight. */
html body:not(#ja-disable-global-icon-contrast) .material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24!important;
}

@media (max-width:720px){
  html body:not(#ja-disable-global-icon-contrast) .ja-action-has-label{
    min-height:40px!important;
    padding-inline:9px!important;
    gap:5px!important;
  }
  html body:not(#ja-disable-global-icon-contrast) .ja-global-action-label{
    font-size:10.5px!important;
  }
}


/* 20260808.2310 — icon-only exceptions requested for index + unified action trigger. */
html body .custom-copy,
html body .property-actions-copy-only :is(button,a),
html body .ja-actions-toggle{
  width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;padding:0!important;gap:0!important;
}
html body .custom-copy .ja-global-action-label,
html body .property-actions-copy-only .ja-global-action-label,
html body .ja-actions-toggle .ja-global-action-label{display:none!important;}
html body .ja-actions-toggle .material-symbols-rounded{
  color:var(--ja-icon-medium-strong)!important;opacity:1!important;
}