/**
 * Layout Styles
 * تنسيقات التخطيط والهيكل العام
 */

/* Prevent horizontal scrolling */
html,
body {
  overflow-x: hidden;
}

/* ==========================================
   NAVBAR - App Navbar with Brand Identity
   ========================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background: var(--color-bg-card) !important;
  border-bottom: 3px solid var(--color-brand-primary) !important;
  box-shadow: var(--shadow-sm) !important;
  z-index: var(--z-index-fixed);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  margin-bottom: 0 !important;
}

/* Override Bootstrap navbar classes */
.navbar.navbar-expand-sm {
  flex-wrap: nowrap;
}

.navbar.navbar-light {
  background: var(--color-bg-card) !important;
}

.navbar.bg-white {
  background: var(--color-bg-card) !important;
}

.navbar-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

/* 
 * تعديل: تحسين المسافات على الجوال بين العناصر
 * ضمان عدم ضغط الآفاتار والأيقونات
 */
@media (max-width: 768px) {
  .navbar .container-fluid {
    gap: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  text-decoration: none;
  flex-direction: row;
}

.navbar-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}

.navbar-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Changed from contain to cover to ensure it fills the circle */
  display: block;
  border-radius: 50%;
  /* Make it circular */
}

/* Fallback icon if logo image not found */
.navbar-brand-logo i {
  font-size: var(--font-size-2xl);
  color: var(--color-brand-primary);
  display: none;
}

.navbar-brand-logo:has(img) i {
  display: none;
}

.navbar-brand>div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar-brand-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  font-family: var(--font-family-headings);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.navbar-brand-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.navbar-brand:hover .navbar-brand-title {
  color: var(--color-brand-accent);
}


.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* Bootstrap compatibility */
.navbar-nav.flex-grow-1 {
  flex: 1 1 auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  /* Improved contrast for accessibility */
  color: #333;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-brand-primary);
  background: var(--color-bg-hover);
}

.nav-link.active {
  color: var(--color-brand-primary);
  background: rgba(129, 142, 77, 0.1);
}

/* Navbar icons */
.navbar-icons {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.navbar-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.navbar-icon:hover {
  color: var(--color-brand-primary);
  background: var(--color-bg-hover);
}

.navbar-icon .badge-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-status-error);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-card);
}

/* Navbar toggle for mobile */
.navbar-toggler {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-bg-hover);
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
}

.navbar-toggler:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-brand-primary);
}

.navbar-toggler-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  position: relative;
  transition: all var(--transition-fast);
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  position: absolute;
  transition: all var(--transition-fast);
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  bottom: -8px;
}

/* Bootstrap navbar-collapse compatibility */
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-collapse.collapse {
  display: none;
}

.navbar-collapse.collapse.show,
.navbar-collapse.collapsing {
  display: flex;
}

@media (min-width: 576px) {
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-collapse {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    left: 0;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md);
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    z-index: var(--z-index-dropdown);
    flex-direction: column;
    align-items: stretch;
  }

  /* Ensure navbar-icons are always visible even when collapse is hidden */
  .navbar-expand-sm .navbar-collapse.collapse:not(.show) {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    width: auto;
    flex-basis: auto;
    flex-grow: 0;
  }

  .navbar-expand-sm .navbar-collapse.collapse:not(.show) .navbar-nav {
    display: none;
  }

  .navbar-expand-sm .navbar-collapse.collapse:not(.show) .navbar-icons {
    display: flex !important;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-xs);
  }

  .navbar-expand-sm .nav-item {
    width: 100%;
  }

  .navbar-expand-sm .nav-link {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .navbar-toggler {
    display: flex;
  }

  /* 
   * تعديل: تحسين عرض العنوان على الجوال - اسم مختصر بدون ellipsis
   * لضمان ظهور الآفاتار والأيقونات بوضوح
   */
  .navbar-brand-title {
    font-size: var(--font-size-sm);
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }

  .navbar-brand-subtitle {
    display: none;
  }

  .navbar-brand-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  /* 
   * تعديل: تحسين المسافات بين الشعار والعنوان على الجوال
   */
  .navbar-brand {
    gap: var(--spacing-sm);
    flex: 0 1 auto;
    min-width: 0;
    /* يسمح للعنوان بالانكماش */
  }

  /* 
   * تعديل: تحسين عرض أيقونات المستخدم على الجوال
   * ضمان ظهور الآفاتار والإشعارات بوضوح بدون ضغط
   */
  .navbar-user-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  /* Navbar icons - ensure visibility on small screens */
  .navbar-icons {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  /* زر Sidebar البديل على الجوال - يظهر في أيقونات المستخدم */
  .mobile-sidebar-toggle {
    display: flex !important;
  }

  .navbar-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .navbar-icon i {
    font-size: 16px;
  }

  /* Fix dropdown menu on small screens */
  .navbar-icons .dropdown {
    position: relative;
  }

  /* 
   * تعديل: إصلاح القائمة المنسدلة للمستخدم على الجوال
   * ضمان ظهورها داخل الشاشة - استخدام fixed مع موضع محدد
   */
  .navbar-icons .dropdown-menu {
    position: fixed !important;
    top: calc(var(--navbar-height) + var(--spacing-xs)) !important;
    left: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1050 !important;
    /* أعلى من navbar */
    min-width: auto !important;
    max-width: calc(100vw - (var(--spacing-sm) * 2)) !important;
    width: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Mobile typography and buttons */
  body {
    font-size: 0.9rem;
  }

  .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    min-height: 40px;
    min-width: 40px;
  }

  .navbar-guest-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 999px;
  }

  .sidebar-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    min-height: 40px;
  }
}

