/* ══════════════════════════════════════════
   MAESTRIA PLATFORM — GLOBAL STYLES
   styles.css
   Compartilhado entre index.html e app.html
══════════════════════════════════════════ */

/* ── GOOGLE FONTS ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ── RESET & VARS ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:         #0D0840;
  --navy-light:   #150D5C;
  --navy2:        #1E1565;
  --primary:      linear-gradient(135deg, #5B6CF9 0%, #8B5CF6 50%, #A855F7 100%);
  --primary-solid:#8B5CF6;
  --primary-dark: #7C3AED;
  --teal:         linear-gradient(135deg, #0F766E 0%, #115E59 100%);
  --teal-solid:   #0D9488;
  --white:        #FFFFFF;
  --off:          #F8FAFC;
  --slate:        #94A3B8;
  --dark:         #020617;
  --card-dark:    #232424;
  --border:       rgba(139, 92, 246, 0.12);
  --border-light: rgba(0, 0, 0, 0.05);
  --green:        #10B981;
  --red:          #EF4444;
  --amber:        #F59E0B;
  --purple:       #8B5CF6;
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:       0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-lg:    0 25px 50px -12px rgb(0 0 0 / 0.25);
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
}

html, body {
  font-family: var(--font-body);
  background: var(--off);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s, color 0.3s;
}

/* ── THEME OVERRIDES ───────────────────── */
[data-theme="dark"] {
  --off:          #020617; /* Darkest background */
  --white:        #0F172A; /* Card background */
  --dark:         #F8FAFC; /* Text color */
  --slate:        #94A3B8; /* Muted text */
  --border:       rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .card, 
[data-theme="dark"] .stat-card, 
[data-theme="dark"] .cand-card,
[data-theme="dark"] .filter-search,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .modal {
  background: var(--white) !important;
  color: var(--dark) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .topbar {
  background: var(--off) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .pipeline-card {
  background: var(--white) !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--off) !important;
  color: var(--dark) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .page-header-text h1,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .cand-name,
[data-theme="dark"] .pipeline-col-header,
[data-theme="dark"] .modal-title,
[data-theme="dark"] th {
  color: var(--dark) !important;
}

[data-theme="dark"] .tabs .tab {
  color: var(--slate) !important;
}

[data-theme="dark"] .tabs .tab.active {
  background: var(--white) !important;
  color: var(--dark) !important;
}

[data-theme="dark"] .empty-state h3,
[data-theme="dark"] .empty-state p {
  color: var(--slate) !important;
}


/* ── UTILS: GLASSMORPHISM ──────────────── */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── UTILS: SKELETON LOADING ───────────── */
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: 6px;
  color: transparent !important;
  border: none !important;
}
.skeleton-dark {
  background: linear-gradient(90deg, #162B50 25%, #1E3A6A 50%, #162B50 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
}
@keyframes skeleton-loading {
  from { background-position: 150% 0; }
  to { background-position: -150% 0; }
}

/* ── SCROLLBAR ─────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── BUTTONS ───────────────────────────── */
.btn {
  padding: 10px 22px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
}
.btn-primary { 
  background: var(--primary); 
  color: white; 
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.25); 
}
.btn-primary:hover { 
  opacity: 0.9;
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.3); 
  transform: translateY(-2px) scale(1.02); 
}
.btn-navy { background: var(--navy); color: white; }
.btn-navy:hover { background: var(--navy2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--off); color: var(--navy); border-color: var(--slate); }
.btn-green { background: var(--green); color: white; }
.btn-sm { padding: 7px 15px; font-size: 12px; }
.btn-xs { padding: 5px 12px; font-size: 11px; border-radius: 7px; }

/* ── BADGES ────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.badge-orange { background: rgba(139,92,246,0.08); color: var(--primary-solid); }
.badge-green  { background: #ECFDF5; color: var(--green); }
.badge-teal   { background: #F0FDFA; color: var(--teal); }
.badge-blue   { background: #EFF6FF; color: #2563EB; }
.badge-red    { background: #FEF2F2; color: var(--red); }
.badge-amber  { background: #FFFBEB; color: var(--amber); }
.badge-purple { background: #F5F3FF; color: var(--purple); }
.badge-navy   { background: #EEF4FA; color: var(--navy); }
.badge-slate  { background: #F8FAFC; color: var(--slate); border: 1px solid var(--border); }

/* Ajustes de Badges para Dark Mode */
[data-theme="dark"] .badge-teal   { background: rgba(20, 184, 166, 0.15); color: #2DD4BF; }
[data-theme="dark"] .badge-orange { background: rgba(249, 115, 22, 0.15); color: #FB923C; }
[data-theme="dark"] .badge-navy   { background: rgba(255, 255, 255, 0.1); color: #CBD5E1; }
[data-theme="dark"] .badge-blue   { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
[data-theme="dark"] .badge-green  { background: rgba(16, 185, 129, 0.15); color: #34D399; }
[data-theme="dark"] .badge-red    { background: rgba(239, 68, 68, 0.15); color: #F87171; }

/* ── TOAST ─────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; right: 32px; z-index: 9999;
  background: var(--navy); color: white;
  padding: 16px 24px; border-radius: 14px;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 40px -8px rgba(0,0,0,0.14);
  transform: translateY(100px); opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: var(--font-body);
  border-left: 4px solid var(--primary-solid);
}

/* Ajuste Geral de Tabelas */
.vagas-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.vagas-table th {
    background: var(--navy);
    color: white;
    padding: 15px;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vagas-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main); /* Corrigido para ser legível em ambos os modos */
    font-size: 0.95rem;
}

[data-theme="dark"] .vagas-table td {
    background-color: var(--bg-card); /* Garante que a linha acompanhe o tema */
    color: var(--text-main);
}

[data-theme="dark"] .vagas-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.03); /* Efeito de hover sutil no dark */
}

/* Ajuste de Badges na Tabela */
.badge-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Fix para Links e Botões na Tabela */
.btn-table-action {
    color: var(--primary-solid);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.btn-table-action:hover {
    opacity: 0.7;
}

/* Estilos dos Cards da Pipeline */
.candidate-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.candidate-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.candidate-card h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--text-main); /* Corrigido: usa a variável de texto principal */
}

.candidate-card p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* IA Analysis Box Contrast Fix */
.ai-analysis-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
}

[data-theme="dark"] .ai-analysis-box {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.ai-analysis-box p {
    color: #10b981 !important; /* Força cor verde legível */
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

[data-theme="dark"] .ai-analysis-box p {
    color: #34d399 !important; /* Verde mais brilhante para o modo dark */
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: white; color: var(--navy); border-left-color: var(--green); }
.toast.error   { background: white; color: var(--navy); border-left-color: var(--red); }

/* ── ANIMATIONS ────────────────────────── */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn     { from { opacity:0; transform:translateY(8px); }  to { opacity:1; transform:translateY(0); } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes slideRight { from{transform:translateX(-24px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes scaleIn    { from{transform:scale(0.96);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes float      { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-8px)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ══════════════════════════════════════════
   RESPONSIVIDADE — MOBILE FIRST
══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Layout Geral */
    .sidebar {
        position: fixed;
        left: -280px !important; /* Esconde a sidebar */
        top: 0;
        bottom: 0;
        z-index: 2000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar.open {
        left: 0 !important;
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Topbar Mobile - O Coração da Correção */
    .topbar {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        height: auto !important;
        gap: 12px !important;
    }

    .breadcrumb {
        width: 100% !important;
        order: -1;
        margin-bottom: 4px;
        font-size: 11px !important;
    }

    .topbar-right {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Esconde botão secundário no mobile para desafogar */
    .topbar-right .btn-secondary {
        display: none !important;
    }

    .hamburger-btn {
        display: block !important;
    }

    /* Dashboard Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Busca e Filtros */
    .search-bar {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 12px;
    }

    .candidates-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Tabelas Responsivas com Indicador */
    .table-wrap {
        display: block !important;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
        border-radius: 12px;
        position: relative;
    }

    .table-wrap::after {
        content: '↔ Deslize lateralmente';
        display: block;
        text-align: right;
        font-size: 9px;
        color: var(--slate);
        padding: 4px 8px;
        background: rgba(0,0,0,0.02);
    }

    .vagas-table {
        min-width: 850px;
    }

    /* Coluna de Ações Fixa — Sincronizada */
    .vagas-table th:last-child {
        position: sticky;
        right: 0;
        background: var(--navy) !important;
        z-index: 11;
    }

    .vagas-table td:last-child {
        position: sticky;
        right: 0;
        background: #fff;
        z-index: 10;
        box-shadow: -8px 0 15px rgba(0,0,0,0.05);
    }

    [data-theme="dark"] .vagas-table td:last-child {
        background: #0f172a !important;
        box-shadow: -8px 0 15px rgba(0,0,0,0.3);
    }
}

/* Breadcrumb Links */
.breadcrumb a {
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.breadcrumb a:hover {
    opacity: 1;
}

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 11px;
}

/* ── ESTADOS VAZIOS & PLACEHOLDERS ─────── */
.empty-state-text {
    font-size: 12px;
    color: var(--slate);
    text-align: center;
    padding: 50px;
    opacity: 0.6;
}

[data-theme="dark"] .empty-state-text {
    color: var(--dark); /* No dark mode, var(--dark) é a cor clara do texto */
    opacity: 0.4;
}