/*
 * Identidade visual do t-Flow (sem build: carregado depois do CSS do Filament).
 * Menu lateral azul-marinho, conteúdo com pouca margem e botões mais baixos.
 * As cores primárias ficam em AdminPanelProvider (->colors).
 */

:root {
    --tflow-menu: #0b2545;          /* fundo do menu */
    --tflow-menu-hover: #13315c;    /* item ao passar o mouse */
    --tflow-menu-ativo: #1d4f91;    /* item selecionado */
    --tflow-menu-texto: #dbe4f0;
    --tflow-menu-rotulo: #8da9c4;   /* nome dos grupos */
    --tflow-topo-logo: #071a33;     /* área do logo, em cima do menu */
    --topbar-height: 3.5rem;
}

.fi-body { background-color: #f3f5f8; --topbar-height: 3.5rem; }

/* ---------- Menu lateral ---------- */
.fi-sidebar,
.fi-sidebar.fi-sidebar-open { background-color: var(--tflow-menu); }
.fi-sidebar-header { background-color: var(--tflow-menu); box-shadow: none; padding-inline: 1rem; }
.fi-sidebar-nav { padding-inline: .75rem; padding-block: 1.25rem; row-gap: 1.25rem; }
.fi-sidebar-group-label { color: var(--tflow-menu-rotulo); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.fi-sidebar-group-btn { padding: .25rem .5rem; }
.fi-sidebar-item-btn { padding: .45rem .6rem; border-radius: .375rem; }
.fi-sidebar-item-btn > .fi-icon { color: var(--tflow-menu-rotulo); }
.fi-sidebar-item-label { color: var(--tflow-menu-texto); font-weight: 400; }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background-color: var(--tflow-menu-hover); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--tflow-menu-ativo); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #fff; }
.fi-sidebar-group-collapse-btn .fi-icon,
.fi-sidebar-close-collapse-sidebar-btn .fi-icon,
.fi-sidebar-open-collapse-sidebar-btn .fi-icon { color: var(--tflow-menu-rotulo); }
.fi-sidebar-footer { border-color: rgba(255, 255, 255, .08); }

/* ---------- Barra do topo ---------- */
.fi-topbar { background-color: #e6f0fb; box-shadow: 0 1px 0 #cfdff2; position: relative; }

/* logo da empresa no topo: altura fixa, sem distorcer */
.tflow-logo { margin: 0; height: 2.75rem; justify-content: center; align-items: center; }
.tflow-logo-img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* área do logo (desktop): bloco azul-marinho da largura do menu, botão de recolher no fim */
@media (min-width: 1024px) {
    .fi-topbar { padding-inline-start: 0; }
    .fi-topbar-start {
        align-self: stretch; width: var(--sidebar-width); margin-inline-end: 0;
        padding-inline: 1rem .5rem; justify-content: space-between;
        background-color: var(--tflow-topo-logo); transition: width .2s;
    }
    .fi-topbar-start .fi-logo { margin-inline-start: 0; }
    /* logo da empresa: ocupa o espaço até o botão de recolher, centralizado, sem distorcer */
    .fi-topbar-start > a { flex: 1; min-width: 0; margin-inline-end: .5rem; }
    /* sem logo próprio para fundo escuro: cores originais num cartão branco */
    .tflow-logo-cartao { background: #fff; padding: .3rem .75rem; border-radius: .5rem; }
    .fi-topbar-collapse-sidebar-btn-ctn { order: 2; display: flex; justify-content: flex-end; }
    .fi-topbar-start .fi-icon-btn { color: var(--tflow-menu-texto); }
    .fi-topbar-start .fi-icon-btn:hover { background-color: var(--tflow-menu-hover); }

    /* menu recolhido: o bloco encolhe junto e fica só o botão */
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start {
        width: var(--collapsed-sidebar-width); padding-inline: 0; justify-content: center;
    }
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start > a { display: none; }
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-collapse-sidebar-btn-ctn { justify-content: center; }

    /* logo do t-Flow no centro da área de trabalho */
    .tflow-marca { left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2); }
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .tflow-marca {
        left: calc(var(--collapsed-sidebar-width) + (100% - var(--collapsed-sidebar-width)) / 2);
    }
}
.tflow-marca {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: calc(var(--topbar-height) - .5rem); pointer-events: none; /* ocupa quase toda a altura da barra */
}
@media (max-width: 640px) { .tflow-marca { display: none; } }

/* "Olá, Fulano" ao lado da foto */
.tflow-ola { font-size: .875rem; color: #475569; white-space: nowrap; }
.tflow-ola strong { color: #0f172a; font-weight: 600; }
@media (max-width: 768px) { .tflow-ola { display: none; } }

/* login: logo do t-Flow no lugar do título */
.tflow-login-marca { display: block; margin: 0 auto .75rem; width: 15rem; max-width: 80%; }
.tflow-login-empresa { display: block; font-size: 1.25rem; font-weight: 700; color: #0b2545; }

/* ---------- Área de conteúdo: menos margem nas laterais ---------- */
.fi-main { padding-inline: 1rem; }
@media (min-width: 1024px) { .fi-main { padding-inline: 1.25rem; } }
.fi-page-header-main-ctn { padding-block: 1.25rem; row-gap: 1.25rem; }

/* ---------- Botões mais finos e sóbrios ---------- */
.fi-btn { padding-block: .375rem; padding-inline: .75rem; border-radius: .375rem; }
.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm { padding-block: .25rem; padding-inline: .5rem; }
.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl { padding-block: .5rem; padding-inline: 1rem; }

/* Seções e tabelas: cantos menos arredondados */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat { border-radius: .5rem; }

/* histórico do processo: tarefa paralela com seta, recuada por nível */
.tflow-paralela { display: inline-flex; align-items: center; gap: .35rem; }
.tflow-paralela-seta { width: 1rem; height: 1rem; color: var(--color-primary-600, #1d5fbf); flex-shrink: 0; }

/* ajuda do campo: ícone "?" ao lado do rótulo; o texto respeita as quebras de linha */
.tflow-ajuda { display: inline-flex; vertical-align: middle; cursor: help; color: var(--color-primary-600, #1d5fbf); }
.tflow-ajuda-icone { width: 1rem; height: 1rem; }
.tippy-content { white-space: pre-line; }

/* repetição (formulário e visualização): bloco separado por uma linha antes e depois */
.tflow-repeticao { border-top: 2px solid #cfdff2; border-bottom: 2px solid #cfdff2; padding-block: .75rem; }

/* modo teste: faixa no alto da tela e controles no topo */
.tflow-faixa-teste { background: #c2410c; color: #fff; text-align: center; font-size: .8rem; font-weight: 600; padding: .3rem 1rem; letter-spacing: .02em; }
.tflow-teste { display: flex; align-items: center; gap: .5rem; margin-inline-end: .75rem; }
.tflow-teste-selo { background: #c2410c; color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; padding: .2rem .5rem; border-radius: .375rem; }
.tflow-teste-usuario { font-size: .8rem; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .25rem 1.75rem .25rem .5rem; background-color: #fff; max-width: 14rem; }
.tflow-ola-simulando { color: #c2410c; }

/* subtítulo da edição do modelo/tarefa: versão e aviso de processos em andamento, em letra pequena */
.tflow-subtitulo { display: block; font-size: .875rem; line-height: 1.4; }
.tflow-subtitulo-aviso { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 500; color: var(--color-warning-700, #b45309); }