/* ==========================================================================
   Tema Fluxo Hex-Terminal — Fase B1 da integração do Fluxo ao sistema
   principal. Carregado POR ÚLTIMO (depois de style.css, lista-dinamica.css e
   layout-dinamico.css), então só remapeia as variáveis do tema e ajusta os
   componentes de casca (sidebar, topbar), cartões, tabelas, botões, chips,
   KPIs, Kanban e modais para o visual do Fluxo.

   Convivência com o resto do sistema:
   - claro/escuro continuam em [data-bs-theme] (botão do topo);
   - a cor de destaque personalizada (Configurações → Aparência) é injetada
     em <style> inline DEPOIS deste arquivo, então continua vencendo;
   - nada aqui altera HTML, rotas ou permissões.
   Para voltar ao visual anterior basta remover o <link> deste arquivo em
   views/layout/header.php.
   ========================================================================== */

:root {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --surface-alt: #f8f9fb;
    --border: #e3e6ec;
    --text-900: #1c2530;
    --text-600: #4b566a;
    --text-400: #667186;

    --accent: #0e7c6b;
    --accent-dark: #0a5c4f;
    --accent-soft: #e2f3ef;
    --on-accent: #ffffff;

    --success: #1a9b6c;
    --danger: #d6403f;
    --warning: #d98a00;

    --radius: 12px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(20, 30, 50, .06), 0 1px 3px rgba(20, 30, 50, .05);
    --shadow-md: 0 4px 14px rgba(20, 30, 50, .12);
    --sidebar-width: 236px;

    --bs-primary: var(--accent);
    --bs-primary-rgb: 14, 124, 107;
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 14, 124, 107;
    --bs-link-hover-color: var(--accent-dark);
    --bs-border-color: var(--border);
}

[data-bs-theme="dark"] {
    --bg: #11161d;
    --surface: #19202a;
    --surface-alt: #1e2631;
    --border: #2a3340;
    --text-900: #e6eaf0;
    --text-600: #b3bdcc;
    --text-400: #94a1b5;

    --accent: #3cc2aa;
    --accent-dark: #7fdcc9;
    --accent-soft: #18332f;
    --on-accent: #07211c;

    --success: #4cc790;
    --danger: #ef6f6c;
    --warning: #e8a93a;

    --shadow-sm: none;
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);

    --bs-primary-rgb: 60, 194, 170;
    --bs-link-color-rgb: 60, 194, 170;
}

