/* ==========================================================================
   Formulários do admin — minimalista e compacto

   Inputs baixos e discretos, rótulos micro em maiúsculas, grid apertado
   e seções bem marcadas para o usuário localizar os campos rápido.
   Sem mexer no markup — escopo: .page-content e .page-wrapper form.
   Páginas ainda podem sobrescrever via @yield('css').
   ========================================================================== */

/* (shell do card / padding da página: ver admin-modern.css) */

/* topo do card (Voltar / título) compacto */
.page-content .page-breadcrumb { margin-bottom: .25rem !important; }
.page-content .card-title { margin-bottom: .1rem; }
.page-content .card-title h5,
.page-content .card-title .h5 {
    font-size: .95rem;
    font-weight: 700;
}
.page-content > .card > .card-body > hr:first-of-type {
    margin: .45rem 0 .8rem;
    border: 0;
    border-top: 1px solid #eef2f7;
    opacity: 1;
}

/* ---- Grid: gutters curtos ---- */
.page-content .row.g-3,
.page-wrapper form .row.g-3 {
    --bs-gutter-y: .5rem;
    --bs-gutter-x: .75rem;
}
.page-content .row.g-3 > .col-12:empty,
.page-wrapper form .row.g-3 > .col-12:empty {
    padding-top: 0;
    min-height: 0;
    display: none;
}

