/* ============================================================
   NEXUS AI — Tema "Neon Pro" (Ago-2026)
   Camada por cima de style.css: paleta mais profissional, tipografia
   mais sóbria, dimensões mais compactas e anel néon animado à volta de
   painéis, KPIs, tabelas, modais e cartões.
   Reverter: remover o <link> em app/index.html.
   ============================================================ */

/* ——— 1. Paleta e escala ——— */
:root {
    --bg-primary: #0A0B0E;
    --bg-sidebar: #0D0F13;
    --bg-panel: rgba(17, 19, 24, 0.82);
    --bg-card: rgba(22, 24, 30, 0.78);

    /* ouro mais "latão", menos amarelo — lê-se profissional em fundo escuro */
    --accent-gold: #D9A441;
    --accent-gold-hover: #EBB95A;
    --accent-gold-glow: rgba(217, 164, 65, 0.22);

    /* néon: ciano-eléctrico + ouro (as duas cores da linha em movimento) */
    --neon-a: #22D3EE;
    --neon-b: #D9A441;
    --neon-c: #8B5CF6;

    --text-primary: #ECEAE4;
    --text-secondary: #A6A49C;
    --text-muted: #6B6A64;

    --border-gold: rgba(217, 164, 65, 0.14);
    --border-gold-active: rgba(217, 164, 65, 0.35);
    --border-dark: rgba(255, 255, 255, 0.06);

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #38BDF8;

    --border-radius: 14px;
    --radius-sm: 10px;
    --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ——— 2. Tipografia ——— */
body {
    font-family: var(--font-secondary);        /* Plus Jakarta Sans no corpo: mais neutra */
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "tnum" 1, "cv11" 1; /* números tabulares em tabelas e KPIs */
}
h1, h2, h3, h4, .brand-title, .kpi-value, .view-title-container h1 {
    font-family: var(--font-primary);          /* Outfit só nos títulos */
    letter-spacing: -0.01em;
}
.view-title-container h1 { font-size: 24px; font-weight: 600; }
.view-title-container p { font-size: 13px; }
.brand-title { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; }
.brand-subtitle { font-size: 10px; letter-spacing: 1.4px; }
.menu-section-header { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; padding: 12px 12px 4px; }
.menu-item { font-size: 13.5px; padding: 10px 12px; border-radius: var(--radius-sm); }
.menu-item i { font-size: 17px; }
.menu-item.active { background: linear-gradient(135deg, var(--accent-gold), #B98A2C); box-shadow: 0 6px 18px rgba(217, 164, 65, 0.22); }
.kpi-title { font-size: 11px; letter-spacing: 0.8px; }
.kpi-value { font-size: 26px; font-weight: 600; margin-top: 2px; }
.custom-table th { font-size: 11px; letter-spacing: 0.7px; padding: 12px 14px; }
.custom-table td { font-size: 13px; padding: 12px 14px; }
.btn { font-family: var(--font-secondary); font-size: 13px; padding: 9px 16px; border-radius: 9px; }
.badge { font-family: var(--font-secondary); letter-spacing: 0.3px; }

/* ——— 3. Dimensões ——— */
.sidebar { width: 256px; }
.sidebar-brand { padding: 20px 22px; }
.header { height: 64px; padding: 0 28px; }
.header-search { width: 300px; padding: 7px 14px; border-radius: 12px; }
.content-body { padding: 28px; }
.glass-panel { padding: 22px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }
.kpi-grid { gap: 16px; margin-bottom: 20px; }
.kpi-card { padding: 18px; gap: 14px; }
.kpi-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.dashboard-grid { gap: 20px; margin-bottom: 20px; }
.view-header { margin-bottom: 20px; }
.table-container { margin-top: 14px; }

/* ——— 4. Anel néon animado ———
   Técnica: pseudo-elemento com gradiente cónico que roda (--nx-angle) e uma
   máscara que só deixa ver 1px de contorno. Não afecta o layout nem o conteúdo. */
@property --nx-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes nx-spin { to { --nx-angle: 360deg; } }

.glass-panel,
.kpi-card,
.table-container,
.modal-card,
.kanban-col,
.shortcut-card,
.chart-card,
.dashboard-list,
.calculator-results {
    position: relative;
    isolation: isolate;
    border-radius: var(--border-radius);
}
.table-container {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-dark);
    padding: 2px;
}
.glass-panel::before,
.kpi-card::before,
.table-container::before,
.modal-card::before,
.kanban-col::before,
.shortcut-card::before,
.chart-card::before,
.dashboard-list::before,
.calculator-results::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;                             /* espessura da linha */
    background: conic-gradient(from var(--nx-angle),
        transparent 0deg 235deg,
        var(--neon-b) 285deg,
        var(--neon-a) 330deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: nx-spin 6s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}
/* cada família com um tempo/fase diferente para não rodarem em sincronia */
.kpi-card::before        { animation-duration: 5s; }
.kpi-card:nth-child(2)::before { animation-delay: -1.3s; }
.kpi-card:nth-child(3)::before { animation-delay: -2.6s; }
.kpi-card:nth-child(4)::before { animation-delay: -3.9s; }
.table-container::before { animation-duration: 8s; animation-direction: reverse; }
.modal-card::before      { animation-duration: 4s; opacity: 1; }
.kanban-col::before      { animation-duration: 9s; }
.shortcut-card::before   { animation-duration: 7s; }
/* brilho suave que acompanha (só nos elementos maiores) */
.glass-panel::after,
.modal-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--nx-angle), transparent 0deg 270deg, var(--neon-a) 330deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: blur(6px);
    animation: nx-spin 6s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.modal-card::after { animation-duration: 4s; }
/* conteúdo por cima dos anéis */
.glass-panel > *, .kpi-card > *, .modal-card > *, .kanban-col > *, .shortcut-card > *, .table-container > *, .dashboard-list > * { position: relative; z-index: 1; }

/* hover: o anel acende mais */
.kpi-card:hover::before, .glass-panel:hover::before, .shortcut-card:hover::before { opacity: 1; }
.kpi-card:hover { transform: translateY(-2px); border-color: var(--border-gold-active); }

/* ——— 5. Tabelas: mais legíveis ——— */
.custom-table thead th { background: rgba(255, 255, 255, 0.025); position: sticky; top: 0; z-index: 2; }
.custom-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); }
.custom-table tbody tr:hover td { background: rgba(217, 164, 65, 0.05); }
.custom-table td, .custom-table th { border-bottom-color: rgba(255, 255, 255, 0.05); }
.custom-table tbody tr:last-child td { border-bottom: none; }

/* ——— 6. Estados/badges com cores mais consistentes ——— */
.badge-success, .kanban-tag-prio-low   { background: rgba(34, 197, 94, 0.12);  color: #4ADE80; }
.badge-warning, .kanban-tag-prio-medium{ background: rgba(245, 158, 11, 0.12); color: #FBBF24; }
.badge-danger,  .kanban-tag-prio-high  { background: rgba(239, 68, 68, 0.12);  color: #F87171; }
.status-indicator { border-radius: 12px; }

/* ——— 7. Acessibilidade: sem movimento se o utilizador pedir ——— */
@media (prefers-reduced-motion: reduce) {
    .glass-panel::before, .kpi-card::before, .table-container::before, .modal-card::before,
    .kanban-col::before, .shortcut-card::before, .chart-card::before, .dashboard-list::before, .calculator-results::before,
    .glass-panel::after, .modal-card::after { animation: none; }
}