/*
PADRÃO VISUAL GERAL — FLUXUS PESSOAL

Objetivo: evitar formulários com campos gigantes e aparência amadora.
Este arquivo deve ser reutilizado nas próximas telas.
*/

:root{
  --fp-font-xs:10px;
  --fp-font-sm:11px;
  --fp-font-md:12px;
  --fp-font-lg:14px;

  --fp-control-h:32px;
  --fp-control-h-compact:30px;
  --fp-radius:5px;
  --fp-gap-x:12px;
  --fp-gap-y:9px;

  --fp-border:#c5d0d9;
  --fp-border-light:#e1e7ec;
  --fp-text:#24455c;
  --fp-muted:#718696;
  --fp-primary:#6845c6;
  --fp-danger:#d83b3b;
}

.fx-form-section{
  padding:12px 14px 11px!important
}

.fx-form-section h2{
  margin:0 0 10px!important;
  font-size:var(--fp-font-lg)!important
}

.fx-form-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:var(--fp-gap-y) var(--fp-gap-x)!important;
  align-items:end
}

.fx-field{
  min-width:0;
  gap:4px!important
}

.fx-field>span,
.fx-field label{
  font-size:var(--fp-font-sm)!important;
  line-height:1.2;
  font-weight:600
}

.fx-field input,
.fx-field select,
.fx-field textarea{
  min-height:var(--fp-control-h)!important;
  height:var(--fp-control-h)!important;
  padding:4px 8px!important;
  border:1px solid var(--fp-border)!important;
  border-radius:var(--fp-radius)!important;
  font-size:var(--fp-font-md)!important;
  line-height:1.2!important;
  box-sizing:border-box
}

.fx-field textarea{
  height:auto!important;
  min-height:64px!important;
  resize:vertical
}

/* Larguras semânticas para não desperdiçar espaço */
.fp-w-xs{grid-column:span 1!important}
.fp-w-sm{grid-column:span 2!important}
.fp-w-md{grid-column:span 3!important}
.fp-w-lg{grid-column:span 4!important}
.fp-w-xl{grid-column:span 6!important}
.fp-w-full{grid-column:1/-1!important}

/* Compatibilidade com classes antigas */
.span-1{grid-column:span 1!important}
.span-2{grid-column:span 2!important}
.span-3{grid-column:span 3!important}
.span-4{grid-column:span 4!important}
.span-5{grid-column:span 5!important}

/* Botões */
.fx-btn,
.fx-outline-button,
.fx-filter-actions button,
.fx-actions button{
  min-height:32px!important;
  height:32px!important;
  padding:0 12px!important;
  border-radius:5px!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1!important
}

.fx-btn-primary{
  border:1px solid var(--fp-primary)!important;
  background:var(--fp-primary)!important;
  color:#fff!important
}

.fx-btn-secondary,
.fx-outline-button{
  border:1px solid #bac7d0!important;
  background:#fff!important;
  color:#3e596d!important
}

.fx-btn-danger{
  border:1px solid #e2aaaa!important;
  background:#fff!important;
  color:var(--fp-danger)!important
}

/* Abas */
.fx-employee-tabs button{
  min-width:128px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 14px!important;
  font-size:11px!important
}

/* Tabelas */
.fx-employee-grid,
.fx-history-table,
.fx-dependent-table{
  font-size:10.5px!important
}
.fx-employee-grid th,
.fx-employee-grid td,
.fx-history-table th,
.fx-history-table td{
  padding:7px 8px!important
}

@media(max-width:1050px){
  .fx-form-grid{
    grid-template-columns:repeat(8,minmax(0,1fr))!important
  }
}