@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/layout.css
| الوصف:
|   أنماط التخطيط العامة المشتركة في المنصة.
|
| الهدف:
|   - توحيد الحاويات والمسافات الرأسية والأفقية.
|   - توفير بنية Layout مرنة وقابلة لإعادة الاستخدام.
|   - دعم أقسام الصفحات، الأغلفة، الشبكات، الأعمدة، والمحاذاة.
|   - دعم responsive layout بشكل احترافي على الجوال والتابلت وسطح المكتب.
|
| القواعد:
|   - هذا الملف خاص بالتخطيطات العامة فقط.
|   - لا توضع فيه أنماط صفحات محددة أو مكونات متخصصة.
|   - لا توضع فيه ألوان أو سلوكيات تخص عنصرًا بعينه إلا بقدر يخدم الـ layout.
|   - يعتمد على tokens.css و base.css.
|--------------------------------------------------------------------------
*/

/* -------------------------------------------------------------------------
 * Root App Shell
 * ---------------------------------------------------------------------- */
.app {
  min-height: 100vh;
  background-color: var(--color-bg-body);
}

.app__viewport {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.app__header {
  position: relative;
  z-index: var(--z-index-sticky);
  flex: 0 0 auto;
}

.app__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.app__footer {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Containers
 * ---------------------------------------------------------------------- */
.container,
.container-fluid,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl,
.container-narrow,
.container-reading,
.container-wide {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

.container-fluid {
  max-width: 100%;
}

.container-xs {
  max-width: var(--container-xs);
}

.container-sm {
  max-width: var(--container-sm);
}

.container,
.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-xl {
  max-width: var(--container-xl);
}

.container-2xl {
  max-width: var(--container-2xl);
}

.container-narrow {
  max-width: var(--content-narrow-width);
}

.container-reading {
  max-width: var(--content-reading-width);
}

.container-wide {
  max-width: var(--content-wide-width);
}

/* -------------------------------------------------------------------------
 * Page Wrapper
 * ---------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.page__inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.page__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  gap: var(--page-gap);
}

.page__header,
.page__body,
.page__footer {
  min-width: 0;
}

.page__header {
  margin-bottom: var(--space-6);
}

.page__footer {
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-padding-y);
}

.section--sm {
  padding-block: var(--section-padding-y-sm);
}

.section--lg {
  padding-block: var(--section-padding-y-lg);
}

.section--none {
  padding-block: 0;
}

.section--top-none {
  padding-top: 0;
}

.section--bottom-none {
  padding-bottom: 0;
}

.section--page-start {
  padding-top: var(--space-8);
}

.section--page-end {
  padding-bottom: var(--space-10);
}

.section__inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-6);
}

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.section__body,
.section__footer {
  min-width: 0;
}

.section__footer {
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
 * Surface Blocks
 * ---------------------------------------------------------------------- */
.surface {
  background-color: var(--color-bg-surface);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-2xl);
}

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

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

.surface--bordered {
  border-color: var(--color-border-default);
}

.surface--shadow {
  box-shadow: var(--shadow-sm);
}

.surface--compact {
  padding: var(--space-4);
}

.surface--comfortable {
  padding: var(--space-6);
}

.surface--spacious {
  padding: var(--space-8);
}

/* -------------------------------------------------------------------------
 * Stacks
 * ---------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--stack-gap-md);
}

.stack--xs {
  gap: var(--space-1);
}

.stack--sm {
  gap: var(--stack-gap-sm);
}

.stack--md {
  gap: var(--stack-gap-md);
}

.stack--lg {
  gap: var(--stack-gap-lg);
}

.stack--xl {
  gap: var(--stack-gap-xl);
}

.stack--2xl {
  gap: var(--space-10);
}

.stack--none {
  gap: 0;
}

/* -------------------------------------------------------------------------
 * Cluster / Inline Groups
 * ---------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cluster--xs {
  gap: var(--space-1);
}

.cluster--sm {
  gap: var(--space-2);
}

.cluster--md {
  gap: var(--space-3);
}

.cluster--lg {
  gap: var(--space-4);
}

.cluster--xl {
  gap: var(--space-6);
}

.cluster--start {
  justify-content: flex-start;
}

.cluster--center {
  justify-content: center;
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--between {
  justify-content: space-between;
}

.cluster--stretch {
  align-items: stretch;
}

.cluster--nowrap {
  flex-wrap: nowrap;
}

/* -------------------------------------------------------------------------
 * Rows
 * ---------------------------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap-md);
  min-width: 0;
}

.row--sm {
  gap: var(--grid-gap-sm);
}

.row--md {
  gap: var(--grid-gap-md);
}

.row--lg {
  gap: var(--grid-gap-lg);
}

.row--xl {
  gap: var(--grid-gap-xl);
}

.row--center {
  align-items: center;
}

.row--start {
  align-items: flex-start;
}

.row--end {
  align-items: flex-end;
}

.row--between {
  justify-content: space-between;
}

.row--nowrap {
  flex-wrap: nowrap;
}

.row__item {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Split Layout
 * ---------------------------------------------------------------------- */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.split__main,
.split__aside {
  min-width: 0;
}

.split__main {
  flex: 1 1 auto;
}

.split__aside {
  flex: 0 0 auto;
}

.split--center {
  align-items: center;
}

.split--start {
  align-items: flex-start;
}

.split--end {
  align-items: flex-end;
}

.split--reverse {
  flex-direction: column-reverse;
}

/* -------------------------------------------------------------------------
 * Sidebar Layout
 * ---------------------------------------------------------------------- */
.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-width: 0;
}

.sidebar-layout__sidebar,
.sidebar-layout__content {
  min-width: 0;
}

.sidebar-layout__content {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Holy Grail / Main + Aside + Aside
 * ---------------------------------------------------------------------- */
.main-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-width: 0;
}

.main-layout__start,
.main-layout__content,
.main-layout__end {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Grid System
 * ---------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--grid-gap-md);
  min-width: 0;
}

