/* GuruAgenda - Sistema de Design Baseado no Figma */

/* ===== VARIÁVEIS CSS ===== */
:root {
  /* Cores Primárias */
  --primary-blue: #0066FF;
  --primary-blue-hover: #0052CC;
  --primary-blue-light: #E6F2FF;
  --primary-blue-dark: #004499;
  
  /* Cores Neutras */
  --background-light: #F8F9FA;
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  
  /* Cores de Status */
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --info: #3B82F6;
  --info-light: #DBEAFE;
  
  /* Tipografia */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  
  /* Pesos de Fonte */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Espaçamentos */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */
  
  /* Bordas */
  --border-radius-sm: 0.25rem;  /* 4px */
  --border-radius: 0.375rem;    /* 6px */
  --border-radius-md: 0.5rem;   /* 8px */
  --border-radius-lg: 0.75rem;  /* 12px */
  --border-radius-xl: 1rem;     /* 16px */
  --border-radius-2xl: 1.5rem;  /* 24px */
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transições */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ===== RESET E BASE ===== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--background-light);
  color: var(--gray-800);
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
}

/* ===== COMPONENTES BASE ===== */

/* Botões */
.btn-primary {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: var(--white) !important;
  font-weight: var(--font-semibold);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.btn-primary:hover {
  background-color: var(--primary-blue-hover) !important;
  border-color: var(--primary-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  background-color: transparent !important;
  border: 2px solid var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  font-weight: var(--font-semibold);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
}

.btn-outline-primary:hover {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Campos de Input */
.form-control {
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  font-size: var(--text-base) !important;
  transition: all var(--transition-fast) !important;
  background-color: var(--white) !important;
}

.form-control:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px var(--primary-blue-light) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--gray-400) !important;
}

.form-label {
  font-weight: var(--font-semibold) !important;
  color: var(--gray-700) !important;
  margin-bottom: var(--spacing-2) !important;
  font-size: var(--text-sm) !important;
}

/* Cards */
.card {
  border: none !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-normal) !important;
}

/* Cards sem classe de cor específica usam fundo branco */
.card:not([class*="bg-"]) {
  background-color: var(--white) !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

.card-body {
  padding: var(--spacing-8) !important;
}

/* ===== LAYOUT PRINCIPAL ===== */

/* Wrapper */
#wrapper {
  display: flex;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

/* Sidebar */
#sidebar-wrapper {
  min-height: 100vh;
  width: 16rem;
  margin-left: -16rem;
  transition: margin var(--transition-normal);
  flex-shrink: 0;
  background-color: var(--white);
  border-right: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

#sidebar-wrapper .sidebar-heading {
  padding: var(--spacing-6) var(--spacing-5);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--primary-blue);
  border-bottom: 1px solid var(--gray-200);
  background-color: var(--white);
}

#sidebar-wrapper .list-group {
  width: 16rem;
}

.list-group-item {
  border: none !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  color: var(--gray-600) !important;
  font-weight: var(--font-medium) !important;
  transition: all var(--transition-fast) !important;
  background-color: transparent !important;
}

.list-group-item:hover {
  background-color: var(--gray-50) !important;
  color: var(--gray-800) !important;
  padding-left: var(--spacing-6) !important;
}

.list-group-item.active {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  border-left: 3px solid #0d6efd !important;
  font-weight: var(--font-semibold) !important;
}

.list-group-item.active:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}

/* Melhorar hover nos itens do menu */
.list-group-item:hover {
  background-color: #e9ecef;
  color: #495057;
}

/* Garantir que ícones do menu ativo sejam visíveis */
.list-group-item.active i {
  color: #ffffff !important;
}

.list-group-item i {
  width: 1.25rem;
  text-align: center;
}

/* Content Wrapper */
#page-content-wrapper {
  flex-grow: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body:not(.sb-sidenav-toggled) #wrapper #page-content-wrapper {
  width: calc(100% - 16rem);
}

body.sb-sidenav-toggled #wrapper #page-content-wrapper {
  width: 100%;
}

/* Navbar */
.navbar {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
}

.navbar .btn-primary {
  padding: var(--spacing-2) var(--spacing-3);
}

/* Responsive */
@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: -16rem;
  }
}

/* ===== PÁGINAS ESPECÍFICAS ===== */

/* Container para formulários */
.form-container {
  max-width: 500px;
  margin: var(--spacing-10) auto;
  padding: var(--spacing-8);
  background-color: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Container para registro */
.registration-container {
  min-height: 100vh;
  display: flex;
  background-color: var(--background-light);
}

.registration-sidebar {
  width: 320px;
  background-color: var(--white);
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-md);
}

