/* Animações e Efeitos Existentes (mantidos) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  border: 4px solid #4A5568;
  border-top: 4px solid #34D399;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.status-indicator {
  width: 16px;
  height: 16px;
  background-color: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 10px #34D399, 0 0 20px #34D399;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@keyframes flip-effect {
  from { transform: rotateY(180deg); opacity: 0; }
  to { transform: rotateY(0deg); opacity: 1; }
}

@keyframes fade-out { to { opacity: 0; } }

.splash-title {
  perspective: 800px; 
  letter-spacing: 0.1em;
}

.splash-title span {
  display: inline-block;
  opacity: 0;
  animation-name: flip-effect;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.splash-title span:nth-child(1) { animation-delay: 0.1s; }
.splash-title span:nth-child(2) { animation-delay: 0.2s; }
.splash-title span:nth-child(3) { animation-delay: 0.3s; }
.splash-title span:nth-child(4) { animation-delay: 0.4s; }
.splash-title span:nth-child(5) { animation-delay: 0.5s; }
.splash-title span:nth-child(6) { animation-delay: 0.6s; }
.splash-title span:nth-child(7) { animation-delay: 0.7s; }
.splash-title span:nth-child(8) { animation-delay: 0.8s; }
.splash-title span:nth-child(9) { animation-delay: 0.9s; }

#main-content {
  transition: opacity 0.5s ease-in-out;
}

#splash-screen.hidden {
  animation: fade-out 0.5s forwards;
  pointer-events: none;
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.notification {
  animation: slide-in 0.5s ease-out forwards;
  transition: opacity 0.5s ease-out;
}

/* --- NOVOS ESTILOS PARA O DASHBOARD --- */

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
    color: #D1D5DB; /* text-gray-300 */
}

.nav-link:hover {
    background-color: #374151; /* bg-gray-700 */
    color: #FFFFFF;
}

.nav-link.active {
    background-color: #10B981; /* bg-emerald-500 */
    color: #FFFFFF;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3), 0 2px 4px -1px rgba(16, 185, 129, 0.2);
}

/* NOVO: Estilos do Submenu */
.sub-nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9rem;
    color: #D1D5DB; /* text-gray-300 */
}

.sub-nav-link:hover {
    background-color: #374151; /* bg-gray-700 */
    color: #FFFFFF;
}

.sub-nav-link.active {
    color: #34D399; /* text-emerald-400 */
    font-weight: 600;
}

/* NOVO: Estilos das Abas de Configuração */
.settings-tab {
    padding: 0.5rem 1rem;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: #9CA3AF; /* text-gray-400 */
    transition: color 0.2s, border-color 0.2s;
}
.settings-tab:hover {
    color: #E5E7EB; /* text-gray-200 */
}
.settings-tab.active {
    color: #34D399; /* text-emerald-400 */
    border-color: #34D399; /* border-emerald-400 */
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

#confirmation-modal .modal-content {
    animation: zoom-in 0.2s ease-out forwards;
}

.segment-tag {
    display: inline-flex;
    align-items: center;
    background-color: #10B981; /* bg-emerald-500 */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem;
    font-weight: 500;
}

.segment-tag button {
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.segment-tag button:hover {
    opacity: 1;
}

.restricted-tag {
    display: inline-flex;
    align-items: center;
    background-color: #EF4444; /* bg-red-500 */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem;
    font-weight: 500;
}

.restricted-tag button {
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.restricted-tag button:hover {
    opacity: 1;
}

/* --- ESTILOS PARA A BARRA DE ROLAGEM --- */

/* Para navegadores baseados em WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-track {
  background: #1F2937; /* Cor do fundo da trilha (bg-gray-800) */
}

::-webkit-scrollbar-thumb {
  background-color: #4B5563; /* Cor do polegar da barra de rolagem (bg-gray-600) */
  border-radius: 10px; /* Bordas arredondadas */
  border: 2px solid #1F2937; /* Adiciona um pequeno espaçamento */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #6B7280; /* Cor do polegar ao passar o mouse (bg-gray-500) */
}

/* --- ESTILOS PARA O WIZARD (SHEPHERD.JS) --- */

body {
  --shepherd-text-color: #d1d5db;
  --shepherd-background-color: #2d3748;
  --shepherd-header-background-color: #34d399;
  --shepherd-title-text-color: #e5e7eb;
  --shepherd-footer-background-color: #2d3748;
  --shepherd-cancel-icon-color: #9ca3af;
  --shepherd-cancel-icon-hover-color: #ffffff;
  --shepherd-button-background-color: #10B981;
  --shepherd-button-hover-background-color: #059669;
  --shepherd-button-secondary-background-color: #4b5563;
  --shepherd-button-secondary-hover-background-color: #374151;
  --shepherd-border-radius: 0.75rem;
  --shepherd-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.shepherd-arrow::before {
  background-color: var(--shepherd-background-color);
}

.shepherd-footer {
    padding: 0 1.5rem 1.5rem;
}

.force-hidden {
    display: none !important;
}