/* Gerado em 10/07/2026 às 17:48 (horário de Bacabal-MA) */
/* /assets/css/custom.css */

/* ==========================================================================
   Camada de modernização visual do Perfex CRM 2.3.x
   --------------------------------------------------------------------------
   - Não altera o core: tudo aqui sobrepõe o assets/css/style.css, que é
     carregado antes deste ficheiro.
   - Preserva a identidade da marca: primária ciano (#28b8da), família slate
     no header/sidebar e item ativo "conectado" ao conteúdo.
   - Moderniza: tipografia (Inter), profundidade (sombras suaves), respiro,
     estados de foco acessíveis e micro-movimento com ease-out.
   - Seguro para RTL: ajustes direcionais ficam restritos a body:not(.rtl).
   - Não mexe em larguras/posições estruturais (sidebar 210px, header 63px).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Marca (preservada) */
    --lm-brand:        #28b8da;
    --lm-brand-600:    #1e95b1;
    --lm-brand-700:    #197f98;
    --lm-brand-ring:   rgba(40, 184, 218, 0.28);
    --lm-brand-soft:   rgba(40, 184, 218, 0.10);

    /* Slate (header e sidebar) - refinado e coeso */
    --lm-header:       #36404e;
    --lm-sidebar:      #3f4a5a;
    --lm-sidebar-hover: rgba(255, 255, 255, 0.07);

    /* Neutros */
    --lm-ink:          #2b3441;
    --lm-ink-muted:    #5b6675; /* >= 4.5:1 sobre branco */
    --lm-canvas:       #eef1f6;
    --lm-surface:      #ffffff;
    --lm-border:       #e3e8f0;
    --lm-border-strong:#d3dae6;

    /* Forma */
    --lm-radius:       10px;
    --lm-radius-sm:     8px;
    --lm-radius-pill:  999px;

    /* Profundidade */
    --lm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --lm-shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
    --lm-shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.16);

    /* Movimento */
    --lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lm-dur:  0.18s;
}

/* --------------------------------------------------------------------------
   Base e tipografia
   -------------------------------------------------------------------------- */
body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--lm-ink) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.panel-title {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    letter-spacing: -0.01em;
    color: var(--lm-ink) !important;
}

a {
    color: var(--lm-brand-600);
    transition: color var(--lm-dur) var(--lm-ease);
}
a:hover, a:focus {
    color: var(--lm-brand-700);
}

.text-muted, small, .small {
    color: var(--lm-ink-muted) !important;
}

/* Área de conteúdo (canvas atrás dos painéis) */
#wrapper {
    background: var(--lm-canvas) !important;
}

/* --------------------------------------------------------------------------
   Header (barra superior)
   -------------------------------------------------------------------------- */
#header {
    background: var(--lm-header) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(16, 24, 40, 0.18) !important;
    filter: none !important;
}

#header .icon,
#header li > a {
    transition: background var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease);
}

#header li > a.active {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--lm-radius-pill) !important;
}

/* A busca herda height:63px do core, o que esticava a "pílula" por todo o
   header. Aqui fixamos uma altura proporcional e centralizada. */
#top_search #search_input {
    height: 40px !important;
    margin-top: 11px !important;
    padding: 0 16px !important;
    border-radius: var(--lm-radius-pill) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff;
    font-size: 14px !important;
    transition: background var(--lm-dur) var(--lm-ease), border-color var(--lm-dur) var(--lm-ease);
}
#top_search #search_input:hover,
#top_search #search_input:active,
#top_search #search_input:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--lm-brand) !important;
    outline: none !important;
}

/* Esconde os menus de resultado/histórico da busca quando estão vazios.
   Evita o retângulo "fantasma" que aparecia logo abaixo do campo de busca. */
#search-history:empty,
#search_results:empty {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Sidebar (menu lateral)
   -------------------------------------------------------------------------- */
#side-menu {
    background: var(--lm-sidebar) !important;
}

/* Tipografia dos itens (todos os níveis): fonte Inter e caixa de frase.
   NÃO definir cor aqui: o submenu (nav-second-level) tem fundo branco e
   pintar de branco deixaria os subitens invisíveis. */
#side-menu li a {
    text-transform: none !important;     /* remove o caixa-alta datado */
    letter-spacing: 0.005em !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
}

/* Itens de PRIMEIRO NÍVEL (filhos diretos de #side-menu): cor clara, peso,
   hover e acento. Restrito a "> li > a" justamente para não atingir os
   subitens do submenu, que mantêm o estilo original do Perfex. */