.grid--tight {
  gap: var(--grid-gap-sm);
}

.grid--normal {
  gap: var(--grid-gap-md);
}

.grid--loose {
  gap: var(--grid-gap-lg);
}

.grid--xl {
  gap: var(--grid-gap-xl);
}

.grid--1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--2,
.grid--3,
.grid--4,
.grid--5,
.grid--6,
.grid--12 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid__item {
  min-width: 0;
}

.col-span-1,
.col-span-2,
.col-span-3,
.col-span-4,
.col-span-5,
.col-span-6,
.col-span-7,
.col-span-8,
.col-span-9,
.col-span-10,
.col-span-11,
.col-span-12 {
  grid-column: auto;
}

/* -------------------------------------------------------------------------
 * Auto-fit Grids
 * ---------------------------------------------------------------------- */
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--grid-gap-md);
  min-width: 0;
}

.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--grid-gap-md);
  min-width: 0;
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--grid-gap-lg);
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Content Width Helpers
 * ---------------------------------------------------------------------- */
.content-narrow {
  max-width: var(--content-narrow-width);
}

.content-reading {
  max-width: var(--content-reading-width);
}

.content-wide {
  max-width: var(--content-wide-width);
}

.content-full {
  max-width: 100%;
}

.content-centered {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Flow Utilities
 * ---------------------------------------------------------------------- */
.flow > * + * {
  margin-top: var(--space-4);
}

.flow--sm > * + * {
  margin-top: var(--space-3);
}

.flow--md > * + * {
  margin-top: var(--space-4);
}

.flow--lg > * + * {
  margin-top: var(--space-6);
}

.flow--xl > * + * {
  margin-top: var(--space-8);
}

.flow--2xl > * + * {
  margin-top: var(--space-10);
}

/* -------------------------------------------------------------------------
 * Divider Blocks
 * ---------------------------------------------------------------------- */
.layout-divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: var(--border-width-1) solid var(--color-border-default);
  margin: 0;
}

.layout-divider--soft {
  border-top-color: var(--color-border-soft);
}

.layout-divider--strong {
  border-top-color: var(--color-border-strong);
}

