/**
 * Capture SaaS — Design System v2 (conservador)
 * Apenas melhorias visuais — sem alterar estrutura ou largura do sidebar
 */

/* ── Fonte Geist ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap');

/* ── Fonte global no painel ───────────────────────────────────────────────── */
.csaas-panel-wrap,
.csaas-panel-wrap * {
    font-family: 'Geist', -apple-system, 'Segoe UI', sans-serif !important;
}

/* ── Variáveis extras ─────────────────────────────────────────────────────── */
:root {
    --cs2-transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── Dark mode redesenhado ────────────────────────────────────────────────── */
body.csaas-dark-mode .csaas-panel-wrap {
    background: #06090f !important;
}
body.csaas-dark-mode .csaas-panel-main {
    background: #06090f !important;
}
body.csaas-dark-mode .csaas-panel-sidebar {
    background: #04070d !important;
    border-right-color: rgba(255,255,255,0.06) !important;
}
body.csaas-dark-mode .csaas-admin-card,
body.csaas-dark-mode .csaas-panel-card {
    background: rgba(13,20,35,0.9) !important;
    border-color: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Animação de troca de aba ─────────────────────────────────────────────── */
@keyframes cs2FadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.csaas-tab-content {
    animation: cs2FadeSlide 0.22s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* ── Sidebar — apenas melhorias visuais ───────────────────────────────────── */
.csaas-panel-sidebar {
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* Item ativo — gradiente em vez de cor sólida */
.csaas-nav-item.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35) !important;
    color: #fff !important;
}
.csaas-nav-item {
    transition: background var(--cs2-transition), color var(--cs2-transition) !important;
    font-weight: 500 !important;
}

/* ── Cards — hover suave ──────────────────────────────────────────────────── */
.csaas-admin-card,
.csaas-panel-card {
    transition: transform var(--cs2-transition), box-shadow var(--cs2-transition) !important;
    border-radius: 14px !important;
}
.csaas-admin-card:hover,
.csaas-panel-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(99,102,241,0.10) !important;
}

/* ── Botões — gradiente e hover ───────────────────────────────────────────── */
.csaas-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
    transition: all var(--cs2-transition) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.csaas-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(99,102,241,0.42) !important;
}
.csaas-btn-secondary {
    border-radius: 10px !important;
    transition: all var(--cs2-transition) !important;
}
.csaas-btn-secondary:hover {
    transform: translateY(-1px) !important;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.csaas-input,
.csaas-panel-main input[type="text"],
.csaas-panel-main input[type="email"],
.csaas-panel-main input[type="password"],
.csaas-panel-main textarea,
.csaas-panel-main select {
    border-radius: 10px !important;
    transition: border-color var(--cs2-transition), box-shadow var(--cs2-transition) !important;
}
.csaas-input:focus,
.csaas-panel-main input:focus,
.csaas-panel-main textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
    outline: none !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
.csaas-panel-main::-webkit-scrollbar { width: 5px; }
.csaas-panel-main::-webkit-scrollbar-track { background: transparent; }
.csaas-panel-main::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
.csaas-panel-main::-webkit-scrollbar-thumb:hover { background: #6366f1; }
body.csaas-dark-mode .csaas-panel-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* ── Dark mode toggle (botão no rodapé do sidebar) ────────────────────────── */
#csaas-darkmode-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: rgba(255,255,255,0.45) !important;
    transition: all var(--cs2-transition) !important;
    margin: 0 auto 4px !important;
}
#csaas-darkmode-toggle:hover {
    background: rgba(99,102,241,0.15) !important;
    color: #fff !important;
}
#csaas-sidebar-footer {
    padding: 8px 0 12px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    justify-content: center !important;
}