#side-menu > li > a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    transition: background var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease);
}

#side-menu > li > a:hover {
    background: var(--lm-sidebar-hover) !important;
    color: #fff !important;
}

/* Indicador de acento à esquerda (apenas LTR para não quebrar RTL) */
body:not(.rtl) #side-menu > li > a {
    box-shadow: inset 3px 0 0 transparent;
}
body:not(.rtl) #side-menu > li > a:hover {
    box-shadow: inset 3px 0 0 var(--lm-brand);
}

/* Item ativo de primeiro nível: mantém a ligação visual com o conteúdo */
#side-menu > li.active > a {
    background: var(--lm-canvas) !important;
    color: var(--lm-ink) !important;
    font-weight: 600 !important;
}
body:not(.rtl) #side-menu > li.active > a {
    box-shadow: inset 3px 0 0 var(--lm-brand) !important;
}

/* Submenu (nav-second-level): preserva o comportamento original do Perfex
   (fundo branco, links azuis). Só refina a pílula do item ativo e mantém um
   hover claro e visível sobre o branco. */
#side-menu li .nav-second-level li.active a {
    background-color: var(--lm-brand) !important;
    border-radius: var(--lm-radius-pill) !important;
}
#side-menu li .nav-second-level a:hover {
    background-color: var(--lm-canvas) !important;
    border-radius: var(--lm-radius-sm) !important;
}

/* --------------------------------------------------------------------------
   Painéis (a "carta" base do Perfex)
   -------------------------------------------------------------------------- */
.panel_s .panel-body,
.panel-body {
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-radius) !important;
    box-shadow: var(--lm-shadow-sm);
    transition: box-shadow var(--lm-dur) var(--lm-ease);
}

.panel_s > .panel-heading,
.panel_s > .panel-heading-bg {
    background: #f8fafc !important;
    border: 1px solid var(--lm-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--lm-radius) var(--lm-radius) 0 0 !important;
    color: var(--lm-ink) !important;
    font-weight: 600 !important;
}
.panel_s > .panel-heading + .panel-body {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.panel, .panel-default, .well {
    border-radius: var(--lm-radius) !important;
    border-color: var(--lm-border) !important;
    box-shadow: var(--lm-shadow-sm);
}
.well {
    background: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--lm-radius-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em;
    transition: transform var(--lm-dur) var(--lm-ease),
                box-shadow var(--lm-dur) var(--lm-ease),
                background-color var(--lm-dur) var(--lm-ease),
                border-color var(--lm-dur) var(--lm-ease) !important;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--lm-brand) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 2px 8px rgba(40, 184, 218, 0.28) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--lm-brand-600) !important;
}

.btn-default {
    background: var(--lm-surface) !important;
    border: 1px solid var(--lm-border-strong) !important;
    color: var(--lm-ink) !important;
}
.btn-default:hover,
.btn-default:focus {
    background: #f3f6fb !important;
    border-color: #c2cbdb !important;
}

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
.form-control,
.bootstrap-select .btn,
.dropzone,
.select2-container .select2-selection {
    border-radius: var(--lm-radius-sm) !important;
    border: 1px solid var(--lm-border-strong) !important;
    transition: border-color var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease) !important;
}

.form-control {
    height: 38px;
    color: var(--lm-ink);
    box-shadow: none !important;
}
textarea.form-control { height: auto; }

.form-control:focus,
.select2-container--focus .select2-selection,
.bootstrap-select.open .btn {
    border-color: var(--lm-brand) !important;
    box-shadow: 0 0 0 3px var(--lm-brand-ring) !important;
    outline: none !important;
}

.form-control::-webkit-input-placeholder { color: #8a94a3; }
.form-control::placeholder { color: #8a94a3; }

.checkbox label, .radio label, label { color: var(--lm-ink); }

/* --------------------------------------------------------------------------
   Tabelas (DataTables e tabelas gerais)
   -------------------------------------------------------------------------- */
.table {
    border-radius: var(--lm-radius) !important;
    overflow: hidden;
}
.table > thead > tr > th {
    background: #f6f8fb !important;
    color: var(--lm-ink-muted) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--lm-border-strong) !important;
    padding: 11px 12px !important;
}

/* Cabeçalhos de tabela que o Perfex deixa escuros de propósito, com texto
   branco: a tabela de itens (orçamentos, faturas, propostas) e a tabela do
   relatório de despesas. O tema clareou o fundo geral das tabelas, o que fazia
   esse texto branco sumir. Aqui restauramos um fundo escuro nesses dois casos,
   num tom alinhado com a barra superior e a lateral, devolvendo a leitura. */
.table.items > thead,
.table.items > thead > tr > th,
#expenses-report-table.table > thead > tr > th {
    background: #3f4a5a !important;
    color: #fff !important;
    border-bottom: 0 !important;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--lm-border) !important;
    border-right: 0 !important;
    padding: 11px 12px !important;
    vertical-align: middle;
}
.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--lm-brand-soft) !important;
}

