/* ================================================================
   SysFin — Design System (tokens + componentes globais)
   ----------------------------------------------------------------
   Paleta: slate neutro (mesma base do Forlin) com acento verde-azulado discreto.
   Este arquivo deve ser carregado em TODAS as telas e expõe os
   tokens CSS que os demais arquivos (sysfin-auth.css, layout.css)
   reutilizam via var(--sysfin-*).
   ================================================================ */

:root {
    /* ---------- Cores principais ---------- */
    --sysfin-primary:        #3a4a5e;   /* slate escuro — botões/ações primárias */
    --sysfin-primary-dark:   #2a3645;   /* hover/pressed */
    --sysfin-primary-light:  #4b6178;   /* variação clara para gradientes */
    --sysfin-primary-50:     #eef2f7;   /* fundo muito claro / hover de linha */

    /* ---------- Acento (verde-azulado discreto) ---------- */
    --sysfin-accent:         #6fa893;   /* apenas detalhes finos */
    --sysfin-accent-soft:    #e6f2ed;   /* fundos suaves de destaque */

    /* ---------- Superfícies e fundos ---------- */
    --sysfin-bg:             #f5f7fa;   /* fundo da página */
    --sysfin-surface:        #ffffff;   /* painéis, cards */
    --sysfin-surface-alt:    #fafbfc;   /* linhas alternadas, rodapés */

    /* ---------- Bordas ---------- */
    --sysfin-border:         #e2e7ee;
    --sysfin-border-strong:  #cdd5e0;

    /* ---------- Texto ---------- */
    --sysfin-text:           #1f2937;
    --sysfin-text-muted:     #6b7280;
    --sysfin-text-soft:      #9aa3b2;
    --sysfin-text-on-primary:#ffffff;

    /* ---------- Status ---------- */
    --sysfin-success:        #2e7d32;
    --sysfin-success-soft:   #e7f5e9;
    --sysfin-success-border: #b9d8be;
    --sysfin-danger:         #b3261e;
    --sysfin-danger-soft:    #fdecea;
    --sysfin-danger-border:  #f1c9c5;
    --sysfin-warning:        #b26a00;
    --sysfin-warning-soft:   #fdf2e0;
    --sysfin-warning-border: #f0d8a8;
    --sysfin-info:           #1f6feb;
    --sysfin-info-soft:      #e8f1ff;
    --sysfin-info-border:    #c2d8f5;

    /* ---------- Tipografia ---------- */
    --sysfin-font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    --sysfin-font-size-xs:   11px;
    --sysfin-font-size-sm:   12px;
    --sysfin-font-size-md:   13px;
    --sysfin-font-size-lg:   15px;
    --sysfin-font-size-xl:   18px;
    --sysfin-font-size-2xl:  22px;

    /* ---------- Espaçamento e raios ---------- */
    --sysfin-radius-sm:      4px;
    --sysfin-radius:         8px;
    --sysfin-radius-lg:      12px;
    --sysfin-radius-xl:      16px;

    /* ---------- Sombras ---------- */
    --sysfin-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --sysfin-shadow:         0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --sysfin-shadow-md:      0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --sysfin-shadow-lg:      0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
    --sysfin-focus-ring:     0 0 0 3px rgba(58, 74, 94, 0.18);
}

/* ================================================================
   Reset / base tipográfico mínimo
   ================================================================ */
.sysfin-themed,
body.sysfin-themed {
    font-family: var(--sysfin-font-family);
    color: var(--sysfin-text);
    background-color: var(--sysfin-bg);
}

/* ================================================================
   Botões utilitários (substituem botaoAzul, prioritario, flat-ab)
   Aplicáveis a <button>, p:button, p:commandButton via styleClass.
   ================================================================ */
.sysfin-btn,
.ui-button.sysfin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--sysfin-radius-sm) !important;
    border: 1px solid var(--sysfin-border-strong) !important;
    background: var(--sysfin-surface) !important;
    color: var(--sysfin-text) !important;
    font-family: inherit;
    font-size: var(--sysfin-font-size-md) !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: var(--sysfin-shadow-sm);
    text-decoration: none;
}

