/* =====================================================================
   brand-meyou-extra.css — refinamentos MANUAIS da identidade Me&You
   (par do brand-meyou.css, que é GERADO e só recolore; este é autoral
   e pode ser editado). Carregado por último no HeadCSS.cshtml.

   Assinatura escolhida (uma só, com contenção): o item ATIVO da sidebar
   ganha o gradiente da marca como trilho à esquerda + fundo no tint —
   é o elemento presente em TODAS as telas internas, a identidade
   acompanha o operador a navegação inteira. O resto fica quieto.
   ===================================================================== */

:root {
    --meyou-brand: #3b4184;
    --meyou-deep: #21357a;
    --meyou-blue: #5687da;
    --meyou-tint: #e9ecf9;
    --meyou-accent: #46b6e0;
    --meyou-gradient: linear-gradient(180deg, #21357a 0%, #5687da 55%, #62bae0 100%);
}

/* ── Sidebar: item ativo com trilho em gradiente ─────────────────────── */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar .pc-submenu .pc-item.active > .pc-link,
.pc-sidebar .pc-link.active {
    position: relative;
    background: var(--meyou-tint);
    color: var(--meyou-deep);
    border-radius: 8px;
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before,
.pc-sidebar .pc-navbar .pc-submenu .pc-item.active > .pc-link::before,
.pc-sidebar .pc-link.active::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--meyou-gradient);
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon,
.pc-sidebar .pc-link.active .pc-micon {
    color: var(--meyou-brand);
}

/* ── Sidebar: bloco da marca com fio em gradiente ────────────────────── */
.pc-sidebar .m-header {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #21357a 0%, #5687da 45%, #62bae0 100%) 1;
}

/* ── Dark theme: mesmos ganchos, superfícies da atmosfera ────────────── */
[data-pc-theme="dark"] .pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
[data-pc-theme="dark"] .pc-sidebar .pc-navbar .pc-submenu .pc-item.active > .pc-link,
[data-pc-theme="dark"] .pc-sidebar .pc-link.active {
    background: rgba(86, 135, 218, 0.14);
    color: #a9c3ef;
}
[data-pc-theme="dark"] .pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon,
[data-pc-theme="dark"] .pc-sidebar .pc-link.active .pc-micon {
    color: #6c98df;
}

/* Acessibilidade: foco visível na paleta da marca (o template some com ele) */
.pc-sidebar .pc-link:focus-visible {
    outline: 2px solid var(--meyou-accent);
    outline-offset: -2px;
    border-radius: 8px;
}

/* ── Fase 3: tabelas e cards (o habitat do operador) ─────────────────── */
/* Cabeçalho de tabela como eyebrow: rótulo estrutural, não linha cinza.
   Vale p/ .table simples e p/ todos os DataTables (mesmo markup). */
.table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;                       /* ink-mute do design system */
    border-top: 0;
    border-bottom: 2px solid #d9def2;     /* fio no tint da marca */
    background: transparent;
}
.table > thead > tr > th a { color: inherit; }   /* th ordenável do DataTables */

/* Título de card no indigo profundo — assinatura silenciosa em toda tela.
   Só no tema claro; no escuro o contraste do template já resolve. */
body:not([data-pc-theme="dark"]) .card-header h5,
body:not([data-pc-theme="dark"]) .card .card-header .h5 {
    color: var(--meyou-deep);
}

/* Dark: mesmo eyebrow, superfícies da atmosfera */
[data-pc-theme="dark"] .table > thead > tr > th {
    color: #8ea3c4;
    border-bottom-color: rgba(86, 135, 218, 0.28);
}