/* --------------------------------------------------------------------------
   Abas, paginação, dropdowns, badges
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--lm-border-strong) !important;
}
.nav-tabs > li > a {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--lm-ink-muted) !important;
    border-bottom: 2px solid transparent !important;
    transition: color var(--lm-dur) var(--lm-ease), border-color var(--lm-dur) var(--lm-ease) !important;
}
.nav-tabs > li > a:hover {
    background: transparent !important;
    color: var(--lm-ink) !important;
    border-bottom-color: var(--lm-border-strong) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent !important;
    color: var(--lm-brand-600) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--lm-brand) !important;
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--lm-border) !important;
    color: var(--lm-ink);
}
.pagination > li:first-child > a,
.pagination > li:first-child > span { border-radius: var(--lm-radius-sm) 0 0 var(--lm-radius-sm) !important; }
.pagination > li:last-child > a,
.pagination > li:last-child > span { border-radius: 0 var(--lm-radius-sm) var(--lm-radius-sm) 0 !important; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--lm-brand) !important;
    border-color: var(--lm-brand) !important;
}

.dropdown-menu {
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-radius) !important;
    box-shadow: var(--lm-shadow-md) !important;
    padding: 6px !important;
}
.dropdown-menu > li > a {
    border-radius: var(--lm-radius-sm) !important;
    padding: 7px 12px !important;
    transition: background var(--lm-dur) var(--lm-ease) !important;
}
.dropdown-menu > li > a:hover {
    background: var(--lm-brand-soft) !important;
    color: var(--lm-brand-700) !important;
}

.label, .badge {
    border-radius: var(--lm-radius-pill) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 0.28em 0.7em !important;
}

/* --------------------------------------------------------------------------
   Modais, alertas, tooltips
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0 !important;
    border-radius: var(--lm-radius) !important;
    box-shadow: var(--lm-shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--lm-border) !important;
    padding: 16px 20px !important;
}
.modal-footer {
    border-top: 1px solid var(--lm-border) !important;
    padding: 14px 20px !important;
}

.alert {
    border: 0 !important;
    border-radius: var(--lm-radius-sm) !important;
    box-shadow: var(--lm-shadow-sm);
}
body:not(.rtl) .alert { border-left: 4px solid rgba(0, 0, 0, 0.12) !important; }

.tooltip-inner {
    border-radius: var(--lm-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: 12px;
    background: #20272f !important;
}

/* --------------------------------------------------------------------------
   Barras de rolagem (modernas e finas)
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #c2cbd8 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c2cbd8;
    border-radius: var(--lm-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #a7b2c2; background-clip: content-box; }

/* --------------------------------------------------------------------------
   Acessibilidade: anel de foco visível por teclado
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--lm-brand) !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Tela de login (autenticação admin)
   O head de autenticação do Perfex já carrega este custom.css, então basta
   escopar em body.login_admin para modernizar o login sem afetar o restante
   do admin nem tocar no core.
   -------------------------------------------------------------------------- */
body.login_admin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #3a4452 0%, #2b3441 100%) !important;
    color: var(--lm-ink);
}

body.login_admin .authentication-form-wrapper {
    margin-top: 0 !important;
}

body.login_admin .company-logo {
    padding: 10px 10px 22px !important;
}

