/* 
 * App.css - Point d'entrée principal
 * Chronique des Mondes
 */

/* Variables & Base */
@import url('variables.css');
@import url('base.css');

/* Layouts */
@import url('layouts/auth-layout.css');
@import url('layouts/app-layout.css');
@import url('layouts/sidebar.css');
@import url('layouts/topbar.css');

/* Components */
@import url('components/buttons.css');
@import url('components/inputs.css');
@import url('components/cards.css');
@import url('components/toast.css');

/* Bootstrap Icons */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');

/* ============================================
   SPINNER / LOADING
   ============================================ */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-background-elevated);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   PAGE LOADING OVERLAY
   ============================================ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
}

.loading-overlay .spinner {
  width: 4rem;
  height: 4rem;
  border-width: 4px;
}

/* ============================================
   ALERT / MESSAGE BOXES
   ============================================ */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  border-left: 4px solid;
  margin-bottom: var(--spacing-md);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: var(--color-success-500);
  color: var(--color-success-100);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: var(--color-error-500);
  color: var(--color-error-100);
}

.alert-warning {
  background: rgba(234, 179, 8, 0.1);
  border-left-color: var(--color-warning-500);
  color: var(--color-warning-100);
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: var(--color-info-500);
  color: var(--color-info-100);
}

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

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