/* ---- Rótulos: micro, maiúsculas, discretos ---- */
.page-content form label,
.page-content .form-group > label,
.page-wrapper form label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: .18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-content form label .text-danger,
.page-content form label .required { color: #ef4444; }

/* ---- Campos: baixos, planos, foco verde ---- */
.page-content .form-group { margin-bottom: .55rem; }

.page-content form .form-control,
.page-content form .form-select,
.page-content form .custom-select,
.page-wrapper form .form-control,
.page-wrapper form .form-select {
    height: 34px;
    min-height: 34px;
    padding: .2rem .55rem;
    font-size: .82rem;
    line-height: 1.25;
    border-radius: 7px;
    border: 1px solid #e4e8ef;
    background-color: #f8fafc;
    color: #1e293b;
    transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.page-content form .form-control::placeholder { color: #b2bccb; }

.page-content form .form-control:hover,
.page-content form .form-select:hover,
.page-wrapper form .form-control:hover,
.page-wrapper form .form-select:hover {
    border-color: #d4dae4;
}

.page-content form .form-control:focus,
.page-content form .form-select:focus,
.page-wrapper form .form-control:focus,
.page-wrapper form .form-select:focus {
    background-color: #fff;
    border-color: var(--ds-brand-600, #00c853);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, .12);
}

.page-content form textarea.form-control,
.page-wrapper form textarea.form-control {
    height: auto;
    min-height: 62px;
    padding: .4rem .55rem;
}
.page-content form select[multiple].form-control,
.page-content form select[multiple].form-select { height: auto; }
.page-content form .form-control[readonly],
.page-content form .form-control:disabled { background-color: #eef2f7; color: #64748b; }

/* Select2 na mesma pegada */
.page-content form .select2-container--default .select2-selection--single,
.page-wrapper form .select2-container--default .select2-selection--single {
    height: 34px;
    border-radius: 7px;
    border: 1px solid #e4e8ef;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
}
.page-content form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: .82rem;
    padding-left: .45rem;
}
.page-content form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.page-content form .select2-container--default.select2-container--focus .select2-selection--single {
    background-color: #fff;
    border-color: var(--ds-brand-600, #00c853);
}

/* input-group (campo + botão de busca) alinhado */
.page-content form .input-group > .form-control,
.page-content form .input-group > .form-select { height: 34px; }
.page-content form .input-group > .btn {
    height: 34px;
    padding: 0 .7rem;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
}

/* ---- Seções: faixa/eyebrow com traço de destaque ---- */
.page-content form h4,
.page-content form h5,
.page-content form h6,
.page-content form legend {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin: 1rem 0 .35rem;
    padding-top: .7rem;
    border-top: 1px solid #eef2f7;
    width: 100%;
}
.page-content form h4::before,
.page-content form h5::before,
.page-content form h6::before,
.page-content form legend::before {
    content: "";
    width: 3px;
    height: .82rem;
    border-radius: 2px;
    background: var(--ds-brand-600, #00c853);
}
/* primeira seção sem o traço superior duplicado */
.page-content form > .row.g-3 > h4:first-child,
.page-content form > .row.g-3 > h5:first-child,
.page-content form .row.g-3 > h5:first-of-type { margin-top: .2rem; }

/* ---- Divisores discretos ---- */
.page-content form hr,
.page-content .row.g-3 hr {
    margin: .7rem 0;
    border: 0;
    border-top: 1px solid #eef2f7;
    opacity: 1;
    width: 100%;
}

/* ---- Ações do formulário ---- */
.page-content form .btn { border-radius: 7px; }
.page-content form .form-actions,
.page-content form .text-end.mt-3,
.page-content form .d-flex.justify-content-end {
    margin-top: .9rem !important;
    padding-top: .8rem;
    border-top: 1px solid #eef2f7;
}

/* checkbox / radio compactos e alinhados */
.page-content form .form-check { min-height: 1.3rem; margin-bottom: .25rem; }
.page-content form .form-check-input { margin-top: .18rem; }
.page-content form .form-check-label { font-size: .82rem; text-transform: none; letter-spacing: 0; color: #475569; }

/* datas: ícone do date não estica a altura */
.page-content form input[type="date"].form-control { padding-right: .4rem; }

/* mensagens de erro compactas */
.page-content form .invalid-feedback,
.page-content form .text-danger.small { font-size: .72rem; margin-top: .12rem; }

/* ==========================================================================
   Layout em blocos (seções numeradas) — usado no formulário de cliente.
   Ativado apenas quando a view usa .fsec-grid / .fsec.
   ========================================================================== */

/* navegação por âncoras */
.page-content .fsec-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem 0 .7rem;
    margin-bottom: .3rem;
    background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0));
}
.page-content .fsec-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .7rem .28rem .32rem;
    border: 1px solid #e4e8ef;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    background: #fff;
    transition: border-color .12s, color .12s, background .12s;
}
.page-content .fsec-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eef2f7;
    color: #64748b;
    font-size: .68rem;
    font-weight: 700;
}
.page-content .fsec-chip:hover {
    border-color: var(--ds-brand-600, #00c853);
    color: #1e293b;
    background: #f2fbf6;
}
.page-content .fsec-chip:hover span {
    background: var(--ds-brand-600, #00c853);
    color: #04231a;
}

/* grade de blocos: 2 colunas em telas largas, empilha abaixo de ~1100px */
.page-content .fsec-grid { columns: 2 460px; column-gap: 1rem; }
@media (max-width: 1100px) { .page-content .fsec-grid { columns: 1; } }

/* bloco */
.page-content .fsec {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 1rem;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(15, 23, 42, .05);
    overflow: hidden;
}
.page-content .fsec__head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .9rem;
    background: #f7f9fb;
    border-bottom: 1px solid #eef2f7;
}
.page-content .fsec__head .fsec__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ds-brand-600, #00c853);
    color: #04231a;
    font-size: .78rem;
    font-weight: 800;
    flex: none;
}
.page-content .fsec__head > i {
    font-size: 18px;
    color: #94a3b8;
}
/* anula o estilo "eyebrow" do forms-modern para o título do bloco */
.page-content .fsec__head h5 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
    display: block !important;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #334155;
}
.page-content .fsec__head h5::before { content: none !important; }

.page-content .fsec__body { padding: .9rem .9rem 1rem; }

/* sub-cabeçalho dentro do bloco */
.page-content .fsec__subhead {
    margin: 1rem 0 .1rem;
    padding-top: .7rem;
    border-top: 1px dashed #e4e8ef;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}
.page-content .fsec__subhead span { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* âncoras não ficam escondidas atrás da barra sticky */
.page-content .fsec { scroll-margin-top: 64px; }

/* avatar do cliente */
.page-content .fsec-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-align: center;
}
.page-content .fsec-avatar ._image-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 2px solid #e6eaf0;
    background: #f7f9fb;
    cursor: pointer;
}
.page-content .fsec-avatar ._image-preview img,
.page-content .fsec-avatar ._image-preview .img-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-content .fsec-avatar #image-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .35rem;
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, .55));
    cursor: pointer;
}
.page-content .fsec-avatar__hint { margin: 0; font-size: .7rem; color: #94a3b8; }

/* botão "buscar dados" alinhado ao input de CPF/CNPJ */
.page-content .fsec-btn-consulta {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 7px;
}

/* barra de ações fixa no rodapé da área de conteúdo */
.page-content .fsec-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin: .6rem -1.4rem -1.45rem;
    padding: .8rem 1.4rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e6eaf0;
}
.page-content .fsec-actions .btn {
    height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 9px;
    font-weight: 600;
    white-space: nowrap;
}
.page-content .fsec-actions .btn.px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.page-content .fsec-actions .btn i { flex: 0 0 auto; font-size: 16px; }
@media (max-width: 575px) {
    .page-content .fsec-actions { flex-direction: column-reverse; }
    .page-content .fsec-actions .btn { width: 100%; justify-content: center; }
}

/* dentro de modal (sem .page-content ancestral) a barra não fica sticky */
.md-cliente .fsec-actions,
.modal .fsec-actions { position: static; margin: .8rem 0 0; background: none; backdrop-filter: none; }
.md-cliente .fsec-grid,
.modal .fsec-grid { columns: 1; }