/* O cartão do formulário: elevação e respiro modernos */
body.login_admin .authentication-form {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 30px 28px !important;
    background: var(--lm-surface) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

/* Título: tira o caixa-alta datado, deixa em caixa de frase */
body.login_admin .authentication-form h1 {
    text-transform: none !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 21px !important;
    letter-spacing: -0.01em;
    margin-bottom: 24px !important;
    color: var(--lm-ink) !important;
}

/* Botão de login (usa .btn-info): leva a cor da marca, só aqui no login */
body.login_admin .btn-info {
    background-color: var(--lm-brand) !important;
    border: 0 !important;
    border-radius: var(--lm-radius-sm) !important;
    height: 44px;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 4px 12px rgba(40, 184, 218, 0.30) !important;
    transition: background-color var(--lm-dur) var(--lm-ease), transform var(--lm-dur) var(--lm-ease);
}
body.login_admin .btn-info:hover,
body.login_admin .btn-info:focus {
    background-color: var(--lm-brand-600) !important;
    transform: translateY(-1px);
}

body.login_admin .authentication-form a {
    color: var(--lm-brand-600) !important;
    font-weight: 500;
}
body.login_admin .authentication-form a:hover {
    color: var(--lm-brand-700) !important;
}

body.login_admin label {
    color: var(--lm-ink) !important;
}

/* --------------------------------------------------------------------------
   Layout fixo: barra superior e barra lateral
   - Mantém o header e a sidebar sempre visíveis ao rolar.
   - Aplicado só a partir de 769px. Abaixo disso o Perfex usa o menu off-canvas
     do mobile, que continua com o comportamento original (intocado).
   Observação: o cabeçalho das tabelas NÃO é fixo. Um cabeçalho fixo feito por
   CSS (position: sticky) gruda por cima do conteúdo e acaba sempre cobrindo o
   registro mais próximo dele em qualquer lista, o que atrapalha a leitura.
   Por isso ele foi removido. Um cabeçalho de lista realmente fixo exigiria o
   plugin FixedHeader do DataTables (JS), que clona o cabeçalho e reserva o
   espaço, evitando a sobreposição.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    /* Barra superior fixa */
    #header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        /* Camada de composição própria e estável: evita o "piscar" (repaint de
           tela cheia) quando os submenus laterais abrem/fecham. */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Barra lateral fixa, com rolagem própria quando o menu é mais alto que a tela */
    #menu {
        position: fixed !important;
        top: 63px;
        bottom: 0;
        left: 0;
        z-index: 98;
        overflow-y: auto;
        overflow-x: hidden;
        /* Mesma estabilização de camada do header. */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Reserva o espaço da barra de rolagem para ela não causar reflow
           (parte do piscar) ao aparecer/sumir quando o submenu expande. */
        scrollbar-gutter: stable;
    }

    /* O painel lateral de Configurações abre por cima da barra lateral. Como o
       #menu passou a ter z-index 98, o painel (z-index 9 no tema) ficava
       escondido atrás dele e dava a impressão de que "não abria". Aqui ele sobe
       acima do menu e acompanha o mesmo layout fixo do header e da barra. */
    #setup-menu-wrapper {
        position: fixed;
        z-index: 99;
    }

    /* Compensa a altura do header fixo para o conteúdo não ficar por baixo dele */
    #wrapper {
        padding-top: 63px;
        /* Neutraliza o mainWrapperHeightFix() do Perfex: com a sidebar fixa, o
           conteúdo não precisa mais copiar a altura da navegação. Esse JS
           reescrevia o min-height do wrapper a cada abertura de submenu, e era
           isso que fazia a tela "piscar". Fixar aqui (com prioridade sobre o
           valor inline do JS) deixa a altura estável e elimina o flash. */
        min-height: calc(100vh - 63px) !important;
    }
}

/* --------------------------------------------------------------------------
   Responsividade e telas compactas (inclui HD 1280x720)
   Em telas de altura baixa (720px) o espaço vertical é escasso. Aqui
   garantimos modais que cabem na tela, densidade um pouco maior em
   notebooks/HD e conteúdo que nunca estoura a largura útil.
   -------------------------------------------------------------------------- */

/* Conteúdo comum nunca estoura a largura da área de trabalho */
.panel-body img,
.panel-body pre,
.panel-body iframe,
.panel-body embed,
.panel-body video { max-width: 100% !important; }

/* Notebooks e telas HD (até 1366px): densidade um pouco maior para mostrar
   mais conteúdo de uma vez, sem perder legibilidade. */
@media (max-width: 1366px) {
    .content { padding: 12px 16px 18px !important; }
    .panel_s .panel-body,
    .panel-body { padding: 16px !important; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 9px 10px !important; }
}

/* Telas de altura baixa (até 760px, ex.: 1280x720): o modal passa a caber na
   tela, com o corpo rolando por dentro em vez de estourar para fora. Aplicado
   só na altura baixa para não arriscar cortar selects/datepickers em telas
   maiores. */
