/* ==========================================================================
   MARVENS GMS — THEME STITCH : AFRO-CONTEMPORARY CLOUD SAAS
   Design System, Local Fonts & Components
   ========================================================================== */

/* Police locale DM Sans */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-variable.woff2') format('woff2');
}

:root {
  /* --- Palette de Couleurs Stitch Afro-Contemporary --- */
  --gms-bg: #FBF9F5;
  --gms-surface: #FBF9F5;
  --gms-surface-card: #FFFFFF;
  --gms-surface-tint: #F5EFE6;
  --gms-surface-container-low: #F5F3EF;
  --gms-surface-container: #EFEEEA;
  --gms-surface-container-high: #EAE8E4;
  --gms-surface-container-highest: #E4E2DE;

  /* Encres typographiques */
  --gms-ink-base: #1C1917;
  --gms-ink-primary: #1C1917;
  --gms-ink-secondary: #57534E;
  --gms-ink-muted: #78716C;
  --gms-ink-inverse: #FFFFFF;

  /* Accents Terracotta & Ocre Stitch */
  --gms-primary: #A43700;
  --gms-primary-container: #CA4B0D;
  --gms-primary-hover: #8F2E00;
  --gms-primary-light: #FFDBCF;
  --gms-primary-text: #380D00;

  --gms-secondary: #A04013;
  --gms-secondary-container: #FF8756;
  --gms-secondary-hover: #7F2B00;

  --gms-tertiary: #7E5300;
  --gms-ochre: #D49B44;
  --gms-ochre-light: #FFDDB2;

  /* Bordures fines et focus Stitch */
  --gms-border: #E7DFD5;
  --gms-border-focus: #E05A1F;
  --gms-border-subtle: #F0EAE1;

  /* Statuts fonctionnels */
  --gms-success: #2D6A4F;
  --gms-success-bg: #E8F5E9;
  --gms-warning: #D97706;
  --gms-warning-bg: #FEF3C7;
  --gms-danger: #B91C1C;
  --gms-danger-bg: #FEE2E2;
  --gms-info: #0284C7;
  --gms-info-bg: #E0F2FE;

  /* Réseaux Sociaux */
  --gms-social-facebook: #1877F2;
  --gms-social-instagram: #E4405F;
  --gms-social-linkedin: #0A66C2;
  --gms-social-threads: #1C1917;
  --gms-social-tiktok: #000000;
  --gms-social-whatsapp: #25D366;

  /* Typographie & Rayons */
  --gms-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gms-radius-sm: 4px;
  --gms-radius: 8px;
  --gms-radius-lg: 12px;
  --gms-radius-xl: 16px;

  /* Ombres subtiles chaudes */
  --gms-shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.04);
  --gms-shadow: 0 1px 8px rgba(28, 25, 23, 0.06);
  --gms-shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08);
}

/* Base HTML & Reset */
html, body {
  font-family: var(--gms-font);
  background-color: var(--gms-bg);
  color: var(--gms-ink-base);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .brand-font {
  font-family: var(--gms-font);
  color: var(--gms-ink-base);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Auth Layout & Center Card */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gms-bg);
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--gms-surface-card);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius-xl);
  padding: 2.25rem;
  box-shadow: var(--gms-shadow-md);
}

.auth-logo-badge {
  width: 48px;
  height: 48px;
  background: var(--gms-primary-container);
  color: #FFFFFF;
  border-radius: var(--gms-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto 1rem auto;
  box-shadow: var(--gms-shadow-sm);
}

/* Material Symbols alignement standard */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar Stitch (Lin clair 280px) */
.sidebar-stitch {
  width: 280px;
  min-width: 280px;
  background-color: var(--gms-surface-container-low);
  border-right: 1px solid var(--gms-border);
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  z-index: 1020;
}

.sidebar-stitch .brand-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem 1.25rem 0.5rem;
}

.sidebar-stitch .brand-logo-icon {
  width: 34px;
  height: 34px;
  background: var(--gms-primary-container);
  color: #FFFFFF;
  border-radius: var(--gms-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: var(--gms-shadow-sm);
}

.sidebar-stitch .brand-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gms-ink-base);
}

.sidebar-stitch .brand-subtitle {
  font-size: 0.75rem;
  color: var(--gms-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Carte organisation active dans la sidebar */
.sidebar-tenant-badge {
  background: var(--gms-surface-card);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius);
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  box-shadow: var(--gms-shadow-sm);
}

.sidebar-tenant-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--gms-radius-sm);
  background: var(--gms-surface-tint);
  color: var(--gms-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Liens de navigation Stitch */
.sidebar-stitch .nav-item-stitch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: var(--gms-ink-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--gms-radius);
  transition: all 0.15s ease-in-out;
  margin-bottom: 2px;
}

.sidebar-stitch .nav-item-stitch:hover {
  background-color: var(--gms-surface-container-high);
  color: var(--gms-ink-base);
}

.sidebar-stitch .nav-item-stitch.active {
  background-color: var(--gms-primary-container);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: var(--gms-shadow-sm);
}

.sidebar-stitch .nav-item-stitch.active .material-symbols-outlined {
  color: #FFFFFF;
}

/* Widget quota éditorial */
.sidebar-quota-box {
  background: var(--gms-surface-tint);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius);
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.sidebar-quota-box .progress {
  height: 6px;
  background-color: var(--gms-surface-container-highest);
  border-radius: 9999px;
  overflow: hidden;
}

.sidebar-quota-box .progress-bar {
  background-color: var(--gms-border-focus);
}

