/* ==========================================================================
   Tema hex_terminal — identidade visual do comercial "hex_terminal Comercial"
   aplicada ao sistema de gestão.

   Carregado POR ÚLTIMO (depois de style.css, lista-dinamica.css,
   layout-dinamico.css e tema-fluxo.css): só remapeia variáveis e ajusta o
   visual dos componentes. Não altera HTML, rotas ou permissões.

   Linguagem herdada do comercial:
   - palco preto cheio com brilho radial vermelho ao fundo;
   - vermelho #EF4444 → laranja #F97316 como gradiente de destaque;
   - tipografia SF Pro (hospedada em /assets/fonts/sf-pro), títulos 800 com tracking apertado;
   - legendas em caixa-alta com espaçamento largo (".cap");
   - botões e controles em pílula, painéis translúcidos com borda fina;
   - cursor "_" piscando na marca, números tabulares no relógio e KPIs.

   Claro/escuro continuam em [data-bs-theme] (botão do topo). O escuro é o
   padrão (palco preto). A cor de destaque personalizada (Configurações →
   Aparência) continua valendo: ela troca o início do gradiente.
   Para voltar ao visual anterior basta remover o <link> deste arquivo em
   views/layout/header.php.
   ========================================================================== */

:root {
    --hx-red: #EF4444;
    --hx-orange: #F97316;
    --accent-2: var(--hx-orange);
    --grad: linear-gradient(90deg, var(--accent), var(--accent-2));
    --grad-45: linear-gradient(135deg, var(--accent), var(--accent-2));

    --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--font-sans);

    /* claro */
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-alt: #fafafc;
    --panel: rgba(0, 0, 0, .035);
    --border: #e4e4e9;
    --line: rgba(0, 0, 0, .12);
    --text-900: #1d1d1f;
    --text-600: #48484d;
    --text-400: #6e6e73;

    --accent: #EF4444;
    --accent-dark: #b91c1c;
    --accent-soft: rgba(239, 68, 68, .10);
    --on-accent: #ffffff;

    --success: #138a5b;
    --danger: #d92d20;
    --warning: #c2570c;

    --radius: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .12);
    --glow: radial-gradient(circle at 78% -8%, rgba(239, 68, 68, .10), rgba(255, 255, 255, 0) 52%);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 239, 68, 68;
    --bs-link-color: var(--accent-dark);
    --bs-link-color-rgb: 185, 28, 28;
    --bs-link-hover-color: var(--accent);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-900);
    --bs-border-color: var(--border);
}

[data-bs-theme="dark"] {
    /* palco preto */
    --bg: #000000;
    --surface: #0b0b0d;
    --surface-alt: #111114;
    --panel: rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .14);
    --line: rgba(255, 255, 255, .16);
    --text-900: #f5f5f7;
    --text-600: #c7c7cc;
    --text-400: #a1a1a6;

    --accent: #EF4444;
    --accent-dark: #f87171;
    --accent-soft: rgba(239, 68, 68, .16);
    --on-accent: #ffffff;

    --success: #34d399;
    --danger: #ff6b6b;
    --warning: #fbbf24;

    --shadow-sm: none;
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .7);
    --glow: radial-gradient(circle at 70% -10%, rgba(239, 68, 68, .20), rgba(0, 0, 0, 0) 55%);

    --bs-primary-rgb: 239, 68, 68;
    --bs-link-color: var(--accent-dark);
    --bs-link-color-rgb: 248, 113, 113;
    --bs-link-hover-color: #fca5a5;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-900);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--text-400);
    --bs-tertiary-bg: var(--surface-alt);
}

@keyframes hxBlink { 50% { opacity: 0; } }
@keyframes hxShine { to { background-position: -200% 0; } }
@keyframes hxPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 14px transparent; }
}
@keyframes hxDraw { to { stroke-dashoffset: 0; } }
@keyframes hxFade { to { opacity: 1; } }

/* texto em gradiente (classe utilitária, igual ao ".grad" do comercial) */
.grad {
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hxShine 3.2s linear infinite;
}