/* ==========================================
   RIGHT SIDEBAR (دائماً على اليمين) - Brand Styled
   ========================================== */
.sidebar {
  position: fixed;
  top: var(--navbar-height);
  right: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--navbar-height));
  background: var(--color-brand-accent);
  border-left: 1px solid rgba(207, 176, 81, 0.3);
  overflow-y: auto;
  z-index: var(--z-index-sticky);
  transition: right var(--transition-normal);
  box-shadow: -2px 0 8px rgba(0, 92, 58, 0.15);
}

/* Sidebar visibility is controlled by JavaScript for anonymous users */
/* See site.js for the logic that hides sidebar when #sidebarToggle doesn't exist */

.sidebar-header {
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.sidebar-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-family-headings);
}

.sidebar-nav {
  padding: var(--spacing-md) 0;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item {
  margin-bottom: var(--spacing-xs);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-white) !important;
  text-decoration: none;
  border-radius: var(--radius-md);
  margin: 0 var(--spacing-sm);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
  transform: translateX(-4px);
}

.sidebar-link.active,
.sidebar-link:active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-white);
  font-weight: var(--font-weight-semibold);
  border-right: 3px solid var(--color-brand-secondary);
  border-left: 3px solid var(--color-brand-secondary);
}

.sidebar-link i {
  width: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-text-white);
}

.sidebar-link span {
  flex: 1;
}

.sidebar-text {
  flex: 1;
}

/* Scrollbar للـ sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   SIDEBAR SECTIONS - Collapsible Sections
   ========================================== */
.sidebar-section {
  margin-bottom: var(--spacing-xs);
}

.sidebar-section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-text-white) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: right;
  margin: 0 var(--spacing-sm);
  border-radius: var(--radius-md);
}

.sidebar-section-header:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
}

.sidebar-section-header span {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.sidebar-section-header i {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-section-arrow {
  transition: transform var(--transition-fast);
  font-size: 14px;
  transform: rotate(-90deg);
  /* يشير للأسفل عندما يكون القسم مفتوحاً */
}

.sidebar-section.collapsed .sidebar-section-arrow {
  transform: rotate(0deg);
  /* يشير لليسار (اليمين في RTL) عندما يكون القسم مغلقاً */
}

.sidebar-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal) ease-in-out;
}

.sidebar-section:not(.collapsed) .sidebar-section-content {
  max-height: 1000px;
}

/* ==========================================
   SIDEBAR TOGGLE BUTTON
   ========================================== */
.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-bg-hover);
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  margin-left: var(--spacing-md);
}

.sidebar-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.sidebar-toggle i {
  font-size: var(--font-size-lg);
}

/* ==========================================
   SIDEBAR OVERLAY
   ========================================== */
