@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/utilities.css
| الوصف:
|   أدوات مساعدة عامة (Utilities) مشتركة في المنصة.
|
| الهدف:
|   - توفير أصناف صغيرة قابلة لإعادة الاستخدام لتسريع بناء الواجهات.
|   - تقليل التكرار داخل الصفحات والمكونات.
|   - دعم المسافات، العرض، المحاذاة، النصوص، العرض/الإخفاء، والمرونة.
|   - دعم responsive behavior بطريقة عملية ومنظمة.
|
| القواعد:
|   - هذه الأدوات عامة ومحدودة الغرض.
|   - لا توضع هنا أنماط مكونات كاملة.
|   - لا توضع هنا أنماط صفحات مخصصة.
|   - يعتمد هذا الملف على tokens.css و base.css.
|--------------------------------------------------------------------------
*/

/* -------------------------------------------------------------------------
 * Display
 * ---------------------------------------------------------------------- */
.u-block {
  display: block !important;
}

.u-inline {
  display: inline !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-flex {
  display: flex !important;
}

.u-inline-flex {
  display: inline-flex !important;
}

.u-grid {
  display: grid !important;
}

.u-inline-grid {
  display: inline-grid !important;
}

.u-hidden {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Flex Direction / Wrap
 * ---------------------------------------------------------------------- */
.u-flex-row {
  flex-direction: row !important;
}

.u-flex-column {
  flex-direction: column !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

/* -------------------------------------------------------------------------
 * Flex Grow / Shrink
 * ---------------------------------------------------------------------- */
.u-flex-1 {
  flex: 1 1 0% !important;
}

.u-flex-auto {
  flex: 1 1 auto !important;
}

.u-flex-initial {
  flex: 0 1 auto !important;
}

.u-flex-none {
  flex: none !important;
}

.u-grow {
  flex-grow: 1 !important;
}

.u-grow-0 {
  flex-grow: 0 !important;
}

.u-shrink {
  flex-shrink: 1 !important;
}

.u-shrink-0 {
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------
 * Alignment
 * ---------------------------------------------------------------------- */
.u-items-start {
  align-items: flex-start !important;
}

.u-items-center {
  align-items: center !important;
}

.u-items-end {
  align-items: flex-end !important;
}

.u-items-stretch {
  align-items: stretch !important;
}

.u-justify-start {
  justify-content: flex-start !important;
}

.u-justify-center {
  justify-content: center !important;
}

.u-justify-end {
  justify-content: flex-end !important;
}

.u-justify-between {
  justify-content: space-between !important;
}

.u-justify-around {
  justify-content: space-around !important;
}

.u-justify-evenly {
  justify-content: space-evenly !important;
}

.u-self-start {
  align-self: flex-start !important;
}

.u-self-center {
  align-self: center !important;
}

.u-self-end {
  align-self: flex-end !important;
}

.u-self-stretch {
  align-self: stretch !important;
}

/* -------------------------------------------------------------------------
 * Gap
 * ---------------------------------------------------------------------- */
.u-gap-0 {
  gap: 0 !important;
}

.u-gap-1 {
  gap: var(--space-1) !important;
}

.u-gap-2 {
  gap: var(--space-2) !important;
}

.u-gap-3 {
  gap: var(--space-3) !important;
}

.u-gap-4 {
  gap: var(--space-4) !important;
}

.u-gap-5 {
  gap: var(--space-5) !important;
}

.u-gap-6 {
  gap: var(--space-6) !important;
}

.u-gap-8 {
  gap: var(--space-8) !important;
}

.u-gap-10 {
  gap: var(--space-10) !important;
}

/* -------------------------------------------------------------------------
 * Width / Height
 * ---------------------------------------------------------------------- */
.u-w-auto {
  width: auto !important;
}

.u-w-full {
  width: 100% !important;
}

.u-w-fit {
  width: fit-content !important;
}

.u-h-auto {
  height: auto !important;
}

.u-h-full {
  height: 100% !important;
}

.u-min-w-0 {
  min-width: 0 !important;
}

.u-min-h-0 {
  min-height: 0 !important;
}

.u-max-w-full {
  max-width: 100% !important;
}

.u-max-h-full {
  max-height: 100% !important;
}

/* -------------------------------------------------------------------------
 * Overflow
 * ---------------------------------------------------------------------- */
.u-overflow-hidden {
  overflow: hidden !important;
}

.u-overflow-auto {
  overflow: auto !important;
}

.u-overflow-x-auto {
  overflow-x: auto !important;
}

.u-overflow-y-auto {
  overflow-y: auto !important;
}

/* -------------------------------------------------------------------------
 * Position
 * ---------------------------------------------------------------------- */
.u-relative {
  position: relative !important;
}

.u-absolute {
  position: absolute !important;
}

.u-fixed {
  position: fixed !important;
}

.u-sticky {
  position: sticky !important;
}

.u-static {
  position: static !important;
}

/* -------------------------------------------------------------------------
 * Text Align
 * ---------------------------------------------------------------------- */
.u-text-start {
  text-align: start !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-end {
  text-align: end !important;
}

/* -------------------------------------------------------------------------
 * Font Weight
 * ---------------------------------------------------------------------- */
.u-font-light {
  font-weight: var(--font-weight-light) !important;
}

.u-font-regular {
  font-weight: var(--font-weight-regular) !important;
}

.u-font-medium {
  font-weight: var(--font-weight-medium) !important;
}

.u-font-semibold {
  font-weight: var(--font-weight-semi-bold) !important;
}

.u-font-bold {
  font-weight: var(--font-weight-bold) !important;
}

.u-font-extrabold {
  font-weight: var(--font-weight-extra-bold) !important;
}

/* -------------------------------------------------------------------------
 * Font Size
 * ---------------------------------------------------------------------- */
.u-text-2xs {
  font-size: var(--font-size-2xs) !important;
}

.u-text-xs {
  font-size: var(--font-size-xs) !important;
}

.u-text-sm {
  font-size: var(--font-size-sm) !important;
}

.u-text-md {
  font-size: var(--font-size-md) !important;
}

.u-text-lg {
  font-size: var(--font-size-lg) !important;
}

.u-text-xl {
  font-size: var(--font-size-xl) !important;
}

.u-text-2xl {
  font-size: var(--font-size-2xl) !important;
}

.u-text-3xl {
  font-size: var(--font-size-3xl) !important;
}

/* -------------------------------------------------------------------------
 * Line Height
 * ---------------------------------------------------------------------- */
.u-leading-tight {
  line-height: var(--line-height-tight) !important;
}

.u-leading-snug {
  line-height: var(--line-height-snug) !important;
}

.u-leading-normal {
  line-height: var(--line-height-normal) !important;
}

.u-leading-relaxed {
  line-height: var(--line-height-relaxed) !important;
}

.u-leading-loose {
  line-height: var(--line-height-loose) !important;
}

/* -------------------------------------------------------------------------
 * Text Color
 * ---------------------------------------------------------------------- */
.u-text-primary {
  color: var(--color-text-primary) !important;
}

.u-text-secondary {
  color: var(--color-text-secondary) !important;
}

.u-text-muted {
  color: var(--color-text-muted) !important;
}

.u-text-disabled {
  color: var(--color-text-disabled) !important;
}

.u-text-inverse {
  color: var(--color-text-inverse) !important;
}

.u-text-brand {
  color: var(--color-brand-700) !important;
}

.u-text-success {
  color: var(--color-success-700) !important;
}

.u-text-warning {
  color: var(--color-warning-700) !important;
}

.u-text-danger {
  color: var(--color-danger-700) !important;
}

.u-text-info {
  color: var(--color-info-700) !important;
}

/* -------------------------------------------------------------------------
 * Background Color
 * ---------------------------------------------------------------------- */
.u-bg-transparent {
  background-color: transparent !important;
}

.u-bg-surface {
  background-color: var(--color-bg-surface) !important;
}

.u-bg-surface-soft {
  background-color: var(--color-bg-surface-soft) !important;
}

.u-bg-surface-muted {
  background-color: var(--color-bg-surface-muted) !important;
}

.u-bg-brand-soft {
  background-color: var(--color-bg-brand-soft) !important;
}

.u-bg-success {
  background-color: var(--color-bg-success) !important;
}

.u-bg-warning {
  background-color: var(--color-bg-warning) !important;
}

.u-bg-danger {
  background-color: var(--color-bg-danger) !important;
}

.u-bg-info {
  background-color: var(--color-bg-info) !important;
}

/* -------------------------------------------------------------------------
 * Border
 * ---------------------------------------------------------------------- */
.u-border-0 {
  border: 0 !important;
}

.u-border {
  border: var(--border-width-1) solid var(--color-border-default) !important;
}

.u-border-soft {
  border: var(--border-width-1) solid var(--color-border-soft) !important;
}

.u-border-strong {
  border: var(--border-width-1) solid var(--color-border-strong) !important;
}

.u-border-brand {
  border: var(--border-width-1) solid var(--color-border-brand) !important;
}

.u-border-success {
  border: var(--border-width-1) solid var(--color-border-success) !important;
}

.u-border-warning {
  border: var(--border-width-1) solid var(--color-border-warning) !important;
}

.u-border-danger {
  border: var(--border-width-1) solid var(--color-border-danger) !important;
}

.u-border-info {
  border: var(--border-width-1) solid var(--color-border-info) !important;
}

/* -------------------------------------------------------------------------
 * Border Radius
 * ---------------------------------------------------------------------- */
.u-rounded-none {
  border-radius: var(--radius-none) !important;
}

.u-rounded-xs {
  border-radius: var(--radius-xs) !important;
}

.u-rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.u-rounded-md {
  border-radius: var(--radius-md) !important;
}

.u-rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.u-rounded-xl {
  border-radius: var(--radius-xl) !important;
}

.u-rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}

.u-rounded-full {
  border-radius: var(--radius-full) !important;
}

/* -------------------------------------------------------------------------
 * Shadows
 * ---------------------------------------------------------------------- */
.u-shadow-none {
  box-shadow: none !important;
}

.u-shadow-xs {
  box-shadow: var(--shadow-xs) !important;
}

.u-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.u-shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.u-shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.u-shadow-xl {
  box-shadow: var(--shadow-xl) !important;
}

/* -------------------------------------------------------------------------
 * Opacity
 * ---------------------------------------------------------------------- */
.u-opacity-0 {
  opacity: 0 !important;
}

.u-opacity-50 {
  opacity: 0.5 !important;
}

.u-opacity-75 {
  opacity: 0.75 !important;
}

.u-opacity-100 {
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
 * Cursor
 * ---------------------------------------------------------------------- */
.u-cursor-default {
  cursor: default !important;
}

.u-cursor-pointer {
  cursor: pointer !important;
}

.u-cursor-not-allowed {
  cursor: not-allowed !important;
}

/* -------------------------------------------------------------------------
 * User Select
 * ---------------------------------------------------------------------- */
.u-select-none {
  user-select: none !important;
}

.u-select-text {
  user-select: text !important;
}

.u-select-all {
  user-select: all !important;
}

/* -------------------------------------------------------------------------
 * White Space / Truncate
 * ---------------------------------------------------------------------- */
.u-whitespace-normal {
  white-space: normal !important;
}

.u-whitespace-nowrap {
  white-space: nowrap !important;
}

.u-break-words {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.u-truncate {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* -------------------------------------------------------------------------
 * Object Fit
 * ---------------------------------------------------------------------- */
.u-object-cover {
  object-fit: cover !important;
}

.u-object-contain {
  object-fit: contain !important;
}

.u-object-fill {
  object-fit: fill !important;
}

/* -------------------------------------------------------------------------
 * Aspect Ratio
 * ---------------------------------------------------------------------- */
.u-aspect-1x1 {
  aspect-ratio: 1 / 1 !important;
}

.u-aspect-4x3 {
  aspect-ratio: 4 / 3 !important;
}

.u-aspect-16x9 {
  aspect-ratio: 16 / 9 !important;
}

/* -------------------------------------------------------------------------
 * Margin
 * ---------------------------------------------------------------------- */
.u-m-0 {
  margin: 0 !important;
}

.u-mx-auto {
  margin-inline: auto !important;
}

.u-my-0 {
  margin-block: 0 !important;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-2 {
  margin-top: var(--space-2) !important;
}

.u-mt-3 {
  margin-top: var(--space-3) !important;
}

.u-mt-4 {
  margin-top: var(--space-4) !important;
}

.u-mt-5 {
  margin-top: var(--space-5) !important;
}

.u-mt-6 {
  margin-top: var(--space-6) !important;
}

.u-mt-8 {
  margin-top: var(--space-8) !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-2 {
  margin-bottom: var(--space-2) !important;
}

.u-mb-3 {
  margin-bottom: var(--space-3) !important;
}

.u-mb-4 {
  margin-bottom: var(--space-4) !important;
}

.u-mb-5 {
  margin-bottom: var(--space-5) !important;
}

.u-mb-6 {
  margin-bottom: var(--space-6) !important;
}

.u-mb-8 {
  margin-bottom: var(--space-8) !important;
}

.u-ms-auto {
  margin-inline-start: auto !important;
}

.u-me-auto {
  margin-inline-end: auto !important;
}

/* -------------------------------------------------------------------------
 * Padding
 * ---------------------------------------------------------------------- */
.u-p-0 {
  padding: 0 !important;
}

.u-p-2 {
  padding: var(--space-2) !important;
}

.u-p-3 {
  padding: var(--space-3) !important;
}

.u-p-4 {
  padding: var(--space-4) !important;
}

.u-p-5 {
  padding: var(--space-5) !important;
}

.u-p-6 {
  padding: var(--space-6) !important;
}

.u-p-8 {
  padding: var(--space-8) !important;
}

.u-px-0 {
  padding-inline: 0 !important;
}

.u-px-2 {
  padding-inline: var(--space-2) !important;
}

.u-px-3 {
  padding-inline: var(--space-3) !important;
}

.u-px-4 {
  padding-inline: var(--space-4) !important;
}

.u-px-5 {
  padding-inline: var(--space-5) !important;
}

.u-px-6 {
  padding-inline: var(--space-6) !important;
}

.u-py-0 {
  padding-block: 0 !important;
}

.u-py-2 {
  padding-block: var(--space-2) !important;
}

.u-py-3 {
  padding-block: var(--space-3) !important;
}

.u-py-4 {
  padding-block: var(--space-4) !important;
}

.u-py-5 {
  padding-block: var(--space-5) !important;
}

.u-py-6 {
  padding-block: var(--space-6) !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-pt-4 {
  padding-top: var(--space-4) !important;
}

.u-pt-6 {
  padding-top: var(--space-6) !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pb-4 {
  padding-bottom: var(--space-4) !important;
}

.u-pb-6 {
  padding-bottom: var(--space-6) !important;
}

/* -------------------------------------------------------------------------
 * Visibility Helpers
 * ---------------------------------------------------------------------- */
.u-visible {
  visibility: visible !important;
}

.u-invisible {
  visibility: hidden !important;
}

/* -------------------------------------------------------------------------
 * Screen Reader
 * ---------------------------------------------------------------------- */
.u-sr-only:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

/* -------------------------------------------------------------------------
 * Responsive Utilities - Small and Down
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .u-sm-hidden {
    display: none !important;
  }

  .u-sm-block {
    display: block !important;
  }

  .u-sm-flex {
    display: flex !important;
  }

  .u-sm-grid {
    display: grid !important;
  }

  .u-sm-text-center {
    text-align: center !important;
  }

  .u-sm-text-start {
    text-align: start !important;
  }

  .u-sm-w-full {
    width: 100% !important;
  }

  .u-sm-flex-column {
    flex-direction: column !important;
  }

  .u-sm-items-stretch {
    align-items: stretch !important;
  }

  .u-sm-justify-start {
    justify-content: flex-start !important;
  }

  .u-sm-gap-2 {
    gap: var(--space-2) !important;
  }

  .u-sm-gap-3 {
    gap: var(--space-3) !important;
  }

  .u-sm-gap-4 {
    gap: var(--space-4) !important;
  }

  .u-sm-p-4 {
    padding: var(--space-4) !important;
  }

  .u-sm-px-4 {
    padding-inline: var(--space-4) !important;
  }

  .u-sm-py-4 {
    padding-block: var(--space-4) !important;
  }

  .u-sm-mt-4 {
    margin-top: var(--space-4) !important;
  }

  .u-sm-mb-4 {
    margin-bottom: var(--space-4) !important;
  }
}

/* -------------------------------------------------------------------------
 * Responsive Utilities - Medium and Up
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .u-md-hidden {
    display: none !important;
  }

  .u-md-block {
    display: block !important;
  }

  .u-md-flex {
    display: flex !important;
  }

  .u-md-grid {
    display: grid !important;
  }

  .u-md-inline-flex {
    display: inline-flex !important;
  }

  .u-md-flex-row {
    flex-direction: row !important;
  }

  .u-md-flex-column {
    flex-direction: column !important;
  }

  .u-md-items-center {
    align-items: center !important;
  }

  .u-md-items-start {
    align-items: flex-start !important;
  }

  .u-md-justify-between {
    justify-content: space-between !important;
  }

  .u-md-justify-end {
    justify-content: flex-end !important;
  }

  .u-md-text-start {
    text-align: start !important;
  }

  .u-md-text-center {
    text-align: center !important;
  }

  .u-md-w-auto {
    width: auto !important;
  }

  .u-md-w-full {
    width: 100% !important;
  }
}

/* -------------------------------------------------------------------------
 * Responsive Utilities - Large and Up
 * ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .u-lg-hidden {
    display: none !important;
  }

  .u-lg-block {
    display: block !important;
  }

  .u-lg-flex {
    display: flex !important;
  }

  .u-lg-grid {
    display: grid !important;
  }

  .u-lg-flex-row {
    flex-direction: row !important;
  }

  .u-lg-items-center {
    align-items: center !important;
  }

  .u-lg-justify-between {
    justify-content: space-between !important;
  }

  .u-lg-text-start {
    text-align: start !important;
  }

  .u-lg-text-center {
    text-align: center !important;
  }

  .u-lg-w-auto {
    width: auto !important;
  }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class*="u-"] {
    transition: none !important;
    animation: none !important;
  }
}