/* ========================================
   Web IA Criativa — Design System CSS
   ======================================== */

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef6 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
h1, h2, h3, .font-headline { font-family: 'Manrope', sans-serif; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Scrollbar */
.hidden-scrollbar::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar { display: none; }
.hidden-scrollbar, .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }

/* ========== SIDEBAR ========== */
.app-sidebar {
  background: linear-gradient(180deg, #0a1929 0%, #102a43 40%, #142440 100%);
}
/* Active nav indicator */
.app-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 24px;
  background: #3370f6;
  border-radius: 0 4px 4px 0;
}
.app-sidebar .nav-link { position: relative; }

/* Collapsed state */
.app-sidebar.collapsed { width: 5rem !important; }
.app-sidebar.collapsed .nav-label,
.app-sidebar.collapsed .brand-text,
.app-sidebar.collapsed .section-label,
.app-sidebar.collapsed .sidebar-footer-text,
.app-sidebar.collapsed .btn-label {
  display: none;
}
.app-sidebar.collapsed .nav-link {
  justify-content: center;
  padding-left: 0; padding-right: 0;
}
.app-sidebar.collapsed .sidebar-action-btn {
  padding: 0.625rem;
  justify-content: center;
}

/* ========== MODAL ========== */
.app-modal-enter {
  animation: modalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== CARDS ========== */
.stat-card {
  background: white;
  border: 1px solid rgba(16,42,67,0.06);
  transition: all 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,42,67,0.08), 0 16px 40px rgba(16,42,67,0.06);
}

/* ========== GRADIENTS ========== */
.bg-gradient-primary { background: linear-gradient(135deg, #1d51eb 0%, #3370f6 50%, #5995fa 100%); }
.bg-gradient-dark { background: linear-gradient(135deg, #0a1929 0%, #102a43 100%); }
.bg-gradient-hero { background: linear-gradient(135deg, #0a1929 0%, #142440 40%, #1d51eb 100%); }

/* ========== ANIMATIONS ========== */
main { animation: pageIn 0.35s ease-out; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== SEARCH ========== */
.search-hidden { display: none !important; }

/* ========== STATUS DOTS ========== */
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot-active { background: #1ec86a; box-shadow: 0 0 8px rgba(30,200,106,0.4); }
.status-dot-warning { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.4); }
.status-dot-error { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.4); }

/* ========== LOGIN ========== */
.login-visual {
  background: linear-gradient(135deg, #0a1929 0%, #102a43 40%, #1d51eb 100%);
  position: relative; overflow: hidden;
}
.login-visual::after {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(51,112,246,0.15) 0%, transparent 70%);
  top: -100px; right: -100px;
}
.login-visual::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,200,106,0.1) 0%, transparent 70%);
  bottom: -100px; left: -50px;
}