/**
 * ============================================================================
 * FILE: assets/css/global.css
 * PURPOSE: Global layout, base styles, skeleton, animations
 * DEPENDS ON: tokens.css (must load before this file)
 * VERSION: 2.0.0
 * ============================================================================
 */

/* ── SECTION START: Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-base, 'Vazirmatn', sans-serif);
  background:  var(--color-bg-base);
  color:       var(--color-text-primary);
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
  font-size: var(--text-base);
}

a   { text-decoration: none; color: inherit; }
button { background: transparent; border: none; cursor: pointer; font-family: inherit; }
ul  { list-style: none; }
img { max-width: 100%; display: block; }
/* ── SECTION END: Reset ── */

/* ── SECTION START: Layout System ── */
.ex-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar */
.ex-sidebar-section {
  width:      var(--sidebar-width);
  background: var(--color-bg-surface);
  height:     100vh;
  position:   fixed;
  top:        0;
  z-index:    var(--z-sidebar);
  transition: width var(--transition-normal), transform var(--transition-normal);
}

html[dir="rtl"] .ex-sidebar-section {
  right:        0;
  border-left:  1px solid var(--color-border-dim);
  border-right: none;
}
html[dir="ltr"] .ex-sidebar-section {
  left:         0;
  border-right: 1px solid var(--color-border-dim);
  border-left:  none;
}

/* Main wrapper */
.ex-main-wrapper {
  flex-grow:       1;
  display:         flex;
  flex-direction:  column;
  width:           100%;
  min-height:      100vh;
  transition:      padding var(--transition-normal);
}

html[dir="rtl"] .ex-main-wrapper { padding-right: var(--sidebar-width); }
html[dir="ltr"] .ex-main-wrapper { padding-left:  var(--sidebar-width); }

/* Topbar */
.ex-topbar-section {
  height:           var(--topbar-height);
  background:       rgba(17, 17, 22, 0.92);
  backdrop-filter:  blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:    1px solid var(--color-border-dim);
  position:         sticky;
  top:              0;
  /* topbar باید بالاتر از overlay سوئیچ نقش (1500) باشد */
  z-index:          2000;
}

/* Content area */
.ex-content-section {
  padding:         var(--content-padding);
  flex-grow:       1;
  overflow-y:      auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* ── SECTION END: Layout System ── */

/* ── SECTION START: Mobile Layout (min-width pattern) ── */
/* Mobile first: sidebar hidden, no padding */
.ex-sidebar-section { transform: translateX(100%); }
html[dir="ltr"] .ex-sidebar-section { transform: translateX(-100%); }

html[dir="rtl"] .ex-main-wrapper { padding-right: 0; }
html[dir="ltr"] .ex-main-wrapper { padding-left:  0; }

.ex-content-section { padding: var(--space-md); }
.ex-toast-container {
  bottom: var(--space-md);
  left:   var(--space-md);
  right:  var(--space-md);
  align-items: center;
}

/* Desktop: show sidebar, restore padding */
@media (min-width: 992px) {
  .ex-sidebar-section {
    transform: none !important;
    box-shadow: none !important;
  }
  html[dir="rtl"] .ex-main-wrapper { padding-right: var(--sidebar-width); }
  html[dir="ltr"] .ex-main-wrapper { padding-left:  var(--sidebar-width); }

  .ex-content-section  { padding: var(--space-lg); }
  .ex-toast-container  { right: auto; align-items: flex-start; }
  .ex-mobile-bottomnav { display: none !important; }
}
/* ── SECTION END: Mobile Layout ── */

/* ── SECTION START: Overlay ── */
.exs-mobile-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.6);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:          var(--z-overlay);
  opacity:          0;
  transition:       opacity var(--transition-normal);
}
.exs-mobile-overlay.show { display: block; opacity: 1; }

.ex-toast-container  { position: fixed; bottom: var(--space-lg); left: var(--space-lg); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; }
.ex-modal-container  { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); display: none; align-items: center; justify-content: center; }
/* ── SECTION END: Overlay ── */