/* O dimensionamento vem da regra base de .ui-button (acima). */
.ui-button.sysfin-btn {
    display: inline-block;
}

.sysfin-btn:hover,
.ui-button.sysfin-btn:hover {
    background: var(--sysfin-primary-50) !important;
    border-color: var(--sysfin-primary-light) !important;
}

.sysfin-btn:focus,
.ui-button.sysfin-btn:focus {
    outline: none;
    box-shadow: var(--sysfin-focus-ring);
}

.sysfin-btn-primary,
.ui-button.sysfin-btn-primary {
    background: var(--sysfin-primary) !important;
    border-color: var(--sysfin-primary) !important;
    color: var(--sysfin-text-on-primary) !important;
    box-shadow: 0 1px 2px rgba(58, 74, 94, 0.18);
}

.sysfin-btn-primary:hover,
.ui-button.sysfin-btn-primary:hover {
    background: var(--sysfin-primary-dark) !important;
    border-color: var(--sysfin-primary-dark) !important;
    color: var(--sysfin-text-on-primary) !important;
    box-shadow: 0 4px 12px rgba(58, 74, 94, 0.22);
}

.sysfin-btn-success,
.ui-button.sysfin-btn-success {
    background: var(--sysfin-success) !important;
    border-color: var(--sysfin-success) !important;
    color: var(--sysfin-text-on-primary) !important;
}

.sysfin-btn-success:hover,
.ui-button.sysfin-btn-success:hover {
    background: #245d27 !important;
    border-color: #245d27 !important;
}

.sysfin-btn-danger,
.ui-button.sysfin-btn-danger {
    background: var(--sysfin-danger) !important;
    border-color: var(--sysfin-danger) !important;
    color: var(--sysfin-text-on-primary) !important;
}

.sysfin-btn-danger:hover,
.ui-button.sysfin-btn-danger:hover {
    background: #8e1c16 !important;
    border-color: #8e1c16 !important;
}

/* Botões de fundo escuro: o sprite de ícones do PrimeFaces é azul-escuro e
   some contra o fundo. O filtro leva qualquer cor do sprite para branco. */
.ui-button.sysfin-btn-primary .ui-icon,
.ui-button.sysfin-btn-success .ui-icon,
.ui-button.sysfin-btn-danger .ui-icon,
.ui-button.prioritario .ui-icon,
.ui-button.prioritario_verde .ui-icon,
.ui-button.prioritario_amarelo .ui-icon,
.ui-button.prioritario_vermelho .ui-icon {
    filter: brightness(0) invert(1);
}

.sysfin-btn-ghost,
.ui-button.sysfin-btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--sysfin-primary) !important;
}

.sysfin-btn-ghost:hover,
.ui-button.sysfin-btn-ghost:hover {
    background: var(--sysfin-primary-50) !important;
    color: var(--sysfin-primary-dark) !important;
}

/* Ação inline ao lado de um valor exibido (ex.: alterar a data do acerto).
   Pílula compacta: discreta ao lado do dado e destacada no hover. */
.sysfin-btn-inline,
.ui-button.sysfin-btn-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 12px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--sysfin-border) !important;
    background: var(--sysfin-surface-alt) !important;
    color: var(--sysfin-primary) !important;
    font-size: var(--sysfin-font-size-sm) !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    vertical-align: middle;
}

.sysfin-btn-inline:hover,
.ui-button.sysfin-btn-inline:hover {
    background: var(--sysfin-primary-50) !important;
    border-color: var(--sysfin-primary-light) !important;
    color: var(--sysfin-primary-dark) !important;
}

/* O tema do PrimeFaces posiciona o ícone em absolute e reserva padding no texto;
   na pílula o ícone acompanha o texto no fluxo normal. */
.ui-button.sysfin-btn-inline .ui-button-text {
    padding: 0 !important;
    line-height: 20px !important;
}