.sidebar-overlay {
  display: none;
  /* Hidden by default on desktop */
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  /* Below modal-backdrop (1040) and modal (1050) */
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

body.sidebar-open .sidebar-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* على الشاشات الصغيرة - Sidebar منسدل */
/* 
 * تعديل: إخفاء زر sidebar-toggle من الهيدر على الجوال لإتاحة مساحة أكبر
 * للآفاتار وأيقونات الحساب. تم إضافة زر بديل في _LoginPartial.
 */
@media (max-width: 768px) {
  .sidebar-toggle {
    display: none !important;
  }

  /* زر Sidebar البديل في أيقونات المستخدم - يظهر فقط على الجوال */
  .mobile-sidebar-toggle {
    display: flex !important;
  }

  .sidebar {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    width: min(80vw, var(--sidebar-width));
    max-width: 320px;
    /* حد أقصى لضمان عدم الخروج من الإطار */
    height: calc(100vh - var(--navbar-height));
    transform: translateX(100%);
    /* مخفي افتراضياً خارج الشاشة من اليمين */
    transition: transform var(--transition-normal);
    z-index: 910;
    /* Above overlay (900) */
    overflow-y: auto;
    overflow-x: hidden;
    /* منع التمرير الأفقي */
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* على الشاشات الكبيرة - Sidebar ثابت */
@media (min-width: 769px) {
  .sidebar-toggle {
    display: none;
  }

  /* إخفاء زر Sidebar البديل على الديسكتوب */
  .mobile-sidebar-toggle {
    display: none !important;
  }

  .sidebar {
    right: 0;
    width: var(--sidebar-width);
    transform: translateX(0);
    top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    z-index: var(--z-index-sticky);
  }

  .app-main {
    margin-right: var(--sidebar-width);
  }

  .sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    z-index: 900 !important;
    /* Still below modal even when hidden */
  }

  body.sidebar-open .sidebar-overlay {
    display: none !important;
  }
}

/* ==========================================
   APP SHELL - Grid Layout with Sidebar
   ========================================== */
.app-shell {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
  transition: grid-template-columns var(--transition-normal);
}

/* على الشاشات الصغيرة - Sidebar مخفي */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.app-main {
  position: relative;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-main);
  overflow: visible;
  /* IMPORTANT: do not clip content */
  min-height: calc(100vh - var(--navbar-height));
  margin-right: var(--sidebar-width);
  transition: margin-right var(--transition-normal);
}

/* Wrapper inside app-main - canonical definition */
.app-main>.wrapper {
  display: block;
  visibility: visible;
  opacity: 1;
  position: relative;
  /* z-index removed to prevent modal interaction issues */
  min-height: calc(100vh - var(--navbar-height) - 3rem);
  padding-bottom: 2rem;
  width: 100%;
}

/* Content inside wrapper */
.app-main>.wrapper>.content {
  width: 100%;
  position: relative;
  /* z-index removed to prevent modal interaction issues */
  display: block;
  visibility: visible;
  opacity: 1;
}

.main-content {
  padding: var(--spacing-lg);
  overflow-x: hidden;
}

/* Remove old body > .wrapper - should not be used anymore */
/* Legacy body > .wrapper is not used in new layout structure */

/* على الشاشات الصغيرة - لا margin للـ sidebar */
@media (max-width: 768px) {
  .app-main {
    padding: var(--spacing-md);
    margin-right: 0;
  }

  .main-content {
    margin-right: 0;
  }

  .app-main>.wrapper {
    min-height: calc(100vh - var(--navbar-height) - 2rem);
    padding-bottom: var(--spacing-md);
  }
}

/* ==========================================
   CONTAINER
   ========================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-lg);
}

/* ==========================================
   GRID SYSTEM
   ========================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) * -0.5);
}

.col {
  flex: 1;
  padding: 0 calc(var(--spacing-md) * 0.5);
}

/* Grid columns */
.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Responsive grid */
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ==========================================
   GRID LAYOUT
   ========================================== */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

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

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

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

@media (max-width: 768px) {

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   SECTION
   ========================================== */
.section {
  margin-bottom: var(--spacing-2xl);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  background: var(--color-bg-card);
  border-top: 1px solid #E5E7EB;
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ==========================================
   BREADCRUMB
   ========================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  list-style: none;
  padding: var(--spacing-md) 0;
  margin: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.breadcrumb-item a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-brand-primary);
}

.breadcrumb-item.active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-right: var(--spacing-sm);
  color: var(--color-text-disabled);
}

