/* =========================================================
   Ravi Developer — THEME (tokens compartilhados + polish base)
   Fonte ÚNICA da identidade visual. Carregado por TODAS as telas
   (layouts app + chat), depois de app.css/components.css para
   sobrescrever os tokens antigos com a paleta refinada (a mesma
   do chat-polish). Princípios: sistema, contenção, acabamento.
   ========================================================= */

:root {
    /* Superfícies (dark, sóbrio) */
    --bg-primary:   #0b0b0f;
    --bg-secondary: #131318;
    --bg-tertiary:  #1b1b22;
    --bg-hover:     #24242d;
    --bg-elevated:  #1e1e26;

    /* Texto */
    --text-primary:   #f4f4f6;
    --text-secondary: #b3b3bd;
    --text-muted:     #6e6e7a;

    /* Bordas */
    --border-color: #26262e;
    --border-light: #34343f;

    /* Accent (indigo-violeta confiante) */
    --accent-primary:   #7c6cff;
    --accent-secondary: #a78bfa;
    --accent-hover:     #6a58f5;
    --accent-soft:      rgba(124, 108, 255, 0.14);
    --accent-rgb:       124, 108, 255;
    --primary-color:    #7c6cff; /* alias usado em telas antigas */

    /* Estado */
    --success: #34d399;
    --warning: #f5b14b;
    --danger:  #f4626b;
    --info:    #5b9dff;

    /* Sombras em camadas */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
    --shadow-md: 0 6px 18px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.22);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.30);
    --focus-ring: 0 0 0 3px var(--accent-soft);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Tema claro — paleta COMPLETA (vem depois do :root, mesma especificidade →
   vence quando há data-theme="light"). Sem isto o toggle não muda nada. */
[data-theme="light"] {
    --bg-primary:   #ffffff;
    --bg-secondary: #f7f7fb;
    --bg-tertiary:  #eef0f5;
    --bg-hover:     #e7e9f0;
    --bg-elevated:  #ffffff;

    --text-primary:   #16161d;
    --text-secondary: #4a4a55;
    --text-muted:     #8a8a98;

    --border-color: #e4e6ec;
    --border-light: #d8dae2;

    --accent-primary:   #6a58f5;
    --accent-secondary: #8b5cf6;
    --accent-hover:     #5a47e6;
    --accent-soft:      rgba(106, 88, 245, 0.12);
    --primary-color:    #6a58f5;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 6px 18px rgba(20,20,40,.10), 0 2px 6px rgba(20,20,40,.06);
    --shadow-lg: 0 18px 50px rgba(20,20,40,.18), 0 4px 12px rgba(20,20,40,.10);
    --focus-ring: 0 0 0 3px var(--accent-soft);
}

/* ---------- Base ---------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Foco visível e consistente (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}

/* ---------- Botões (corrige "texto some no hover" + acabamento) ---------- */
.btn,
a.btn,
button.btn {
    transition: background-color .16s var(--ease), border-color .16s var(--ease),
                color .16s var(--ease), transform .08s var(--ease), box-shadow .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary,
a.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.btn-primary:hover,
a.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff; /* texto SEMPRE branco no hover */
}

