/*
 * Visual MJDEV no Gestor — a linguagem do EduTrack Dashboard (HorizonX 1.0.1), a mesma do MJDEV CRM.
 *
 * Do EduTrack vem a ESTRUTURA: navegação principal numa pílula no topo (sem barra lateral no desktop),
 * cartões grandes e macios (raios 20/14/10), sombras leves, títulos em Bricolage Grotesque e texto em
 * DM Sans. A COR é a da MJDEV (o verde-petróleo do painel, `--primary-*`), como no CRM: o roxo e o lima
 * do desenho são de outra marca. Status (pago, vencido, crítico) continuam nas cores do Filament.
 *
 * Só aparência: nenhum seletor esconde campo, ação ou informação. Carrega depois do menu-compacto.css
 * (ordem dos assets no painel), por isso vence com a mesma especificidade.
 */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
    --mj-marca: var(--primary-600);
    --mj-marca-escura: var(--primary-700);
    --mj-marca-suave: color-mix(in srgb, var(--primary-500) 14%, #fff);
    --mj-marca-palida: color-mix(in srgb, var(--primary-500) 6%, #fff);

    --mj-escuro: #19232b;
    --mj-texto-forte: #19232b;
    --mj-texto: #303941;
    --mj-suave: #5f6a73;

    --mj-fundo: #eef3f2;
    --mj-superficie: #fff;
    --mj-superficie-2: #f3f7f6;
    --mj-superficie-3: #e3ebe9;
    --mj-linha: #dde5e4;

    --mj-raio-g: 20px;
    --mj-raio-m: 14px;
    --mj-raio-p: 10px;

    --mj-sombra: 0 1px 2px rgb(16 40 40 / 4%), 0 10px 28px -18px rgb(16 40 40 / 22%);
    --mj-sombra-alta: 0 2px 4px rgb(16 40 40 / 5%), 0 22px 44px -22px rgb(16 40 40 / 38%);

    --mj-fonte-titulo: 'Bricolage Grotesque', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --mj-cabecalho: 66px;
    --mj-ease: cubic-bezier(.2, .8, .2, 1);
}

:root.dark {
    --mj-marca: var(--primary-500);
    --mj-marca-escura: var(--primary-300);
    --mj-marca-suave: color-mix(in srgb, var(--primary-500) 22%, #151d22);
    --mj-marca-palida: color-mix(in srgb, var(--primary-500) 10%, #151d22);

    --mj-escuro: #0a1114;
    --mj-texto-forte: #f2f5f6;
    --mj-texto: #d6dde0;
    --mj-suave: #9aa6ad;

    --mj-fundo: #0d1316;
    --mj-superficie: #151d22;
    --mj-superficie-2: #1b252b;
    --mj-superficie-3: #26333b;
    --mj-linha: #26323a;

    --mj-sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 30px -20px rgb(0 0 0 / 70%);
    --mj-sombra-alta: 0 2px 6px rgb(0 0 0 / 35%), 0 24px 48px -24px rgb(0 0 0 / 80%);
}

/* 2. Base ------------------------------------------------------------------ */

.fi-body {
    background-color: var(--mj-fundo);
    background-image: radial-gradient(70rem 26rem at 50% -8rem, color-mix(in srgb, var(--mj-marca) 9%, transparent), transparent 70%);
    background-size: auto;
    background-attachment: fixed;
    color: var(--mj-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.fi-body ::selection {
    background: color-mix(in srgb, var(--mj-marca) 24%, transparent);
}

.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-ta-header-heading {
    font-family: var(--mj-fonte-titulo);
    letter-spacing: -.015em;
}

.fi-header-heading {
    color: var(--mj-texto-forte);
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.1;
}

.fi-header-subheading {
    color: var(--mj-suave);
}

.fi-section-header-heading {
    font-size: 1.05rem;
    font-weight: 650;
}

/* 3. Cabeçalho com a navegação em pílula ----------------------------------- */

.fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 30;
}

.fi-topbar {
    min-height: var(--mj-cabecalho);
    gap: 14px;
    padding-inline: clamp(12px, 2vw, 24px);
    background: color-mix(in srgb, var(--mj-fundo) 84%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border-bottom: 1px solid var(--mj-linha);
    box-shadow: none;
}

.fi-topbar-nav-groups {
    margin-inline: auto;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--mj-superficie);
    box-shadow: var(--mj-sombra);
}

.fi-topbar-item-btn {
    height: 40px;
    gap: 6px;
    padding-inline: 16px;
    border-radius: 999px;
    color: var(--mj-texto);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .2s, color .2s, transform .2s var(--mj-ease);
}

.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
    background: var(--mj-marca-suave);
    color: var(--mj-marca-escura);
}

.fi-topbar-item-btn:active {
    transform: scale(.96);
}

.fi-topbar-item.fi-active > .fi-topbar-item-btn {
    background: var(--mj-marca);
    color: #fff;
    box-shadow: 0 8px 18px -10px var(--mj-marca);
}

.fi-topbar-item .fi-topbar-item-label,
.fi-topbar-item .fi-topbar-item-icon,
.fi-topbar-item .fi-topbar-group-toggle-icon {
    color: inherit;
}

.fi-topbar-group-toggle-icon {
    width: 14px;
    height: 14px;
    opacity: .7;
}

@media (max-width: 1279px) {
    .fi-topbar-item-btn {
        padding-inline: 11px;
        font-size: .875rem;
    }
}

/* Menus suspensos (grupos do topo, usuário, ações) */
.fi-dropdown-panel {
    border-radius: var(--mj-raio-m);
    box-shadow: var(--mj-sombra-alta);
    overflow: hidden;
}

.fi-dropdown-list {
    padding: 6px;
}

.fi-dropdown-list-item {
    border-radius: var(--mj-raio-p);
}

/* Busca e botões redondos do topo */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    border-radius: 999px;
    background: var(--mj-superficie);
    box-shadow: var(--mj-sombra);
}

.fi-topbar .fi-icon-btn {
    border-radius: 999px;
}

.fi-topbar .fi-icon-btn:hover {
    background: var(--mj-superficie);
}

/* Gaveta do menu (celular e tablet) */
.fi-sidebar {
    background: var(--mj-superficie);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mj-marca-suave);
}

.fi-sidebar-item-btn {
    border-radius: var(--mj-raio-p);
}

/* 4. Cartões, seções e tabelas -------------------------------------------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-in-repeatable-item {
    border: 0;
    background-color: var(--mj-superficie);
    box-shadow: var(--mj-sombra);
    backdrop-filter: none;
}

.fi-section,
.fi-wi-stats-overview-stat {
    border-radius: var(--mj-raio-g);
}

.fi-ta-ctn {
    border-radius: var(--mj-raio-g);
}

.fi-fo-repeater-item,
.fi-in-repeatable-item {
    border-radius: var(--mj-raio-m);
}

/* Seção "não contida" é só agrupamento (ex.: os números do painel): sem cartão por trás dos cartões. */
.fi-section.fi-section-not-contained {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    padding-block: 18px 6px;
}

.fi-wi-stats-overview-stat {
    transition: transform .25s var(--mj-ease), box-shadow .25s;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--mj-sombra-alta);
}