@media screen {

    body {
        background: var(--bg);
        color: var(--text-900);
        -webkit-font-smoothing: antialiased;
    }

    a { color: var(--accent); }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* ------------------------------------------------------------ sidebar
       Painel liso (sem gradiente, sem luz animada na borda), item ativo em
       pastilha tintada e títulos de seção pequenos em caixa-alta. */
    .app-sidebar {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-right: 1px solid var(--border);
        box-shadow: none;
    }
    .app-sidebar::after { display: none; }

    .sidebar-brand { margin: .6rem .5rem 0; padding: .8rem .7rem; }
    .sidebar-brand:hover { box-shadow: none; border-color: transparent; background: var(--bg); }
    .sidebar-brand:hover .sidebar-brand-mark { transform: none; box-shadow: none; }
    .sidebar-brand-mark { box-shadow: none; border-radius: 8px; }
    .sidebar-brand-text strong { letter-spacing: -.01em; }

    .sidebar-nav { padding: .4rem .5rem 1rem; -webkit-mask-image: none; mask-image: none; }

    .sidebar-section {
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .05em;
        color: var(--text-400);
        padding: 1rem .6rem .3rem;
    }

    .sidebar-link {
        gap: .55rem;
        padding: .42rem .6rem;
        border-radius: 8px;
        font-weight: 500;
        color: var(--text-900);
    }
    .sidebar-link-icon { background: transparent; width: 22px; height: 22px; color: var(--text-400); }
    .sidebar-link:hover { background: var(--bg); color: var(--text-900); }
    .sidebar-link:hover .sidebar-link-icon { color: var(--accent); }
    .sidebar-link.active { background: var(--accent-soft); color: var(--text-900); font-weight: 600; }
    .sidebar-link.active .sidebar-link-icon { color: var(--accent); }
    .sidebar-link .badge { font-size: .7rem; }

    .sidebar-footer { border-top: 1px solid var(--border); }

    /* ------------------------------------------------------------ topbar */
    .app-topbar {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        border-bottom: 1px solid var(--border);
    }
    .topbar-breadcrumb strong { color: var(--text-900); font-weight: 600; }
    .topbar-search-btn { border-radius: 8px; background: var(--bg); }
    .topbar-search-btn kbd { border-radius: 5px; }
    .topbar-icon-btn:hover, .topbar-burger:hover { background: var(--bg); }

    /* ------------------------------------------------------------ conteúdo */
    .app-main { animation: none; }

    h1, .h1, .h2, .h3, .h4 { letter-spacing: -.015em; }

    /* ------------------------------------------------------------ cartões */
    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; }

    /* ------------------------------------------------------------ botões */
    .btn { border-radius: 9px; font-weight: 600; }
    .btn-primary {
        --bs-btn-bg: var(--accent);
        --bs-btn-border-color: var(--accent);
        --bs-btn-color: var(--on-accent);
        --bs-btn-hover-bg: var(--accent);
        --bs-btn-hover-border-color: var(--accent);
        --bs-btn-hover-color: var(--on-accent);
        --bs-btn-active-bg: var(--accent-dark);
        --bs-btn-active-border-color: var(--accent-dark);
        --bs-btn-active-color: var(--on-accent);
        --bs-btn-disabled-bg: var(--accent);
        --bs-btn-disabled-border-color: var(--accent);
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
        transition: filter .15s;
    }
    .btn-primary:hover { filter: brightness(1.07); }
    .btn-outline-primary {
        --bs-btn-color: var(--accent);
        --bs-btn-border-color: var(--accent);
        --bs-btn-hover-bg: var(--accent);
        --bs-btn-hover-border-color: var(--accent);
        --bs-btn-hover-color: var(--on-accent);
        --bs-btn-active-bg: var(--accent);
        --bs-btn-active-border-color: var(--accent);
        --bs-btn-active-color: var(--on-accent);
    }
    .btn-outline-secondary, .btn-light {
        --bs-btn-color: var(--text-900);
        --bs-btn-border-color: var(--border);
        --bs-btn-hover-bg: var(--bg);
        --bs-btn-hover-border-color: var(--border);
        --bs-btn-hover-color: var(--text-900);
        font-weight: 500;
    }
    .btn-outline-danger { font-weight: 500; }

    /* ------------------------------------------------------------ formulários */
    .form-control, .form-select { border-radius: 8px; border-color: var(--border); background-color: var(--bg); }
    .form-control:focus, .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
    .form-label { font-size: .85rem; color: var(--text-600); }

    /* ------------------------------------------------------------ tabelas */
    .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--bg); border-color: var(--border); }
    .table thead th {
        font-size: .8rem;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
        color: var(--text-400);
        border-bottom: 1px solid var(--border);
    }
    .table-hover > tbody > tr:hover > * { background: var(--bg); }

    /* ------------------------------------------------------------ chips e selos
       Selos viram "pílulas" suaves (fundo tintado + texto/borda na cor), como
       os chips do Fluxo. */
    .badge { border-radius: 999px; font-weight: 500; }
    .tag-chip { font-weight: 500; font-size: .75rem; padding: 0 .55rem; line-height: 1.5; }

    /* ------------------------------------------------------------ KPIs */
    .kpi-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
    .kpi-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
    .kpi-value { font-size: 1.75rem; letter-spacing: -.02em; }
    .kpi-label { color: var(--text-400); font-weight: 500; }

    /* ------------------------------------------------------------ Kanban
       Colunas viram "bandejas" cinza-claro com título e pontinho colorido;
       cartões sobem levemente e ganham borda de destaque ao passar o mouse. */
    .kanban-coluna { background: var(--bg); border-radius: var(--radius); padding: 4px; }
    .kanban-coluna-header { padding: .5rem .5rem .6rem; margin-bottom: .2rem; }
    .kanban-coluna-header strong { font-weight: 600; }
    .kanban-lista { border-radius: var(--radius-sm); }
    .kanban-lista.drop-hover { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
    .kanban-card { border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
    .kanban-card:hover { border-color: var(--accent); border-left-color: var(--cor-prioridade, var(--accent)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .kanban-card-vencimento.atrasada { color: var(--danger); font-weight: 600; }
    .kanban-add-btn { border-radius: 8px; }

    /* ------------------------------------------------------------ modais, menus, paleta */
    .modal-content { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); }
    .modal-header, .modal-footer { border-color: var(--border); }
    .dropdown-menu { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); }
    .dropdown-item:hover, .dropdown-item:focus { background: var(--bg); }
    .cmdk-caixa { border-radius: 16px; }
    .cmdk-item.ativo, .cmdk-item:hover { background: var(--accent-soft); }

    /* ------------------------------------------------------------ barras de progresso */
    .progress { background: var(--border); border-radius: 3px; }
    .progress-bar { background-color: var(--accent); }

    /* ------------------------------------------------------------ nav-tabs / pills (subnav das listas) */
    .nav-pills .nav-link { border-radius: 8px; color: var(--text-600); font-weight: 500; }
    .nav-pills .nav-link.active { background: var(--surface); color: var(--text-900); box-shadow: var(--shadow-sm); }
    .nav-tabs .nav-link.active { color: var(--text-900); border-bottom-color: var(--accent); }

    /* ------------------------------------------------------------ rodapé da página */
    .app-rodape { color: var(--text-400); }
}

/* ==========================================================================
   Fase B3 — cronômetro de tarefas na barra superior (ver cronometro.js).
   Usa só variáveis do tema, então acompanha claro/escuro e os temas por cima.
   ========================================================================== */
.topbar-timer {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    padding: .15rem .2rem .15rem .65rem;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-variant-numeric: tabular-nums;
}
.topbar-timer-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-900);
    text-decoration: none;
    font-size: .85rem;
    line-height: 1;
}
.topbar-timer-link i { color: var(--danger); animation: cronometroPulso 1.6s ease-in-out infinite; }
.topbar-timer-nome { color: var(--text-400); }
.topbar-timer-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    cursor: pointer;
}
.topbar-timer-stop:hover { filter: brightness(1.1); }
.topbar-timer-stop:disabled { opacity: .6; cursor: progress; }
@keyframes cronometroPulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .topbar-timer-link i { animation: none; } }