/* bloco que ocupa a largura toda (ex.: árvore de permissões) */
.page-content .fsec-grid .fsec--full {
    column-span: all;
    -webkit-column-span: all;
    margin-bottom: 1rem;
}
.page-content .fsec--full .checkbox-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
}
.page-content .fsec--full .checkbox.check-sub { font-size: .82rem; }

/* ==========================================================================
   Formulários com abas próprias (produtos, config fiscal): polimento leve
   das abas sem mexer no markup/JS (selectDiv / link-active).
   ========================================================================== */
.page-content .btn-identificacao,
.page-content .btn-variacoes,
.page-content .btn-aliquotas,
.page-content .btn-outline-primary.link-active {
    border-radius: 8px;
    font-weight: 600;
    font-size: .82rem;
    padding: .45rem .9rem;
}
.page-content .btn-outline-primary.link-active,
.page-content .link-active.btn-identificacao,
.page-content .link-active.btn-variacoes,
.page-content .link-active.btn-aliquotas {
    background: var(--ds-brand-600, #00c853);
    border-color: var(--ds-brand-600, #00c853);
    color: #04231a;
}
/* sub-cabeçalhos dentro das abas ficam como eyebrow discreto (já vem do bloco
   'Seções' acima); só garante espaçamento coerente */
.page-content form h5.mt-3,
.page-content form h5.mt-5 { margin-top: 1rem !important; }

/* ==========================================================================
   Formulário de produto: abas em barra segmentada + blocos empilhados
   ========================================================================== */

/* barra de abas */
.page-content .fsec-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    width: 100%;
    padding: .3rem;
    margin-bottom: .4rem;
    background: #f1f4f8;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
}
.page-content .fsec-tabs .btn {
    flex: 1 1 auto;
    min-width: 140px;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #64748b !important;
    font-weight: 600;
    font-size: .82rem;
    padding: .5rem .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    box-shadow: none !important;
}
.page-content .fsec-tabs .btn i { font-size: 16px; }
.page-content .fsec-tabs .btn:hover { color: #1e293b !important; background: #e7ecf3 !important; }
.page-content .fsec-tabs .btn.link-active {
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12) !important;
}

/* blocos empilhados (1 coluna) — usado quando cada bloco tem muitos campos */
.page-content .fsec-stack {
    display: block;
    columns: auto !important;
    column-count: auto !important;
}
.page-content .fsec-stack .fsec {
    break-inside: auto;
    -webkit-column-break-inside: auto;
}

/* sub-h5 dentro dos blocos de produto viram eyebrow simples (sem borda dupla) */
.page-content .fsec__body > h5 {
    display: block;
    width: 100%;
    margin: 1rem 0 .35rem;
    padding: 0;
    border: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.page-content .fsec__body > h5::before { content: none; }
.page-content .fsec__body > h5:first-child { margin-top: 0; }

/* ==========================================================================
   input-group + Select2 (ex.: Categoria / Sub / Marca com botão "+")
   O Select2 vira .select2-container display:block width:100% e joga o botão
   para a linha de baixo. Aqui ele volta a ser um item flex inline.
   ========================================================================== */
.page-content form .input-group { flex-wrap: nowrap; }

.page-content form .input-group > .select2-container {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0;
    display: block !important;
}
.page-content form .input-group > .select2-container .select2-selection--single,
.page-content form .input-group > .select2-container .select2-selection {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid #e4e8ef !important;
    border-right: 0 !important;
    border-radius: 7px 0 0 7px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
}
.page-content form .input-group > .select2-container .select2-selection__rendered {
    line-height: 1.3 !important;
    padding: 0 .55rem !important;
    font-size: .82rem !important;
    color: #1e293b !important;
}
.page-content form .input-group > .select2-container .select2-selection__placeholder {
    color: #b2bccb !important;
}
.page-content form .input-group > .select2-container .select2-selection__arrow {
    height: 32px !important;
    top: 0 !important;
    right: 4px !important;
}
.page-content form .input-group > .select2-container.select2-container--focus .select2-selection,
.page-content form .input-group > .select2-container.select2-container--open .select2-selection {
    background: #fff !important;
    border-color: var(--ds-brand-600, #00c853) !important;
}

/* o botão "+" cola no select, mesma altura */
.page-content form .input-group > .select2-container + .btn,
.page-content form .input-group > .select2-container ~ .btn {
    height: 34px;
    padding: 0 .7rem;
    border-radius: 0 7px 7px 0 !important;
    margin-left: -1px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* antes do Select2 inicializar (select cru dentro do input-group) */
.page-content form .input-group > select.form-control {
    flex: 1 1 auto;
    width: 1%;
    border-radius: 7px 0 0 7px;
}