/**\n * تخطيط CSS - Layout\n * أنماط التخطيط والشبكات والمسافات\n */\n\n/* ==================== الأساسيات ==================== */\nhtml,\nbody {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    font-family: var(--font-family-arabic);\n    font-size: var(--font-size-base);\n    font-weight: var(--font-weight-normal);\n    line-height: 1.5;\n    color: var(--color-text-primary);\n    background-color: var(--color-bg-primary);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\n/* ==================== الشبكة (Grid) ==================== */\n.grid {\n    display: grid;\n    gap: var(--spacing-lg);\n}\n\n.grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n.grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n.grid-cols-5 {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n\n.grid-cols-6 {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n\n.grid-cols-12 {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n/* ==================== Flexbox ==================== */\n.flex {\n    display: flex;\n}\n\n.flex-row {\n    flex-direction: row;\n}\n\n.flex-col {\n    flex-direction: column;\n}\n\n.flex-wrap {\n    flex-wrap: wrap;\n}\n\n.flex-nowrap {\n    flex-wrap: nowrap;\n}\n\n.items-start {\n    align-items: flex-start;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.items-end {\n    align-items: flex-end;\n}\n\n.items-stretch {\n    align-items: stretch;\n}\n\n.justify-start {\n    justify-content: flex-start;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.justify-end {\n    justify-content: flex-end;\n}\n\n.justify-between {\n    justify-content: space-between;\n}\n\n.justify-around {\n    justify-content: space-around;\n}\n\n.justify-evenly {\n    justify-content: space-evenly;\n}\n\n.gap-0 {\n    gap: 0;\n}\n\n.gap-xs {\n    gap: var(--spacing-xs);\n}\n\n.gap-sm {\n    gap: var(--spacing-sm);\n}\n\n.gap-md {\n    gap: var(--spacing-md);\n}\n\n.gap-lg {\n    gap: var(--spacing-lg);\n}\n\n.gap-xl {\n    gap: var(--spacing-xl);\n}\n\n.gap-2xl {\n    gap: var(--spacing-2xl);\n}\n\n/* ==================== المسافات (Spacing) ==================== */\n/* الهوامش الخارجية (Margins) */\n.m-0 { margin: 0; }\n.m-xs { margin: var(--spacing-xs); }\n.m-sm { margin: var(--spacing-sm); }\n.m-md { margin: var(--spacing-md); }\n.m-lg { margin: var(--spacing-lg); }\n.m-xl { margin: var(--spacing-xl); }\n.m-2xl { margin: var(--spacing-2xl); }\n\n.mx-auto { margin-left: auto; margin-right: auto; }\n.my-auto { margin-top: auto; margin-bottom: auto; }\n\n.mt-0 { margin-top: 0; }\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n.mt-xl { margin-top: var(--spacing-xl); }\n.mt-2xl { margin-top: var(--spacing-2xl); }\n\n.mb-0 { margin-bottom: 0; }\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n.mb-xl { margin-bottom: var(--spacing-xl); }\n.mb-2xl { margin-bottom: var(--spacing-2xl); }\n\n.ms-0 { margin-inline-start: 0; }\n.ms-xs { margin-inline-start: var(--spacing-xs); }\n.ms-sm { margin-inline-start: var(--spacing-sm); }\n.ms-md { margin-inline-start: var(--spacing-md); }\n.ms-lg { margin-inline-start: var(--spacing-lg); }\n.ms-xl { margin-inline-start: var(--spacing-xl); }\n.ms-2xl { margin-inline-start: var(--spacing-2xl); }\n\n.me-0 { margin-inline-end: 0; }\n.me-xs { margin-inline-end: var(--spacing-xs); }\n.me-sm { margin-inline-end: var(--spacing-sm); }\n.me-md { margin-inline-end: var(--spacing-md); }\n.me-lg { margin-inline-end: var(--spacing-lg); }\n.me-xl { margin-inline-end: var(--spacing-xl); }\n.me-2xl { margin-inline-end: var(--spacing-2xl); }\n\n/* الهوامش الداخلية (Padding) */\n.p-0 { padding: 0; }\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n.p-xl { padding: var(--spacing-xl); }\n.p-2xl { padding: var(--spacing-2xl); }\n\n.px-0 { padding-left: 0; padding-right: 0; }\n.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }\n.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }\n.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }\n.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }\n.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }\n.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }\n\n.py-0 { padding-top: 0; padding-bottom: 0; }\n.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }\n.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }\n.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }\n.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }\n.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }\n.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }\n\n.ps-0 { padding-inline-start: 0; }\n.ps-xs { padding-inline-start: var(--spacing-xs); }\n.ps-sm { padding-inline-start: var(--spacing-sm); }\n.ps-md { padding-inline-start: var(--spacing-md); }\n.ps-lg { padding-inline-start: var(--spacing-lg); }\n.ps-xl { padding-inline-start: var(--spacing-xl); }\n.ps-2xl { padding-inline-start: var(--spacing-2xl); }\n\n.pe-0 { padding-inline-end: 0; }\n.pe-xs { padding-inline-end: var(--spacing-xs); }\n.pe-sm { padding-inline-end: var(--spacing-sm); }\n.pe-md { padding-inline-end: var(--spacing-md); }\n.pe-lg { padding-inline-end: var(--spacing-lg); }\n.pe-xl { padding-inline-end: var(--spacing-xl); }\n.pe-2xl { padding-inline-end: var(--spacing-2xl); }\n\n/* ==================== الأحجام ==================== */\n.w-full {\n    width: 100%;\n}\n\n.w-auto {\n    width: auto;\n}\n\n.h-full {\n    height: 100%;\n}\n\n.h-auto {\n    height: auto;\n}\n\n.min-h-screen {\n    min-height: 100vh;\n}\n\n.max-w-full {\n    max-width: 100%;\n}\n\n/* ==================== الموضع ==================== */\n.relative {\n    position: relative;\n}\n\n.absolute {\n    position: absolute;\n}\n\n.fixed {\n    position: fixed;\n}\n\n.sticky {\n    position: sticky;\n}\n\n.top-0 {\n    top: 0;\n}\n\n.bottom-0 {\n    bottom: 0;\n}\n\n.inset-0 {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n}\n\n/* ==================== الشفافية ==================== */\n.opacity-0 { opacity: var(--opacity-0); }\n.opacity-25 { opacity: var(--opacity-25); }\n.opacity-50 { opacity: var(--opacity-50); }\n.opacity-75 { opacity: var(--opacity-75); }\n.opacity-100 { opacity: var(--opacity-100); }\n\n/* ==================== الـ Z-Index ==================== */\n.z-dropdown { z-index: var(--z-index-dropdown); }\n.z-sticky { z-index: var(--z-index-sticky); }\n.z-fixed { z-index: var(--z-index-fixed); }\n.z-modal-backdrop { z-index: var(--z-index-modal-backdrop); }\n.z-modal { z-index: var(--z-index-modal); }\n.z-popover { z-index: var(--z-index-popover); }\n.z-tooltip { z-index: var(--z-index-tooltip); }\n\n/* ==================== الحدود ==================== */\n.border {\n    border: var(--border-width) solid var(--color-border);\n}\n\n.border-t {\n    border-top: var(--border-width) solid var(--color-border);\n}\n\n.border-b {\n    border-bottom: var(--border-width) solid var(--color-border);\n}\n\n.border-s {\n    border-inline-start: var(--border-width) solid var(--color-border);\n}\n\n.border-e {\n    border-inline-end: var(--border-width) solid var(--color-border);\n}\n\n.rounded {\n    border-radius: var(--border-radius-md);\n}\n\n.rounded-sm {\n    border-radius: var(--border-radius-sm);\n}\n\n.rounded-lg {\n    border-radius: var(--border-radius-lg);\n}\n\n.rounded-xl {\n    border-radius: var(--border-radius-xl);\n}\n\n.rounded-2xl {\n    border-radius: var(--border-radius-2xl);\n}\n\n.rounded-full {\n    border-radius: var(--border-radius-full);\n}\n\n/* ==================== الظلال ==================== */\n.shadow-sm {\n    box-shadow: var(--shadow-sm);\n}\n\n.shadow-md {\n    box-shadow: var(--shadow-md);\n}\n\n.shadow-lg {\n    box-shadow: var(--shadow-lg);\n}\n\n.shadow-xl {\n    box-shadow: var(--shadow-xl);\n}\n\n.shadow-none {\n    box-shadow: none;\n}\n\n/* ==================== الخلفيات ==================== */\n.bg-primary {\n    background-color: var(--color-primary);\n}\n\n.bg-secondary {\n    background-color: var(--color-secondary);\n}\n\n.bg-success {\n    background-color: var(--color-success);\n}\n\n.bg-danger {\n    background-color: var(--color-danger);\n}\n\n.bg-warning {\n    background-color: var(--color-warning);\n}\n\n.bg-info {\n    background-color: var(--color-info);\n}\n\n.bg-light {\n    background-color: var(--color-bg-secondary);\n}\n\n.bg-dark {\n    background-color: var(--color-bg-tertiary);\n}\n\n/* ==================== الألوان النصية ==================== */\n.text-primary {\n    color: var(--color-primary);\n}\n\n.text-secondary {\n    color: var(--color-secondary);\n}\n\n.text-success {\n    color: var(--color-success);\n}\n\n.text-danger {\n    color: var(--color-danger);\n}\n\n.text-warning {\n    color: var(--color-warning);\n}\n\n.text-info {\n    color: var(--color-info);\n}\n\n.text-muted {\n    color: var(--color-text-muted);\n}\n\n/* ==================== محاذاة النصوص ==================== */\n.text-start {\n    text-align: start;\n}\n\n.text-center {\n    text-align: center;\n}\n\n.text-end {\n    text-align: end;\n}\n\n.text-justify {\n    text-align: justify;\n}\n\n/* ==================== أوزان الخطوط ==================== */\n.font-light {\n    font-weight: var(--font-weight-light);\n}\n\n.font-normal {\n    font-weight: var(--font-weight-normal);\n}\n\n.font-medium {\n    font-weight: var(--font-weight-medium);\n}\n\n.font-semibold {\n    font-weight: var(--font-weight-semibold);\n}\n\n.font-bold {\n    font-weight: var(--font-weight-bold);\n}\n\n/* ==================== أحجام الخطوط ==================== */\n.text-xs { font-size: var(--font-size-xs); }\n.text-sm { font-size: var(--font-size-sm); }\n.text-base { font-size: var(--font-size-base); }\n.text-lg { font-size: var(--font-size-lg); }\n.text-xl { font-size: var(--font-size-xl); }\n.text-2xl { font-size: var(--font-size-2xl); }\n.text-3xl { font-size: var(--font-size-3xl); }\n.text-4xl { font-size: var(--font-size-4xl); }\n\n/* ==================== نقاط التوقف (Responsive) ==================== */\n@media (max-width: 576px) {\n    .grid-cols-2,\n    .grid-cols-3,\n    .grid-cols-4,\n    .grid-cols-5,\n    .grid-cols-6,\n    .grid-cols-12 {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n}\n\n@media (min-width: 576px) and (max-width: 768px) {\n    .grid-cols-3,\n    .grid-cols-4,\n    .grid-cols-5,\n    .grid-cols-6,\n    .grid-cols-12 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n}\n\n@media (min-width: 768px) and (max-width: 992px) {\n    .grid-cols-4,\n    .grid-cols-5,\n    .grid-cols-6,\n    .grid-cols-12 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n}\n\n@media (min-width: 992px) {\n    .grid-cols-5,\n    .grid-cols-6,\n    .grid-cols-12 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n}\n