.ui-button.sysfin-btn-inline .ui-icon {
    position: static !important;
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Formulário que existe apenas para hospedar uma ação inline. */
.sysfin-form-inline {
    display: inline;
}

.sysfin-btn-link {
    background: none;
    border: none;
    color: var(--sysfin-primary);
    font-size: var(--sysfin-font-size-md);
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none;
    font-family: inherit;
}

.sysfin-btn-link:hover {
    color: var(--sysfin-primary-dark);
    text-decoration: underline;
}

/* ================================================================
   Painéis padrão (substituem painelPadrao)
   ================================================================ */
.sysfin-panel {
    background: var(--sysfin-surface);
    border: 1px solid var(--sysfin-border);
    border-radius: var(--sysfin-radius);
    box-shadow: var(--sysfin-shadow-sm);
    overflow: hidden;
}

.sysfin-panel-header {
    background: var(--sysfin-surface-alt);
    border-bottom: 1px solid var(--sysfin-border);
    padding: 12px 16px;
    font-weight: 600;
    color: var(--sysfin-text);
    font-size: var(--sysfin-font-size-md);
}

.sysfin-panel-body {
    padding: 16px;
}

.sysfin-panel-footer {
    background: var(--sysfin-surface-alt);
    border-top: 1px solid var(--sysfin-border);
    padding: 10px 16px;
    text-align: right;
}

/* ================================================================
   Inputs base reutilizáveis
   ================================================================ */
.sysfin-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--sysfin-border-strong);
    border-radius: var(--sysfin-radius-sm);
    font-size: var(--sysfin-font-size-md);
    color: var(--sysfin-text);
    background: var(--sysfin-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    font-family: inherit;
}

.sysfin-input:focus {
    border-color: var(--sysfin-primary);
    box-shadow: var(--sysfin-focus-ring);
}

/* ================================================================
   Alertas e mensagens reutilizáveis
   ================================================================ */
.sysfin-alert {
    padding: 10px 14px;
    border-radius: var(--sysfin-radius-sm);
    margin-bottom: 12px;
    font-size: var(--sysfin-font-size-md);
    line-height: 18px;
    border: 1px solid transparent;
}

.sysfin-alert-error,
.sysfin-alert-danger {
    background: var(--sysfin-danger-soft);
    border-color: var(--sysfin-danger-border);
    color: var(--sysfin-danger);
}

.sysfin-alert-info {
    background: var(--sysfin-info-soft);
    border-color: var(--sysfin-info-border);
    color: var(--sysfin-info);
}

.sysfin-alert-success {
    background: var(--sysfin-success-soft);
    border-color: var(--sysfin-success-border);
    color: var(--sysfin-success);
}

.sysfin-alert-warning {
    background: var(--sysfin-warning-soft);
    border-color: var(--sysfin-warning-border);
    color: var(--sysfin-warning);
}

/* ================================================================
   Overrides do PrimeFaces para manter coerência visual
   (escopo amplo — afeta todas as telas internas)
   ================================================================ */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--sysfin-font-family) !important;
    font-size: var(--sysfin-font-size-md) !important;
}

/* Painéis PrimeFaces */
.ui-panel {
    border: 1px solid var(--sysfin-border) !important;
    border-radius: var(--sysfin-radius) !important;
    background: var(--sysfin-surface) !important;
    box-shadow: var(--sysfin-shadow-sm) !important;
}

.ui-panel .ui-panel-titlebar {
    background: var(--sysfin-surface-alt) !important;
    border: none !important;
    border-bottom: 1px solid var(--sysfin-border) !important;
    color: var(--sysfin-text) !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-radius: var(--sysfin-radius) var(--sysfin-radius) 0 0 !important;
}

.ui-panel .ui-panel-content {
    background: var(--sysfin-surface) !important;
    border: none !important;
    padding: 14px !important;
    color: var(--sysfin-text) !important;
}

/* Botões do PrimeFaces — visual base padronizado */
.ui-button {
    background: var(--sysfin-surface) !important;
    color: var(--sysfin-text) !important;
    border: 1px solid var(--sysfin-border-strong) !important;
    border-radius: var(--sysfin-radius-sm) !important;
    box-shadow: var(--sysfin-shadow-sm) !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    /* O espaçamento interno fica no rótulo (regra abaixo). Aplicado aqui,
       somaria ao do .ui-button-text e o botão cresceria. */
    padding: 0 !important;
    line-height: normal;
}

