/* ===========================================
   Layout CSS - Mise en page générale
   =========================================== */

/* ===========================================
   Container
   =========================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 768px;
}

.container-lg {
  max-width: 1024px;
}

/* ===========================================
   Header
   =========================================== */

.header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-4);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}

.header-logo img {
  height: 32px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-50);
}

.header-user-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.header-user-role {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

/* ===========================================
   Main Content
   =========================================== */

.main {
  min-height: calc(100vh - 64px);
  padding: var(--space-6) 0;
}

/* ===========================================
   Page Header
   =========================================== */

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

.page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-500);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ===========================================
   Grid System
   =========================================== */

.grid {
  display: grid;
  gap: var(--space-4);
}

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

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

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

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   Flex Utilities
   =========================================== */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

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

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

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

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

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

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

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ===========================================
   Admin Layout
   =========================================== */

.admin-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

.admin-sidebar {
  width: 250px;
  background-color: var(--color-white);
  border-right: 1px solid var(--color-gray-200);
  padding: var(--space-4);
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.admin-content {
  flex: 1;
  padding: var(--space-6);
  overflow-x: auto;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.admin-nav-item:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
}

.admin-nav-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.admin-nav-item svg {
  width: 20px;
  height: 20px;
}

/* ===========================================
   Stepper
   =========================================== */

.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.stepper-item::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background-color: var(--color-gray-200);
}

.stepper-item:last-child::after {
  display: none;
}

.stepper-item.completed::after {
  background-color: var(--color-primary);
}

.stepper-number {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-200);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
}

.stepper-item.active .stepper-number {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.stepper-item.completed .stepper-number {
  background-color: var(--color-success);
  color: var(--color-white);
}

.stepper-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.stepper-item.active .stepper-label {
  color: var(--color-gray-900);
  font-weight: 500;
}

@media (max-width: 640px) {
  .stepper-label {
    display: none;
  }
}

/* ===========================================
   Section
   =========================================== */

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

.section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
}

/* ===========================================
   Responsive Layout - Mobile
   =========================================== */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-gray-700);
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* Tablet and below */
@media (max-width: 1024px) {
  .admin-sidebar {
    width: 200px;
  }

  .admin-content {
    padding: var(--space-4);
  }
}

/* Tablet portrait and mobile */
@media (max-width: 768px) {
  /* Header */
  .header-inner {
    height: var(--header-height);
    padding: 0 var(--space-3);
  }

  .header-logo {
    font-size: var(--text-base);
  }

  .header-logo span {
    display: none;
  }

  .header-user {
    padding: var(--space-1) var(--space-2);
  }

  .header-user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-user-role {
    display: none;
  }

  .header-nav {
    gap: var(--space-1);
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Main */
  .main {
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-4) 0;
  }

  /* Container */
  .container {
    padding: 0 var(--container-padding);
  }

  /* Page Header */
  .page-header {
    margin-bottom: var(--space-4);
  }

  .page-title {
    font-size: var(--text-xl);
  }

  .page-subtitle {
    font-size: var(--text-sm);
  }

  .page-header-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Admin Layout - Sidebar becomes overlay */
  .admin-layout {
    flex-direction: column;
  }

  .admin-sidebar {
    position: fixed;
    top: var(--header-height);
    left: -280px;
    width: 280px;
    height: calc(100vh - var(--header-height));
    z-index: 200;
    transition: left var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }

  .admin-sidebar.open {
    left: 0;
  }

  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 199;
  }

  .admin-sidebar-overlay.visible {
    display: block;
  }

  .admin-content {
    width: 100%;
    padding: var(--space-4) var(--container-padding);
    min-height: calc(100vh - var(--header-height));
  }

  /* Stepper */
  .stepper {
    margin-bottom: var(--space-4);
  }

  .stepper-number {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
  }

  .stepper-item::after {
    top: 14px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
  }

  /* Section */
  .section {
    margin-bottom: var(--space-6);
  }

  .section-title {
    font-size: var(--text-base);
  }
}

/* Mobile small */
@media (max-width: 480px) {
  .header-inner {
    padding: 0 var(--space-2);
  }

  .header-logo img {
    height: 28px;
  }

  .header-user {
    display: none;
  }

  .container {
    padding: 0 var(--space-3);
  }

  .page-title {
    font-size: var(--text-lg);
  }

  .stepper-number {
    width: 24px;
    height: 24px;
  }

  .stepper-item::after {
    top: 12px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
  }

  .admin-content {
    padding: var(--space-3);
  }
}