/* ============================================================
   NoorAlFajr — Utility Classes
   ============================================================ */

/* Display */
.d-none      { display: none !important; }
.d-block     { display: block !important; }
.d-flex      { display: flex !important; }
.d-grid      { display: grid !important; }
.d-inline    { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-h-screen { min-height: 100dvh; }

/* Margins */
.m-auto   { margin: auto; }
.mx-auto  { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

/* Text Alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text Sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Font Weight */
.font-light    { font-weight: var(--fw-light); }
.font-normal   { font-weight: var(--fw-normal); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }
.font-extrabold{ font-weight: var(--fw-extrabold); }

/* Text Colors */
.text-primary   { color: var(--primary-600); }
.text-gold      { color: var(--gold-600); }
.text-muted     { color: var(--color-text-muted); }
.text-light     { color: var(--color-text-light); }
.text-white     { color: white; }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-error     { color: var(--color-error); }
.text-info      { color: var(--color-info); }

/* Background Colors */
.bg-primary  { background: var(--primary-500); }
.bg-gold     { background: var(--gold-500); }
.bg-card     { background: var(--color-bg-card); }
.bg-sidebar  { background: var(--color-bg-sidebar); }
.bg-white    { background: white; }
.bg-gradient-brand { background: var(--gradient-brand); }
.bg-gradient-gold  { background: var(--gradient-gold); }
.bg-gradient-hero  { background: var(--gradient-hero); }

/* Border Radius */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-green { box-shadow: var(--shadow-green); }
.shadow-gold  { box-shadow: var(--shadow-gold); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.select-none { user-select: none; -webkit-user-select: none; }

/* Z-index */
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-header { z-index: var(--z-header); }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transition */
.transition { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }

/* Border */
.border     { border: 1px solid var(--color-border); }
.border-t   { border-top: 1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }
.border-primary { border-color: var(--primary-300); }
.border-gold    { border-color: var(--gold-300); }

/* Flexbox shortcuts */
.flex-1     { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; }

/* Aspect ratios */
.aspect-square { aspect-ratio: 1; }
.aspect-video  { aspect-ratio: 16/9; }

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Rotate utilities (for compass etc.) */
.rotate-0   { transform: rotate(0deg); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* RTL specific */
[dir="rtl"] .ml-auto { margin-right: auto; margin-left: 0; }
[dir="rtl"] .mr-auto { margin-left: auto; margin-right: 0; }