/* ── SECTION START: Skeleton Loading ── */
.skeleton-wrapper { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }
.skel {
  background: var(--color-bg-card-alt);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.skel-avatar  { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-title   { width: 40%;  height: 28px; border-radius: 6px; }
.skel-text    { width: 100%; height: 14px; border-radius: 4px; }
.skel-flex-row{ display: flex; align-items: center; gap: var(--space-md); width: 100%; }
.skel-grid-3  { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px,30vw,250px), 1fr)); gap: var(--space-md); width: 100%; }
.skel-w-sm    { width: 30%; } .skel-w-md { width: 60%; } .skel-w-lg { width: 85%; }
.box-sm  { height: 60px;  width: 100%; border-radius: var(--radius-md); }
.box-md  { height: 140px; width: 100%; border-radius: var(--radius-md); }
.box-lg  { height: 300px; width: 100%; border-radius: var(--radius-lg); }
/* ── SECTION END: Skeleton Loading ── */

/* ── SECTION START: Bottom Navigation ── */
.ex-mobile-bottomnav {
  display:          none;
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  height:           var(--bottomnav-height, 64px);
  background:       var(--color-bg-surface);
  border-top:       1px solid var(--color-border-dim);
  z-index:          1100;
  padding:          0 var(--space-sm) env(safe-area-inset-bottom, var(--space-sm));
  backdrop-filter:  blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 992px) { .ex-mobile-bottomnav { display: none !important; } }
/* Mobile: show bottom nav */
.ex-mobile-bottomnav { display: block; }
@media (min-width: 992px) { .ex-mobile-bottomnav { display: none !important; } }

.ex-mobile-bottomnav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  height:          100%;
  gap:             var(--space-xs);
}

.ex-bn-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  flex:            1;
  padding:         var(--space-xs) var(--space-2xs);
  border-radius:   var(--radius-md);
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      all var(--transition-fast);
  position:        relative;
  min-width:       0;
  min-height:      var(--touch-target-min, 44px);
}
.ex-bn-item.active         { color: var(--color-gold); }
.ex-bn-item.active .ex-bn-icon { background: var(--color-gold-glow); }

.ex-bn-icon {
  width:           38px;
  height:          28px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-base);
  transition:      background var(--transition-fast);
}
.ex-bn-label {
  font-size:     var(--text-xs);
  font-weight:   var(--font-weight-semibold);
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     clamp(40px, 12vw, 60px);
}
.ex-bn-badge {
  position:    absolute;
  top:         0; right: 0;
  min-width:   16px;
  height:      16px;
  border-radius: var(--radius-full);
  background:  var(--color-danger, var(--color-danger));
  color:       #fff;
  font-size:   var(--text-xs);
  font-weight: var(--font-weight-black);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0 var(--space-2xs);
  border:      2px solid var(--color-bg-surface);
}
.ex-bn-menu-btn {
  background:  var(--color-gold);
  width:       40px;
  height:      40px;
  border-radius: var(--radius-md);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #000;
  font-size:   var(--text-base);
  box-shadow:  var(--shadow-gold);
  flex-shrink: 0;
  min-height:  unset;
  min-width:   unset;
}
@media (min-width: 992px) {
  .ex-content-section { padding-bottom: var(--space-lg); }
}
/* ── SECTION END: Bottom Navigation ── */

/* ── SECTION START: Animations ── */
.fade-in { animation: fadeIn var(--transition-normal) ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── SECTION END: Animations ── */

/* ── SECTION START: Safe Area (iOS notch / home indicator) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .ex-mobile-bottomnav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottomnav-height, 64px) + env(safe-area-inset-bottom));
  }
  @media (max-width: 991px) {
    .ex-content-section {
      padding-bottom: calc(var(--bottomnav-height, 64px) + env(safe-area-inset-bottom) + var(--space-lg));
    }
  }
}
/* ── SECTION END: Safe Area ── */

/* ── SECTION START: Utilities ── */
.rbac-hidden       { display: none !important; }
body.modal-open    { overflow: hidden; }
.text-gold         { color: var(--color-gold); }
.text-success      { color: var(--color-success); }
.text-danger       { color: var(--color-danger); }
.text-muted        { color: var(--color-text-muted); }

/* Touch optimisations */
button, a, [role="button"] { -webkit-tap-highlight-color: rgba(201,168,76,0.1); }
.ex-bn-item, .exs-menu-link { -webkit-user-select: none; user-select: none; }
/* ── SECTION END: Utilities ── */

/* END OF FILE: global.css */