/* Topbar translucide Stitch */
.topbar-stitch {
  height: 64px;
  background: rgba(251, 249, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gms-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  position: sticky;
  top: 0;
  z-index: 1010;
}

.topbar-stitch .topbar-search {
  position: relative;
  width: 320px;
}

.topbar-stitch .topbar-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gms-ink-muted);
  font-size: 18px;
}

.topbar-stitch .topbar-search input {
  width: 100%;
  height: 38px;
  padding-left: 38px;
  padding-right: 12px;
  background: var(--gms-surface-container-low);
  border: 1px solid transparent;
  border-radius: var(--gms-radius);
  font-size: 0.875rem;
  color: var(--gms-ink-base);
  transition: all 0.2s ease;
}

.topbar-stitch .topbar-search input:focus {
  background: var(--gms-surface-card);
  border-color: var(--gms-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(224, 90, 31, 0.15);
}

/* Boutons Stitch */
.btn-primary {
  background-color: var(--gms-border-focus) !important;
  border-color: var(--gms-border-focus) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: var(--gms-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.15s ease-in-out;
  box-shadow: var(--gms-shadow-sm);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--gms-primary-container) !important;
  border-color: var(--gms-primary-container) !important;
  color: #FFFFFF !important;
}

.btn-outline-secondary {
  border-color: var(--gms-border) !important;
  color: var(--gms-ink-secondary) !important;
  background-color: var(--gms-surface-card) !important;
  font-weight: 500;
  border-radius: var(--gms-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-outline-secondary:hover {
  background-color: var(--gms-surface-container-high) !important;
  color: var(--gms-ink-base) !important;
  border-color: var(--gms-border) !important;
}

/* Cartes Stitch */
.card, .card-stitch {
  background: var(--gms-surface-card);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius-lg);
  box-shadow: var(--gms-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.card:hover, .card-stitch:hover {
  box-shadow: var(--gms-shadow);
}

.card-header {
  background-color: var(--gms-surface-card);
  border-bottom: 1px solid var(--gms-border);
  padding: 1rem 1.25rem;
  border-top-left-radius: var(--gms-radius-lg) !important;
  border-top-right-radius: var(--gms-radius-lg) !important;
}

/* Formulaires & Contrôles */
.form-control, .form-select {
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  color: var(--gms-ink-base);
  background-color: #FFFFFF;
}

.form-control:focus, .form-select:focus {
  border-color: var(--gms-border-focus);
  box-shadow: 0 0 0 3px rgba(224, 90, 31, 0.12);
  outline: none;
}

/* Badges de statut Stitch */
.badge-stitch-success {
  background-color: var(--gms-success-bg);
  color: var(--gms-success);
  border: 1px solid rgba(45, 106, 79, 0.2);
  font-weight: 600;
  border-radius: var(--gms-radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.badge-stitch-warning {
  background-color: var(--gms-warning-bg);
  color: var(--gms-warning);
  border: 1px solid rgba(217, 119, 6, 0.2);
  font-weight: 600;
  border-radius: var(--gms-radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.badge-stitch-danger {
  background-color: var(--gms-danger-bg);
  color: var(--gms-danger);
  border: 1px solid rgba(185, 28, 28, 0.2);
  font-weight: 600;
  border-radius: var(--gms-radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.badge-stitch-info {
  background-color: var(--gms-info-bg);
  color: var(--gms-info);
  border: 1px solid rgba(2, 132, 199, 0.2);
  font-weight: 600;
  border-radius: var(--gms-radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.badge-stitch-draft {
  background-color: var(--gms-surface-container);
  color: var(--gms-ink-secondary);
  border: 1px solid var(--gms-border);
  font-weight: 600;
  border-radius: var(--gms-radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

/* Tableaux Stitch */
.table-stitch {
  margin-bottom: 0;
}

.table-stitch thead th {
  background-color: var(--gms-surface-container-low);
  color: var(--gms-ink-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gms-border);
  padding: 0.85rem 1rem;
}

.table-stitch tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--gms-border);
  color: var(--gms-ink-base);
  font-size: 0.875rem;
}

.table-stitch tbody tr:hover td {
  background-color: var(--gms-surface-container-low);
}

/* Bannière Assistance Super Admin */
.assistance-banner {
  background-color: var(--gms-danger);
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* Micro-progress segmenté Stitch (Pulse Metrics) */
.pulse-metric-card {
  background: var(--gms-surface-card);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--gms-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pulse-metric-card .metric-val {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gms-ink-base);
}

.pulse-metric-card .metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gms-ink-muted);
  font-weight: 600;
}

/* Bandeau opérationnel d'accueil */
.operational-banner {
  background: var(--gms-surface-container-low);
  border: 1px solid var(--gms-border);
  border-radius: var(--gms-radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.operational-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gms-surface-tint);
  color: var(--gms-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gms-border-focus);
  box-shadow: 0 0 0 0 rgba(224, 90, 31, 0.7);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 90, 31, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(224, 90, 31, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 90, 31, 0); }
}

/* Pastilles réseaux sociaux connectés */
.channel-pill-micro {
  width: 28px;
  height: 28px;
  border-radius: var(--gms-radius-sm);
  background: var(--gms-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  position: relative;
}

.channel-pill-micro.connected::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--gms-success);
  border: 1.5px solid #FFFFFF;
}

/* Responsive Drawer Mobile */
@media (max-width: 991.98px) {
  .sidebar-stitch {
    position: fixed;
    left: -280px;
    transition: left 0.3s ease;
  }

  .sidebar-stitch.show {
    left: 0;
  }

  .main-wrapper-stitch {
    padding-left: 0 !important;
  }
}