/* ==========================================
   PAGE HEADER
   ========================================== */
.page-header {
  margin-bottom: var(--spacing-2xl);
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.page-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 640px) {
  .hide-sm {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hide-md {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hide-lg {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .show-sm {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .show-md {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .show-lg {
    display: none !important;
  }
}

/* ==========================================
   SPACING UTILITIES
   ========================================== */
/* Margin */
.m-0 {
  margin: 0 !important;
}

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

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

.mr-0 {
  margin-right: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: var(--spacing-xs) !important;
}

.mt-1 {
  margin-top: var(--spacing-xs) !important;
}

.mb-1 {
  margin-bottom: var(--spacing-xs) !important;
}

.mr-1 {
  margin-right: var(--spacing-xs) !important;
}

.ml-1 {
  margin-left: var(--spacing-xs) !important;
}

.m-2 {
  margin: var(--spacing-sm) !important;
}

.mt-2 {
  margin-top: var(--spacing-sm) !important;
}

.mb-2 {
  margin-bottom: var(--spacing-sm) !important;
}

.mr-2 {
  margin-right: var(--spacing-sm) !important;
}

.ml-2 {
  margin-left: var(--spacing-sm) !important;
}

.m-3 {
  margin: var(--spacing-md) !important;
}

.mt-3 {
  margin-top: var(--spacing-md) !important;
}

.mb-3 {
  margin-bottom: var(--spacing-md) !important;
}

.mr-3 {
  margin-right: var(--spacing-md) !important;
}

.ml-3 {
  margin-left: var(--spacing-md) !important;
}

.m-4 {
  margin: var(--spacing-lg) !important;
}

.mt-4 {
  margin-top: var(--spacing-lg) !important;
}

.mb-4 {
  margin-bottom: var(--spacing-lg) !important;
}

.mr-4 {
  margin-right: var(--spacing-lg) !important;
}

.ml-4 {
  margin-left: var(--spacing-lg) !important;
}

.m-5 {
  margin: var(--spacing-xl) !important;
}

.mt-5 {
  margin-top: var(--spacing-xl) !important;
}

.mb-5 {
  margin-bottom: var(--spacing-xl) !important;
}

.mr-5 {
  margin-right: var(--spacing-xl) !important;
}

.ml-5 {
  margin-left: var(--spacing-xl) !important;
}

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

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

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

.pr-0 {
  padding-right: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: var(--spacing-xs) !important;
}

.pt-1 {
  padding-top: var(--spacing-xs) !important;
}

.pb-1 {
  padding-bottom: var(--spacing-xs) !important;
}

.pr-1 {
  padding-right: var(--spacing-xs) !important;
}

.pl-1 {
  padding-left: var(--spacing-xs) !important;
}

.p-2 {
  padding: var(--spacing-sm) !important;
}

.pt-2 {
  padding-top: var(--spacing-sm) !important;
}

.pb-2 {
  padding-bottom: var(--spacing-sm) !important;
}

.pr-2 {
  padding-right: var(--spacing-sm) !important;
}

.pl-2 {
  padding-left: var(--spacing-sm) !important;
}

.p-3 {
  padding: var(--spacing-md) !important;
}

.pt-3 {
  padding-top: var(--spacing-md) !important;
}

.pb-3 {
  padding-bottom: var(--spacing-md) !important;
}

.pr-3 {
  padding-right: var(--spacing-md) !important;
}

.pl-3 {
  padding-left: var(--spacing-md) !important;
}

.p-4 {
  padding: var(--spacing-lg) !important;
}

.pt-4 {
  padding-top: var(--spacing-lg) !important;
}

.pb-4 {
  padding-bottom: var(--spacing-lg) !important;
}

.pr-4 {
  padding-right: var(--spacing-lg) !important;
}

.pl-4 {
  padding-left: var(--spacing-lg) !important;
}

.p-5 {
  padding: var(--spacing-xl) !important;
}

.pt-5 {
  padding-top: var(--spacing-xl) !important;
}

.pb-5 {
  padding-bottom: var(--spacing-xl) !important;
}

.pr-5 {
  padding-right: var(--spacing-xl) !important;
}

.pl-5 {
  padding-left: var(--spacing-xl) !important;
}