.ui-button .ui-button-text {
    padding: 6px 14px !important;
    line-height: 1.4;
}

.ui-button.ui-button-text-icon-left .ui-button-text {
    padding-left: 28px !important;
}

.ui-button.ui-button-text-icon-right .ui-button-text {
    padding-right: 28px !important;
}

.ui-button.ui-button-icon-only {
    width: 30px;
    height: 30px;
}

.ui-button:hover {
    background: var(--sysfin-primary-50) !important;
    border-color: var(--sysfin-primary-light) !important;
    color: var(--sysfin-text) !important;
}

.ui-button:focus {
    outline: none !important;
    box-shadow: var(--sysfin-focus-ring) !important;
}

/* Botão "prioritário" (legado) → primário */
.ui-button.prioritario {
    background: var(--sysfin-primary) !important;
    color: var(--sysfin-text-on-primary) !important;
    border-color: var(--sysfin-primary) !important;
    background-image: none !important;
}

.ui-button.prioritario:hover {
    background: var(--sysfin-primary-dark) !important;
    border-color: var(--sysfin-primary-dark) !important;
    color: var(--sysfin-text-on-primary) !important;
}

.ui-button.prioritario_verde {
    background: var(--sysfin-success) !important;
    background-image: none !important;
    color: var(--sysfin-text-on-primary) !important;
    border-color: var(--sysfin-success) !important;
}

.ui-button.prioritario_verde:hover,
.ui-button.prioritario_verde:active {
    background: #245d27 !important;
    border-color: #245d27 !important;
    color: var(--sysfin-text-on-primary) !important;
    background-image: none !important;
    box-shadow: var(--sysfin-shadow-sm) !important;
}

.ui-button.prioritario_amarelo {
    background: var(--sysfin-warning) !important;
    background-image: none !important;
    color: var(--sysfin-text-on-primary) !important;
    border-color: var(--sysfin-warning) !important;
}

.ui-button.prioritario_amarelo:hover {
    background: #8a5300 !important;
    border-color: #8a5300 !important;
}

.ui-button.prioritario_vermelho {
    background: var(--sysfin-danger) !important;
    background-image: none !important;
    color: var(--sysfin-text-on-primary) !important;
    border-color: var(--sysfin-danger) !important;
}

.ui-button.prioritario_vermelho:hover {
    background: #8e1c16 !important;
    border-color: #8e1c16 !important;
}

/* Inputs do PrimeFaces */
.ui-inputfield,
.ui-inputtext,
.ui-selectonemenu,
.ui-autocomplete-input,
.ui-spinner-input,
.ui-calendar input {
    border: 1px solid var(--sysfin-border-strong) !important;
    border-radius: var(--sysfin-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: var(--sysfin-font-size-md) !important;
    color: var(--sysfin-text) !important;
    background: var(--sysfin-surface) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* O selectOneMenu é um container com um rótulo dentro: o espaçamento fica
   só no rótulo, senão os dois se somam e o campo cresce demais. */
.ui-selectonemenu {
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
}

.ui-selectonemenu .ui-selectonemenu-label {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 6px 10px !important;
    font-size: var(--sysfin-font-size-md) !important;
    color: var(--sysfin-text) !important;
    line-height: 1.4;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    border: none !important;
    background: transparent !important;
    width: 22px;
}

.ui-inputfield:focus,
.ui-inputtext:focus,
.ui-selectonemenu:focus,
.ui-selectonemenu.ui-state-focus,
.ui-autocomplete-input:focus {
    border-color: var(--sysfin-primary) !important;
    box-shadow: var(--sysfin-focus-ring) !important;
    outline: none !important;
}

/* DataTable */
.ui-datatable,
.ui-datatable .ui-datatable-tablewrapper {
    background: var(--sysfin-surface) !important;
}

.ui-datatable .ui-datatable-header,
.ui-datatable thead th {
    background: var(--sysfin-surface-alt) !important;
    border-color: var(--sysfin-border) !important;
    color: var(--sysfin-text) !important;
    font-weight: 600 !important;
    background-image: none !important;
}

.ui-datatable tbody td {
    border-color: var(--sysfin-border) !important;
    color: var(--sysfin-text) !important;
}

.ui-datatable tbody tr.ui-datatable-even {
    background: var(--sysfin-surface) !important;
}

.ui-datatable tbody tr.ui-datatable-odd {
    background: var(--sysfin-surface-alt) !important;
}

.ui-datatable tbody tr:hover {
    background: var(--sysfin-primary-50) !important;
}

.ui-datatable .ui-paginator {
    background: var(--sysfin-surface-alt) !important;
    border-color: var(--sysfin-border) !important;
    padding: 6px !important;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--sysfin-primary) !important;
    color: var(--sysfin-text-on-primary) !important;
    border-color: var(--sysfin-primary) !important;
}

/* TabView */
.ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--sysfin-border) !important;
    padding: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
    background: transparent !important;
    border: none !important;
    margin: 0 4px 0 0 !important;
}