@media screen {

    html { color-scheme: light; }
    [data-bs-theme="dark"] { color-scheme: dark; }

    body {
        font-family: var(--font-sans);
        background: var(--bg);
        color: var(--text-900);
    }

    /* brilho radial ao fundo (o "glow" do palco) */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: var(--glow);
    }

    ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
    a { color: var(--accent-dark); }
    a:hover { color: var(--accent); }
    :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; border-radius: 8px; }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.12;
    }

    /* ---------------------------------------------------------- sidebar */
    .app-sidebar {
        background: color-mix(in srgb, var(--surface) 78%, transparent);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-right: 1px solid var(--line);
    }

    .sidebar-brand:hover { background: var(--panel); }
    .sidebar-brand-mark { border-radius: 9px; box-shadow: 0 0 0 1px var(--line), 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
    .sidebar-brand-mark.marca-padrao { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
    .sidebar-brand-text strong {
        font-weight: 800;
        letter-spacing: -.045em;
        font-size: 1.05rem;
    }
    /* cursor piscando, como no nome hex_terminal do comercial */
    .sidebar-brand-text strong::after {
        content: "_";
        color: var(--accent);
        font-weight: 300;
        margin-left: 1px;
        animation: hxBlink 1s steps(1) infinite;
    }
    .sidebar-brand-text small {
        font-size: .62rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-400);
    }

    .sidebar-section {
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-400);
        padding: 1.15rem .65rem .35rem;
    }

    .sidebar-link {
        position: relative;
        border-radius: 12px;
        color: var(--text-600);
        font-weight: 500;
        transition: background .2s, color .2s;
    }
    .sidebar-link:hover { background: var(--panel); color: var(--text-900); }
    .sidebar-link:hover .sidebar-link-icon { color: var(--accent-dark); }
    .sidebar-link.active {
        background: var(--accent-soft);
        color: var(--text-900);
        font-weight: 600;
    }
    .sidebar-link.active::before {
        content: "";
        position: absolute;
        left: -.5rem;
        top: 22%;
        bottom: 22%;
        width: 3px;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--accent), var(--accent-2));
    }
    .sidebar-link.active .sidebar-link-icon { background: transparent; box-shadow: none; }
    .sidebar-link.active .sidebar-link-icon i {
        background: var(--grad-45);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .sidebar-footer { border-top: 1px solid var(--line); }
    .sidebar-user:hover { background: var(--panel); }

    .avatar-chip {
        background: var(--grad-45);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 0 0 1px var(--line);
    }

    /* ---------------------------------------------------------- topbar */
    .app-topbar {
        background: color-mix(in srgb, var(--surface) 72%, transparent);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
    }
    .topbar-breadcrumb { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-400); }
    .topbar-breadcrumb strong { color: var(--text-900); font-weight: 700; }

    .topbar-search-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
    .topbar-search-btn:hover { background: color-mix(in srgb, var(--panel) 60%, var(--line)); color: var(--text-900); }
    .topbar-search-btn kbd { background: transparent; border: 1px solid var(--line); color: var(--text-400); }

    .topbar-icon-btn {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--text-900);
    }
    .topbar-icon-btn:hover, .topbar-burger:hover { background: color-mix(in srgb, var(--panel) 55%, var(--line)); }
    .topbar-user-btn { border-radius: 999px; }

    /* relógio = cronômetro do comercial: números grandes em gradiente */
    .topbar-clock {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: .28rem .85rem .28rem .7rem;
        color: var(--text-900);
    }
    .topbar-clock-icon { color: var(--accent); opacity: 1; }
    .topbar-clock-time {
        font-family: var(--font-sans);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -.04em;
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .topbar-clock-date {
        font-size: .6rem;
        letter-spacing: .14em;
        color: var(--text-400);
        opacity: 1;
    }

    /* ---------------------------------------------------------- cartões */
    .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .card-header { border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: -.01em; }
    .card-footer { border-top: 1px solid var(--line); }

    /* ---------------------------------------------------------- botões */
    .btn { border-radius: 999px; font-weight: 600; letter-spacing: -.005em; }
    .btn-sm { padding-left: .85rem; padding-right: .85rem; }

    .btn-primary {
        --bs-btn-bg: transparent;
        --bs-btn-border-color: transparent;
        --bs-btn-color: #fff;
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: transparent;
        --bs-btn-hover-color: #fff;
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: transparent;
        --bs-btn-active-color: #fff;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: transparent;
        background: var(--grad);
        border: 0;
        color: #fff;
        box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
        transition: filter .15s, transform .15s, box-shadow .15s;
    }
    .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent); }
    .btn-primary:active { transform: none; }
    .btn-primary:disabled, .btn-primary.disabled { background: var(--grad); filter: grayscale(.4); box-shadow: none; }

    .btn-outline-primary {
        --bs-btn-color: var(--accent-dark);
        --bs-btn-border-color: color-mix(in srgb, var(--accent) 60%, transparent);
        --bs-btn-hover-bg: var(--accent-soft);
        --bs-btn-hover-border-color: var(--accent);
        --bs-btn-hover-color: var(--text-900);
        --bs-btn-active-bg: var(--accent-soft);
        --bs-btn-active-border-color: var(--accent);
        --bs-btn-active-color: var(--text-900);
    }
    .btn-outline-secondary, .btn-light {
        --bs-btn-color: var(--text-900);
        --bs-btn-bg: var(--panel);
        --bs-btn-border-color: var(--line);
        --bs-btn-hover-bg: color-mix(in srgb, var(--panel) 55%, var(--line));
        --bs-btn-hover-border-color: var(--line);
        --bs-btn-hover-color: var(--text-900);
        --bs-btn-active-bg: color-mix(in srgb, var(--panel) 40%, var(--line));
        --bs-btn-active-color: var(--text-900);
    }

    /* ---------------------------------------------------------- formulários */
    .form-control, .form-select {
        background-color: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--text-900);
    }
    .form-control::placeholder { color: var(--text-400); }
    .form-control:focus, .form-select:focus {
        background-color: var(--panel);
        color: var(--text-900);
        border-color: var(--accent);
        box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--accent) 24%, transparent);
    }
    .form-control:disabled, .form-select:disabled { opacity: .55; }
    .form-check-input { background-color: var(--panel); border-color: var(--line); }
    .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
    .form-label {
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-400);
    }
    .input-group-text { background: var(--panel); border-color: var(--line); color: var(--text-400); }

    /* ---------------------------------------------------------- tabelas */
    .table { border-color: var(--line); }
    .table > :not(caption) > * > * { border-bottom-color: var(--line); }
    .table thead th {
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-400);
        border-bottom: 1px solid var(--line);
    }
    .table-hover > tbody > tr:hover > * { background: var(--panel); }

    /* ---------------------------------------------------------- KPIs */
    .kpi-card { border-radius: var(--radius); }
    .kpi-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 14px 36px color-mix(in srgb, var(--accent) 14%, transparent); }
    .kpi-card .kpi-icon { border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
    .kpi-value { font-family: var(--font-display); font-weight: 700; letter-spacing: -.05em; font-size: 1.9rem; }
    .kpi-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-400); font-weight: 600; }
    .kpi-card-accent .kpi-value {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .kpi-card-accent .kpi-icon { color: var(--accent-dark); background: var(--accent-soft); border-color: transparent; }

    /* ---------------------------------------------------------- selos */
    .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

    /* ---------------------------------------------------------- Kanban */
    .kanban-coluna { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
    .kanban-coluna-header strong { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .kanban-card { background: var(--surface); border-color: var(--line); border-radius: 14px; }
    .kanban-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent); }
    .kanban-lista.drop-hover { background: var(--accent-soft); outline: 2px dashed var(--accent); }

    /* ---------------------------------------------------------- progresso (a barra do comercial) */
    .progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
    .progress-bar { background: var(--grad); border-radius: 4px; }

    /* ---------------------------------------------------------- abas e pílulas */
    .nav-pills .nav-link { border-radius: 999px; color: var(--text-600); font-weight: 600; }
    .nav-pills .nav-link:hover { color: var(--text-900); background: var(--panel); }
    .nav-pills .nav-link.active { background: var(--accent-soft); color: var(--text-900); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
    .nav-tabs { border-bottom-color: var(--line); }
    .nav-tabs .nav-link { color: var(--text-400); font-weight: 600; }
    .nav-tabs .nav-link.active {
        background: transparent;
        color: var(--text-900);
        border-color: transparent transparent var(--accent);
    }

    /* ---------------------------------------------------------- modais, menus, paleta (Ctrl K) */
    .modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); }
    .modal-header, .modal-footer { border-color: var(--line); }
    .modal-title { font-weight: 800; letter-spacing: -.03em; }
    .dropdown-menu {
        --bs-dropdown-bg: var(--surface);
        --bs-dropdown-color: var(--text-900);
        --bs-dropdown-link-color: var(--text-900);
        --bs-dropdown-link-hover-bg: var(--panel);
        --bs-dropdown-link-hover-color: var(--text-900);
        --bs-dropdown-link-active-bg: var(--accent-soft);
        --bs-dropdown-link-active-color: var(--text-900);
        --bs-dropdown-border-color: var(--line);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow-md);
    }
    .dropdown-divider { border-color: var(--line); }
    .cmdk-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .cmdk-caixa { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); }
    .cmdk-item.ativo, .cmdk-item:hover { background: var(--accent-soft); }

    .alert { border-radius: 14px; }

    /* ---------------------------------------------------------- rodapé */
    .app-rodape {
        border-top: 1px solid var(--line);
        font-size: .66rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-400);
    }

    /* barra de rolagem fina no tom do palco */
    * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

    /* ---------------------------------------------------------- tela de login */
    .login-stage { position: relative; }
    .login-card {
        background: color-mix(in srgb, var(--surface) 80%, transparent);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border-radius: 24px;
        box-shadow: var(--shadow-md);
    }
    .login-hex { width: 84px; height: auto; display: block; margin: 0 auto 1.1rem; overflow: visible; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent)); }
    .login-hex polygon {
        fill: none;
        stroke: var(--accent);
        stroke-width: 3;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: hxDraw 1.8s cubic-bezier(.3, .7, .2, 1) .1s forwards;
    }
    .login-hex .gl { fill: none; stroke: var(--text-900); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: hxFade .8s ease 1.1s forwards; }
    .login-hex .us { fill: var(--accent); opacity: 0; animation: hxFade .8s ease 1.3s forwards, hxBlink 1s steps(1) 2.1s infinite; }
    .login-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.045em; }
    .login-card .btn-primary { padding-top: .7rem; padding-bottom: .7rem; font-size: 1rem; animation: hxPulse 2.4s ease-out infinite; }
}

@media screen and (prefers-reduced-motion: reduce) {
    .grad, .sidebar-brand-text strong::after, .login-card .btn-primary, .login-hex .us { animation: none; }
    .login-hex polygon { stroke-dashoffset: 0; animation: none; }
    .login-hex .gl, .login-hex .us { opacity: 1; }
}