.fi-wi-stats-overview-stat-value {
    color: var(--mj-texto-forte);
    font-weight: 700;
}

.fi-ta-header-cell {
    background: var(--mj-superficie-2);
    color: var(--mj-suave);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.fi-ta-row:hover > td {
    background: var(--mj-marca-palida);
}

.fi-ta-table tbody .fi-ta-row:nth-child(even) > td {
    background: color-mix(in srgb, var(--mj-superficie-2) 55%, transparent);
}

.fi-ta-table tbody .fi-ta-row:nth-child(even):hover > td {
    background: var(--mj-marca-palida);
}

/* 5. Controles -------------------------------------------------------------- */

.fi-btn {
    border-radius: 999px;
    font-weight: 600;
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    border-radius: 999px;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-file-upload .filepond--panel-root {
    border-radius: var(--mj-raio-p);
}

.fi-badge {
    border-radius: 999px;
}

.fi-tabs {
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--mj-superficie);
    box-shadow: var(--mj-sombra);
    border: 0;
}

.fi-tabs-item {
    border-radius: 999px;
}

.fi-tabs-item.fi-active {
    background: var(--mj-marca);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon,
.fi-tabs-item.fi-active .fi-badge {
    color: #fff;
}

.fi-pagination-items,
.fi-pagination-item {
    border-radius: 999px;
}

.fi-modal-window {
    border-radius: var(--mj-raio-g);
    box-shadow: var(--mj-sombra-alta);
}

.fi-no-notification {
    border-radius: var(--mj-raio-m);
    box-shadow: var(--mj-sombra-alta);
}

.fi-breadcrumbs-item-label {
    color: var(--mj-suave);
}

/* 6. Telas sem menu (login, MFA, senha) ------------------------------------ */

.fi-simple-layout {
    background-color: var(--mj-fundo);
    background-image:
        radial-gradient(48rem 30rem at 12% 0%, color-mix(in srgb, var(--mj-marca) 16%, transparent), transparent 70%),
        radial-gradient(40rem 26rem at 100% 100%, color-mix(in srgb, var(--mj-marca) 10%, transparent), transparent 70%);
}

.fi-simple-main {
    border-radius: 24px;
    border: 0;
    box-shadow: var(--mj-sombra-alta);
}

.fi-simple-header-heading {
    font-size: 1.6rem;
    font-weight: 700;
}

/* 7. Cartão de boas-vindas (widget BoasVindas) ----------------------------- */

.mj-boas-vindas {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px 32px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--mj-raio-g);
    overflow: hidden;
    background:
        radial-gradient(32rem 18rem at 100% 0%, color-mix(in srgb, var(--mj-marca) 55%, transparent), transparent 70%),
        linear-gradient(135deg, var(--mj-escuro), color-mix(in srgb, var(--mj-escuro) 82%, var(--mj-marca)));
    color: #fff;
    box-shadow: var(--mj-sombra-alta);
}

.mj-boas-vindas__data {
    color: rgb(255 255 255 / 70%);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.mj-boas-vindas__titulo {
    margin-top: 6px;
    font-family: var(--mj-fonte-titulo);
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.mj-boas-vindas__texto {
    max-width: 46rem;
    margin-top: 8px;
    color: rgb(255 255 255 / 82%);
}

.mj-boas-vindas__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.mj-boas-vindas__numero {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: #fff;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .2s;
}

.mj-boas-vindas__numero strong {
    font-family: var(--mj-fonte-titulo);
    font-size: 1.15rem;
}

.mj-boas-vindas__numero:hover {
    background: rgb(255 255 255 / 18%);
}

.mj-boas-vindas__numero--atencao strong {
    color: #fcd34d;
}

.mj-boas-vindas__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.mj-boas-vindas__acao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s, transform .2s var(--mj-ease);
}

.mj-boas-vindas__acao:hover {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.mj-boas-vindas__acao--principal {
    background: #fff;
    color: var(--mj-escuro);
}

.mj-boas-vindas__acao--principal:hover {
    background: var(--mj-marca-suave);
}

.mj-boas-vindas__acao svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    .mj-boas-vindas {
        grid-template-columns: 1fr;
    }

    .mj-boas-vindas__acoes {
        justify-content: flex-start;
    }
}

/* 8. Movimento ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .fi-page > .fi-page-header-main-ctn,
    .fi-wi > *,
    .mj-boas-vindas {
        animation: mj-subir .45s var(--mj-ease) backwards;
    }

    .fi-wi:nth-child(2) > * { animation-delay: .04s; }
    .fi-wi:nth-child(3) > * { animation-delay: .08s; }
    .fi-wi:nth-child(4) > * { animation-delay: .12s; }
    .fi-wi:nth-child(n + 5) > * { animation-delay: .16s; }
}

@keyframes mj-subir {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media print {
    .fi-topbar-ctn {
        display: none;
    }
}

/* Nome do painel em texto (sem logo cadastrada) não quebra em duas linhas. */
.fi-topbar .fi-logo {
    white-space: nowrap;
    font-family: var(--mj-fonte-titulo);
}