.registration-content {
  flex: 1;
  padding: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.registration-form {
  width: 100%;
  max-width: 500px;
  background-color: var(--white);
  padding: var(--spacing-8);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Progress Steps */
.progress-steps {
  margin-bottom: var(--spacing-8);
}

.progress-step {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
  font-size: var(--text-sm);
}

.progress-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--gray-200);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

.progress-step.active .progress-step-number {
  background-color: var(--primary-blue);
  color: var(--white);
}

.progress-step.completed .progress-step-number {
  background-color: var(--success);
  color: var(--white);
}

.progress-step-text {
  color: var(--gray-600);
  font-weight: var(--font-medium);
}

.progress-step.active .progress-step-text {
  color: var(--primary-blue);
  font-weight: var(--font-semibold);
}

/* Dashboard Cards */
.dashboard-card {
  border-radius: var(--border-radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-normal) !important;
  overflow: hidden;
}

.dashboard-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

.dashboard-card .card-body {
  padding: var(--spacing-6) !important;
}

.dashboard-card .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-top: none !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
}

/* Estatísticas */
.stat-card {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: var(--white);
}

.stat-card.warning {
  background: linear-gradient(135deg, var(--warning) 0%, #E97E00 100%);
}

.stat-card.danger {
  background: linear-gradient(135deg, var(--danger) 0%, #DC2626 100%);
}

.stat-card.success {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}

/* Alertas */
.alert {
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  font-weight: var(--font-medium) !important;
}

.alert-info {
  background-color: var(--info-light) !important;
  color: var(--info) !important;
}

.alert-success {
  background-color: var(--success-light) !important;
  color: var(--success) !important;
}

.alert-warning {
  background-color: var(--warning-light) !important;
  color: var(--warning) !important;
}

.alert-danger {
  background-color: var(--danger-light) !important;
  color: var(--danger) !important;
}

/* ===== UTILITÁRIOS ===== */

/* Texto */
.text-primary {
  color: var(--primary-blue) !important;
}

.text-muted {
  color: var(--gray-500) !important;
}

/* Backgrounds */
.bg-primary {
  background-color: var(--primary-blue) !important;
}

.bg-light {
  background-color: var(--gray-50) !important;
}

/* Espaçamentos customizados */
.p-custom {
  padding: var(--spacing-6);
}

.m-custom {
  margin: var(--spacing-6);
}

/* Responsividade */
@media (max-width: 767px) {
  .registration-container {
    flex-direction: column;
  }
  
  .registration-sidebar {
    width: 100%;
    min-height: auto;
    padding: var(--spacing-6);
  }
  
  .registration-content {
    padding: var(--spacing-6);
  }
  
  .registration-form {
    padding: var(--spacing-6);
  }
}

/* ===== ANIMAÇÕES ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* File upload styles */
.file-upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-6);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.file-upload-area:hover {
  border-color: var(--primary-blue);
  background-color: var(--primary-blue-light);
}

.file-upload-area.dragover {
  border-color: var(--primary-blue);
  background-color: var(--primary-blue-light);
}

/* Slug validation */
.slug-validation {
  margin-top: 5px;
  font-size: 0.875rem;
}

.slug-validation.valid {
  color: var(--success);
}

.slug-validation.invalid {
  color: var(--danger);
}

.slug-validation.checking {
  color: var(--gray-500);
}

.preview-url {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-3);
  margin-top: var(--spacing-2);
  font-family: monospace;
  font-size: var(--text-sm);
  color: var(--gray-700);
}


/* ===== DASHBOARD LAYOUTS ===== */

/* Dashboard Wrapper */
#wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

#sidebar-wrapper {
  min-height: 100vh;
  width: 16rem;
  background-color: var(--white);
  border-right: 1px solid var(--gray-200);
  transition: margin 0.25s ease-out;
}

#page-content-wrapper {
  flex: 1;
  background-color: var(--background-light);
}

/* Sidebar Styles */
.sidebar-heading {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--gray-200);
}

.list-group-item {
  border: none !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
  color: var(--gray-600) !important;
  transition: all var(--transition-fast) !important;
  background-color: transparent !important;
}

.list-group-item:hover {
  background-color: var(--gray-50) !important;
  color: var(--primary-blue) !important;
}

.list-group-item.active {
  background-color: var(--primary-blue-light) !important;
  color: var(--primary-blue) !important;
  font-weight: var(--font-semibold) !important;
}

/* Dashboard Cards */
.dashboard-card.stat-card {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: var(--white);
  border: none;
}

.dashboard-card.stat-card.warning {
  background: linear-gradient(135deg, #F59E0B 0%, #E97E00 100%);
}

.dashboard-card.stat-card.danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.dashboard-card.stat-card.success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

/* Responsive Sidebar */
body.sb-sidenav-toggled #sidebar-wrapper {
  margin-left: -16rem;
}

@media (max-width: 768px) {
  #sidebar-wrapper {
    margin-left: -16rem;
  }
  
  body.sb-sidenav-toggled #sidebar-wrapper {
    margin-left: 0;
  }
}

/* Card Hover Animation Enhanced */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Badge Styles Enhanced */
.badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

/* Empty State Styles */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--gray-500);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
}