/* -------------------------------------------------------------------------
 * Hero Layout
 * ---------------------------------------------------------------------- */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
  padding-block: var(--hero-padding-y);
}

.hero-layout__content,
.hero-layout__media {
  min-width: 0;
}

.hero-layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--content-narrow-width);
}

.hero-layout__media {
  max-width: var(--hero-media-max-width);
  width: 100%;
  justify-self: center;
}

/* -------------------------------------------------------------------------
 * Article / Reading Layout
 * ---------------------------------------------------------------------- */
.article-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  width: 100%;
}

.article-layout__header,
.article-layout__body,
.article-layout__footer {
  min-width: 0;
}

.article-layout__body {
  max-width: var(--content-reading-width);
}

/* -------------------------------------------------------------------------
 * Dashboard Layout
 * ---------------------------------------------------------------------- */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-width: 0;
}

.dashboard-layout__sidebar,
.dashboard-layout__main,
.dashboard-layout__panel {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Sticky Helpers
 * ---------------------------------------------------------------------- */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.sticky-header-offset {
  top: var(--header-height);
}

.sticky-with-gap {
  top: calc(var(--header-height) + var(--space-4));
}

/* -------------------------------------------------------------------------
 * Aspect Ratio Helpers
 * ---------------------------------------------------------------------- */
.aspect-1x1 {
  aspect-ratio: 1 / 1;
}

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

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

.aspect-21x9 {
  aspect-ratio: 21 / 9;
}

/* -------------------------------------------------------------------------
 * Width Helpers
 * ---------------------------------------------------------------------- */
.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.max-w-100 {
  max-width: 100%;
}

.min-w-0 {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Alignment Helpers
 * ---------------------------------------------------------------------- */
.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

/* -------------------------------------------------------------------------
 * Mobile First Responsive Rules
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .col-span-2 {
    grid-column: span 2;
  }

  .col-span-3 {
    grid-column: span 3;
  }

  .col-span-4 {
    grid-column: span 4;
  }

  .col-span-5 {
    grid-column: span 5;
  }

  .col-span-6 {
    grid-column: span 6;
  }

  .col-span-7 {
    grid-column: span 7;
  }

  .col-span-8 {
    grid-column: span 8;
  }

  .col-span-9 {
    grid-column: span 9;
  }

  .col-span-10 {
    grid-column: span 10;
  }

  .col-span-11 {
    grid-column: span 11;
  }

  .col-span-12 {
    grid-column: span 12;
  }

  .split {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .split--reverse {
    flex-direction: row-reverse;
  }

  .split__aside {
    width: min(22rem, 32%);
  }

  .sidebar-layout {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }

  .main-layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sidebar-layout--wide {
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  }

  .main-layout--three {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(16rem, 20rem);
  }

  .dashboard-layout--with-sidebar {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }

  .dashboard-layout--with-panels {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  }

  .surface--comfortable {
    padding: var(--space-6);
  }

  .surface--spacious {
    padding: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .hero-layout {
    gap: var(--space-12);
  }

  .page__header {
    margin-bottom: var(--space-8);
  }

  .page__footer {
    margin-top: var(--space-10);
  }

  .section__inner {
    gap: var(--space-8);
  }
}

/* -------------------------------------------------------------------------
 * Mobile Refinements
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .surface--comfortable {
    padding: var(--space-4);
  }

  .surface--spacious {
    padding: var(--space-5);
  }

  .page__header {
    margin-bottom: var(--space-5);
  }

  .page__footer {
    margin-top: var(--space-6);
  }

  .section__inner {
    gap: var(--space-5);
  }

  .hero-layout {
    gap: var(--space-6);
  }

  .row--nowrap {
    flex-wrap: wrap;
  }

  .cluster--nowrap {
    flex-wrap: wrap;
  }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app,
  .page,
  .section,
  .surface,
  .hero-layout,
  .grid,
  .row,
  .split,
  .sidebar-layout,
  .main-layout,
  .dashboard-layout {
    transition: none !important;
    animation: none !important;
  }
}