.btn-ghost,
a.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}
.btn-ghost:hover,
a.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.btn-secondary,
a.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.btn-secondary:hover,
a.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger, a.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover, a.btn-danger:hover { filter: brightness(.93); color: #fff; }

/* ---------- Scrollbar discreta ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* ---------- Polimento do DASHBOARD ---------- */
.dashboard { padding: 2rem 2.5rem; max-width: none; margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    transition: transform .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-light); box-shadow: var(--shadow-md); }
.stat-card-icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: var(--shadow-sm);
}
.stat-card-icon svg { width: 22px; height: 22px; }
.stat-card-content { display: flex; flex-direction: column; min-width: 0; }
.stat-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-card-label { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.dashboard-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.dashboard-card .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.dashboard-card .card-header h3 { font-size: 1rem; margin: 0; }
.dashboard-card .card-content { padding: .85rem 1rem 1.1rem; }
.project-list { display: flex; flex-direction: column; gap: .3rem; }
.project-item { display: flex; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background .14s var(--ease); }
.project-item:hover { background: var(--bg-hover); }
.project-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.project-info { display: flex; flex-direction: column; min-width: 0; }
.project-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-meta { font-size: .78rem; color: var(--text-muted); }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
@media (max-width: 640px) { .dashboard { padding: 1.25rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Formulários (auth, settings, modais) ---------- */
.form-input, .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 10px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.form-input::placeholder, .form-control::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-input:focus, .form-control:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
    background: var(--bg-secondary);
}
.form-input.is-invalid, .form-control.is-invalid { border-color: var(--danger); }
.form-label { color: var(--text-secondary); font-weight: 500; }
.form-link, a.form-link { color: var(--accent-primary); text-decoration: none; font-size: .85rem; }
.form-link:hover { text-decoration: underline; }
.form-error { color: var(--danger); font-size: .82rem; }

/* Alerts */
.alert { border-radius: 10px; border: 1px solid var(--border-light); }
.alert-danger  { background: rgba(244,98,107,.12);  border-color: rgba(244,98,107,.35);  color: #ffb3b8; }
.alert-success { background: rgba(52,211,153,.12);  border-color: rgba(52,211,153,.35);  color: #8ef0ca; }
.alert-info    { background: rgba(91,157,255,.12);  border-color: rgba(91,157,255,.35);  color: #b7d3ff; }
.alert-warning { background: rgba(245,177,75,.12);  border-color: rgba(245,177,75,.35);  color: #ffd79a; }

.form-hint { display:block; margin-top:.35rem; font-size:.78rem; color: var(--text-muted); }

/* ---------- Settings (refina sobre o <style> inline das páginas) ---------- */
.settings-page { max-width: 1240px; }
.settings-page .settings-header h1 { letter-spacing: -0.01em; }
.settings-page .settings-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; }
.settings-page .settings-section h2 { border-bottom: 1px solid var(--border-color); padding-bottom: .75rem; }
.settings-page .settings-nav-item { border-radius: 10px; transition: background .14s var(--ease), color .14s var(--ease); }
.settings-page .settings-nav-item:hover:not(.active) { background: var(--bg-hover); color: var(--text-primary); }
.settings-page .settings-nav-item.active { background: var(--accent-primary); color: #fff; }
.settings-page .settings-danger { border-color: rgba(244,98,107,.35); }

/* ---------- Indicador "Trabalhando" (agente em background) ---------- */
.working-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--warning, #f5b14b); background: rgba(245,177,75,.12); border: 1px solid rgba(245,177,75,.30); padding: .08rem .45rem; border-radius: 999px; vertical-align: middle; }
.working-badge .working-dot, .working-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warning, #f5b14b); animation: workPulse 1.3s ease-in-out infinite; }
@keyframes workPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
.project-card.is-working { border: 1px solid rgba(245,177,75,.35); box-shadow: 0 0 0 1px rgba(245,177,75,.12); }
.project-info h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Faixa de impersonação (admin vendo como usuário) ---------- */
.impersonation-bar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .5rem 1rem; font-size: .85rem; color: #1a1208; background: linear-gradient(90deg, var(--warning, #f5b14b), #f7c06a); border-bottom: 1px solid rgba(0,0,0,.15); }
.impersonation-bar strong { font-weight: 700; }
.impersonation-bar .btn { background: rgba(0,0,0,.78); color: #fff; border: 0; padding: .25rem .7rem; border-radius: 999px; font-weight: 600; cursor: pointer; }
.impersonation-bar .btn:hover { background: #000; color: #fff; }

/* Ponto verde pulsando = projeto/chat trabalhando agora (usado na sidebar e cards). */
.proj-working-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; vertical-align: middle; flex: 0 0 auto; animation: projDotPulse 1.5s ease-in-out infinite; }
@keyframes projDotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); opacity: 1; } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); opacity: .6; } }