@media (max-height: 760px) {
    .modal-content {
        max-height: calc(100vh - 40px);
        display: flex;
        flex-direction: column;
    }
    .modal-header,
    .modal-footer { flex-shrink: 0; }
    .modal-body { overflow-y: auto; }

    /* Cabeçalhos de painel mais enxutos para sobrar área de leitura */
    .panel_s > .panel-heading,
    .panel_s > .panel-heading-bg { padding: 7px 14px !important; }

    /* Mais linhas visíveis de uma vez: conteúdo, painéis e linhas de tabela
       ganham uma altura um pouco menor, sem apertar a leitura. */
    .content { padding-top: 10px !important; padding-bottom: 14px !important; }
    .panel_s { margin-bottom: 16px !important; }
    .table > tbody > tr > td { padding-top: 7px !important; padding-bottom: 7px !important; }
    .table > thead > tr > th { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* --------------------------------------------------------------------------
   Ajustes específicos de listas
   -------------------------------------------------------------------------- */
/* admin/estimates: a coluna "Orçamento #" estava estreita e quebrava o número
   (ex.: ORC-347/03/2026) em duas linhas. Mantém em uma só linha e garante
   largura mínima. */
.table-estimates > thead > tr > th:first-child,
.table-estimates > tbody > tr > td:first-child {
    white-space: nowrap !important;
    min-width: 130px;
}

/* admin/invoices: a coluna "Fatura #" era estreita e as acoes que aparecem
   ao passar o rato ("Ver | Editar") quebravam em duas linhas. Aqui a coluna
   ganha largura minima e essas acoes ficam lado a lado, numa linha so. */
.table-invoices > thead > tr > th:first-child,
.table-invoices > tbody > tr > td:first-child {
    min-width: 120px;
}
.table-invoices > tbody > tr > td:first-child .row-options {
    white-space: nowrap !important;
}

/* admin/clients: reequilibra as colunas. "Empresa" (3a coluna, contando a
   caixa de selecao) ganha largura para os nomes longos quebrarem menos, e
   "Grupos" (8a coluna), quase sempre vazia, encolhe ao minimo. */
.table-clients > thead > tr > th:nth-child(3),
.table-clients > tbody > tr > td:nth-child(3) {
    min-width: 360px;
}
.table-clients > thead > tr > th:nth-child(8),
.table-clients > tbody > tr > td:nth-child(8) {
    width: 120px !important;
    min-width: 120px !important;
}
.table-clients > tbody > tr > td:nth-child(8) {
    white-space: normal !important;
}
/* As etiquetas de grupo ficam com largura curta (empilhadas) para a coluna
   "Grupos" nao ser esticada pela etiqueta mais larga de qualquer linha. */
.table-clients > tbody > tr > td:nth-child(8) .customer-group-list {
    display: inline-block !important;
    max-width: 108px;
    margin: 0 2px 2px 0 !important;
    word-break: break-word;
    white-space: normal;
}

/* Etiquetas de grupo com cantos apenas levemente arredondados (modelo 2), no
   lugar do formato de pilula. Vale onde quer que a etiqueta de grupo apareca. */
.customer-group-list {
    border-radius: 5px !important;
}

/* Data criada (9a coluna): coluna mais estreita para o horario cair na linha
   de baixo da data (ex.: "11-07-2025" em cima, "08:49:02" embaixo). */
.table-clients > thead > tr > th:nth-child(9),
.table-clients > tbody > tr > td:nth-child(9) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px;
    white-space: normal !important;
}

/* --------------------------------------------------------------------------
   Carregamento das listas (DataTables server-side)
   As listas do Perfex buscam os dados no servidor e ficam ocultas até carregar
   (estado table-loading nativo, que aplica opacity:0). Aqui a tabela passa a
   aparecer com um fade leve em vez de "piscar" abruptamente ao terminar de
   processar. A transição de fundo das linhas é preservada para não perder o
   destaque ao passar o rato. */
table.dataTable thead th,
.dataTables_length,
.dt-buttons,
.dataTables_filter {
    transition: opacity 0.25s ease;
}
table.dataTable tbody tr {
    transition: opacity 0.25s ease, background-color 0.12s ease;
}

/* --------------------------------------------------------------------------
   Movimento: respeita quem prefere menos animação
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover { transform: none !important; }
}

/* ============================================================
   Calendario do painel: mais respiro entre a navegacao, o titulo
   e os botoes de visualizacao (botoes separados e arredondados).
   A cor azul padrao do tema (.btn-info) e mantida.
   Tudo escopado a #calendar para nao afetar o resto do sistema.
   ============================================================ */
#calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 22px;
}
#calendar .fc-header-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin-left: 5px;
    padding: 0 14px;
    border-radius: 6px !important;
    border-left-width: 1px !important;
    font-weight: 500;
    line-height: 1;
    vertical-align: top;
}
/* Centraliza o icone das setas (o tema aplica top:-.05em, que o desalinha) */
#calendar .fc-header-toolbar .btn .fc-icon {
    top: 0;
    line-height: 1;
}
#calendar .fc-header-toolbar .fc-button-group > .btn:first-child {
    margin-left: 0;
}

