/* ========================================================================== */
/* CONFIGURAÇÃO DO ESTILO: Versão 5.0 (Identidade Visual Premium Cyber Dark) */
/* DATA DE ATUALIZAÇÃO: 01/06/2026                                           */
/* ARQUIVO: style.css (Variáveis Globais e Componentes Estruturais)          */
/* ========================================================================== */

/* Importação da fonte Plus Jakarta Sans - Extremamente moderna e confortável para leitura */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Paleta de Cores Fiel à Referência Visual */
    --background: #090a0f;        /* Fundo ultra dark profundo */
    --panel: #11131c;             /* Fundo dos painéis e cards (Roxo bem escuro) */
    --panel-border: #1e2235;      /* Bordas sutis dos elementos */
    
    /* Tons de Destaque Neon */
    --accent: #7c3aed;            /* Roxo Principal (Vibrant Purple) */
    --accent-hover: #6d28d9;      /* Roxo Hover */
    --accent-gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); /* Degradê dos botões principais */
    
    /* Estados Comerciais */
    --success: #10b981;           /* Verde Neon para Status Ativo */
    --warning: #f59e0b;           /* Laranja/Amarelo de Alerta */
    --danger: #ef4444;            /* Vermelho de Exclusão/Erro */
    
    /* Tipografia e Conforto de Leitura */
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --text-contrast: #ffffff;     /* Títulos e Destaques Importantes */
    --text-main: #dbdeeb;         /* Texto de leitura padrão (Branco fosco confortável) */
    --text-muted: #7981a6;        /* Textos secundários e legendas */
}

/* Reset Técnico Base */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--background);
    color: var(--text-main);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* ========================================================================== */
/* LAYOUT DE BARRAMENTO (Sidebar + Workspace Lado a Lado)                     */
/* ========================================================================== */
.app-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.main-workspace {
    flex: 1;
    padding: 2.5rem;
    box-sizing: border-box;
    max-width: calc(100% - 260px);
}

/* Conforto de Leitura para Parágrafos e Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-contrast);
    font-weight: 700;
    letter-spacing: -0.02em; /* Títulos levemente juntos dão aspecto Premium */
    margin-top: 0;
}

p, span, td {
    line-height: 1.6; /* Altura de linha perfeita para não cansar a vista */
    letter-spacing: 0.2px; /* Espaçamento suave para leitura fluida */
}

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

/* ========================================================================== */
/* COMPONENTES DE INTERACTION DE LINKS EM COMUM (Sidebar e Menus)            */
/* ========================================================================== */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.sidebar-link i {
    color: var(--text-muted);
    font-size: 1.05rem;
    transition: color 0.25s ease;
}

/* Efeito Hover moderno com background sutil */
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-contrast);
}

.sidebar-link:hover i {
    color: var(--text-contrast);
}

/* Estado Ativo: Aplica a cor roxa neon da sua referência */
.sidebar-link.active {
    background: rgba(124, 58, 237, 0.1);
    color: var(--text-contrast);
    font-weight: 600;
    border-left: 3px solid var(--accent);
}

.sidebar-link.active i {
    color: var(--accent);
}

/* ========================================================================== */
/* BOTÕES PREMIUM GRADIENT (Baseado no botão 'Explorar Prompts' da imagem)     */
/* ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
}

/* Botão Roxo Violeta Degradê */
.btn-primary {
    background: var(--accent-gradient);
    color: var(--text-contrast);
    border: none;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    opacity: 0.95;
}

/* Botão Cancelar / Neutro */
.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--panel-border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--text-muted);
    color: var(--text-contrast);
}

/* Scrollbars customizadas para acompanhar o tema escuro */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--background);
}
::-webkit-scrollbar-thumb {
    background: var(--panel-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}