.ui-tabs .ui-tabs-nav li a {
    color: var(--sysfin-text-muted) !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: transparent !important;
    border-bottom: 2px solid var(--sysfin-primary) !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--sysfin-primary) !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 14px 4px !important;
}

/* Diálogos */
.ui-dialog {
    border: 1px solid var(--sysfin-border) !important;
    border-radius: var(--sysfin-radius) !important;
    box-shadow: var(--sysfin-shadow-lg) !important;
    background: var(--sysfin-surface) !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--sysfin-surface-alt) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--sysfin-border) !important;
    color: var(--sysfin-text) !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
}

.ui-dialog .ui-dialog-content {
    background: var(--sysfin-surface) !important;
    color: var(--sysfin-text) !important;
    padding: 16px !important;
}

/* Menubar (cabeçalho de menus) */
.ui-menubar {
    background: var(--sysfin-surface) !important;
    background-image: none !important;
    border: 1px solid var(--sysfin-border) !important;
    border-radius: var(--sysfin-radius-sm) !important;
    box-shadow: var(--sysfin-shadow-sm) !important;
    padding: 4px !important;
}

.ui-menubar .ui-menuitem-link {
    color: var(--sysfin-text) !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: var(--sysfin-radius-sm) !important;
}

.ui-menubar .ui-menuitem:hover > .ui-menuitem-link,
.ui-menubar .ui-menuitem-active > .ui-menuitem-link {
    background: var(--sysfin-primary-50) !important;
    color: var(--sysfin-primary-dark) !important;
}

.ui-menu .ui-menuitem-link {
    color: var(--sysfin-text) !important;
    padding: 8px 14px !important;
}

.ui-menu .ui-menuitem-link:hover,
.ui-menu .ui-menuitem-active > .ui-menuitem-link {
    background: var(--sysfin-primary-50) !important;
    color: var(--sysfin-primary-dark) !important;
}

/* Mensagens do PrimeFaces */
.ui-messages {
    border-radius: var(--sysfin-radius-sm) !important;
    margin-bottom: 12px !important;
}

.ui-messages-error {
    background: var(--sysfin-danger-soft) !important;
    border-color: var(--sysfin-danger-border) !important;
    color: var(--sysfin-danger) !important;
}

.ui-messages-info {
    background: var(--sysfin-info-soft) !important;
    border-color: var(--sysfin-info-border) !important;
    color: var(--sysfin-info) !important;
}

.ui-messages-warn {
    background: var(--sysfin-warning-soft) !important;
    border-color: var(--sysfin-warning-border) !important;
    color: var(--sysfin-warning) !important;
}

/* Campo obrigatório */
.campo-obrigatorio {
    font-weight: 600 !important;
    color: var(--sysfin-danger) !important;
}

/* Linha selecionada (legado) */
.linha-selecionada {
    background: var(--sysfin-primary-50) !important;
}

/* Helpers genéricos */
.sysfin-text-muted   { color: var(--sysfin-text-muted) !important; }
.sysfin-text-primary { color: var(--sysfin-primary) !important; }
.sysfin-text-success { color: var(--sysfin-success) !important; }
.sysfin-text-danger  { color: var(--sysfin-danger) !important; }
.sysfin-bg-soft      { background: var(--sysfin-bg) !important; }