/* ============================================================
   Campo de busca das tabelas (DataTables): o padrao do tema usa
   apenas 80px de largura, o que corta o texto "Procurar", e a
   borda fica quase invisivel. Aqui o campo ganha largura
   confortavel, borda definida e arredondada, a lupa alinhada e
   um foco discreto (so a borda firma um pouco e o fundo clareia,
   sem realce azul nem brilho).
   ============================================================ */
.dataTables_filter .input-group {
    border: 1px solid #dce1ea;
    border-radius: 8px;
    background: #f4f6fa;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dataTables_filter .input-group:hover {
    border-color: #c7d0dd;
}
.dataTables_filter .input-group:focus-within {
    border-color: #c7d0dd;
    background: #ffffff;
}
.dataTables_filter .input-group .input-group-addon {
    background: transparent;
    border: 0;
    color: #8a94a6;
    padding-left: 12px;
    padding-right: 4px;
}
.dataTables_filter input,
.dataTables_filter input:focus {
    width: 220px !important;
    height: 36px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    padding-left: 4px;
    font-size: 14px;
}
.dataTables_filter input:focus {
    width: 280px !important;
}
.dataTables_filter input::placeholder {
    color: #9aa4b2;
    opacity: 1;
}
@media (max-width: 768px) {
    .dataTables_filter .input-group {
        width: 100%;
    }
    .dataTables_filter input,
    .dataTables_filter input:focus {
        width: 100% !important;
    }
}

/* ============================================================
   Lista de despesas (/admin/expenses): ocultar as colunas
   Projeto, Cliente e Modo de recebimento, que nao sao usadas.
   A tabela ja oculta a coluna interna 0 via DataTables, entao a
   contagem visivel e: 1 Categoria, 2 Quantia, 3 Nome, 4 Recibo,
   5 Data, 6 Projeto, 7 Cliente, 8 Fatura, 9 Referencia,
   10 Modo de recebimento, 11 Fornecedor.
   ============================================================ */
.table-expenses thead > tr > th:nth-child(6),
.table-expenses tbody > tr > td:nth-child(6),
.table-expenses thead > tr > th:nth-child(7),
.table-expenses tbody > tr > td:nth-child(7),
.table-expenses thead > tr > th:nth-child(10),
.table-expenses tbody > tr > td:nth-child(10) {
    display: none !important;
}

/* ============================================================
   Auditoria UX/UI - refinamentos de leitura nas listagens
   Ajustes gerais que valem para todas as tabelas do sistema e
   melhoram a leitura em telas HD (1280x720), onde cada linha conta.
   ============================================================ */

/* 1. Datas e valores nunca quebram em duas linhas (ex.: "08-07-2026"
   virava "08-07-" + "2026"). As colunas com links (numero, cliente,
   projeto) e com etiquetas (tags) continuam podendo quebrar. Aplicado
   apenas onde o seletor :has() e suportado, para nao mexer no
   comportamento em navegadores antigos. */
@supports selector(:has(*)) {
    table.dataTable > tbody > tr > td {
        white-space: nowrap;
    }
    table.dataTable > tbody > tr > td:has(a),
    table.dataTable > tbody > tr > td:has(.tags-labels),
    table.dataTable > tbody > tr > td:has(.label-tag),
    table.dataTable > tbody > tr > td:has(.row-options) {
        white-space: normal;
    }
}

/* 2. Numeros com largura de digito uniforme (tabular): as colunas de
   valores e datas ficam alinhadas verticalmente de uma linha para a
   outra, facilitando a comparacao. Nao altera texto comum. */
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 3. Zebra bem discreta nas listagens: ajuda a seguir a linha ate o fim
   em tabelas largas (muitas colunas), sem poluir. O destaque ao passar
   o rato continua tendo prioridade. */
table.dataTable > tbody > tr:nth-child(even) > td {
    background-color: #fafbfd;
}
.table-hover > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td {
    background-color: var(--lm-brand-soft) !important;
}