/* ==========================================================================
   DRDiM — camada visual moderna do admin (aplica a todas as telas)

   Reestiliza os padrões estruturais que TODAS as views compartilham
   (cards, cabeçalho de página, barra de filtros, tabelas de listagem,
   botões de ação, paginação, badges, alertas, modais) sem tocar no
   markup. Escopo: .page-content / .page-wrapper. Não afeta o PDV
   (layout próprio) nem o login.

   Carregado após o design-system; páginas podem sobrescrever via
   @yield('css'). Trabalha em conjunto com forms-modern.css.
   ========================================================================== */

:root {
    --am-bg: #eef1f5;
    --am-surface: #ffffff;
    --am-surface-2: #f7f9fb;
    --am-border: #e6eaf0;
    --am-border-soft: #eef2f7;
    --am-ink: #1e293b;
    --am-ink-soft: #64748b;
    --am-ink-faint: #94a3b8;
    --am-brand: var(--ds-brand-600, #00c853);
    --am-radius: 12px;
    --am-radius-sm: 8px;
    --am-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .05);
}

/* ==========================================================================
   1. Shell da página + cards
   ========================================================================== */
.page-wrapper { background: var(--am-bg); }

.page-content { padding: 0 !important; }

.page-content > .card {
    margin: .35rem 0 0 !important;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    box-shadow: var(--am-shadow);
    background: var(--am-surface);
}
.page-content > .card > .card-body {
    padding: .95rem 1rem 1.15rem;
}
@media (min-width: 768px) {
    .page-content > .card > .card-body { padding: 1.15rem 1.4rem 1.45rem; }
}
.page-content > .card > .card-body[class*="p-"] { padding: .95rem 1rem 1.15rem !important; }
@media (min-width: 768px) {
    .page-content > .card > .card-body[class*="p-"] { padding: 1.15rem 1.4rem 1.45rem !important; }
}

/* Card dentro de card -> achata o de dentro (só moldura, sem dupla borda/sombra/padding) */
.page-content .card .card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
}
.page-content .card .card > .card-body {
    padding: 0 !important;
}

/* ==========================================================================
   2. Cabeçalho da página (linha de ações + título)
   ========================================================================== */
.page-content .page-breadcrumb {
    margin-bottom: .6rem !important;
    gap: .4rem;
}
.page-content .page-breadcrumb .breadcrumb { margin: 0; }

/* título da tela: h5/h6 no topo do card */
.page-content > .card > .card-body > h6,
.page-content > .card > .card-body > .col > h6,
.page-content .card-title h5,
.page-content .card-title .h5,
.page-content > .card > .card-body > h5 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    color: var(--am-ink) !important;
    margin: 0 0 .5rem !important;
}
.page-content > .card > .card-body > hr:first-of-type,
.page-content .card-title + hr { display: none; }

/* ==========================================================================
   3. Barra de filtros (Form::open()->get())
   ========================================================================== */
.page-content form[method="get" i] .row,
.page-content form[method="GET"] .row {
    align-items: flex-end;
    --bs-gutter-y: .5rem;
}
.page-content form[method="get" i] .row br,
.page-content form[method="GET"] .row br { display: none; }

.page-content form[method="get" i] .row .btn,
.page-content form[method="GET"] .row .btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .8rem;
    border-radius: var(--am-radius-sm);
}
.page-content form[method="get" i] .row hr { margin: .7rem 0 .2rem; }

/* ==========================================================================
   4. Tabelas de listagem
   ========================================================================== */
.page-content .table-responsive {
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    background: var(--am-surface);
    overflow: auto;
}
.page-content .table {
    margin: 0;
    color: var(--am-ink);
    border-color: var(--am-border-soft);
}

/* zera o "listrado" berrante e temas; usa hover no lugar */
.page-content .table.table-striped > tbody > tr > *,
.page-content .table > :not(caption) > * > * {
    background-color: var(--am-surface);
    --bs-table-accent-bg: transparent;
    box-shadow: none;
}
.page-content .table.table-striped > tbody > tr:nth-of-type(2n) > * {
    background-color: #fbfcfe;
}
.page-content .table > tbody > tr:hover > * {
    background-color: #f1f7ff;
}

/* cabeçalho */
.page-content .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--am-surface-2);
    color: var(--am-ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--am-border);
    padding: .6rem .8rem;
}

/* células */
.page-content .table > tbody > td,
.page-content .table > tbody > tr > td {
    padding: .55rem .8rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--am-border-soft);
    font-size: .855rem;
}
.page-content .table > tbody > tr:last-child > td { border-bottom: 0; }

/* última coluna (Ações) à direita */
.page-content .table > thead > tr > th:last-child,
.page-content .table > tbody > tr > td:last-child { text-align: right; }

/* "Nada encontrado" */
.page-content .table > tbody > tr > td[colspan] {
    text-align: center;
    color: var(--am-ink-faint);
    padding: 2.2rem .8rem;
    font-size: .9rem;
}

/* avatares / thumbs na tabela */
.page-content .table .img-round,
.page-content .table img.rounded-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--am-border);
    background: var(--am-surface-2);
}

/* ==========================================================================
   5. Botões de ação dentro da tabela
   ========================================================================== */
/* espaçamento entre botões na mesma célula + raio; NÃO força tamanho de botão
   com texto (evita clipping/sobreposição) */
.page-content .table td .btn + .btn { margin-left: .25rem; }
.page-content .table td .btn.btn-sm { border-radius: var(--am-radius-sm); box-shadow: none; }

/* botão de ação que é SÓ um ícone -> quadradinho de 30px (mantém a cor do variant) */
.page-content .table td .btn.btn-sm:has(> i:only-child) {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.page-content .table td .btn.btn-sm:has(> i:only-child) > i { font-size: 15px; }

/* variantes neutras (sem cor de fundo) ganham moldura sutil */
.page-content .table td .btn-light.btn-sm:has(> i:only-child),
.page-content .table td .btn-outline-secondary.btn-sm:has(> i:only-child),
.page-content .table td .btn-white.btn-sm:has(> i:only-child) {
    border: 1px solid var(--am-border);
    background: var(--am-surface);
    color: var(--am-ink-soft);
}
.page-content .table td .btn-light.btn-sm:has(> i:only-child):hover,
.page-content .table td .btn-outline-secondary.btn-sm:has(> i:only-child):hover { border-color: #cfd8e3; color: var(--am-ink); }

/* célula da chave da NF-e: trunca (44 dígitos estouram a tabela) */
.page-content .table td.chave-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* botões fora de tabela: só o raio */
.page-content .btn { border-radius: var(--am-radius-sm); }
.page-content .btn-lg { border-radius: var(--am-radius); }

/* ==========================================================================
   6. Paginação
   ========================================================================== */
.page-content .pagination {
    margin: .9rem 0 0;
    gap: .25rem;
    flex-wrap: wrap;
}
.page-content .pagination .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm) !important;
    color: var(--am-ink-soft);
    font-size: .85rem;
    padding: 0 .55rem;
}
.page-content .pagination .page-link:hover { background: var(--am-surface-2); color: var(--am-ink); }
.page-content .pagination .page-item.active .page-link {
    background: var(--ds-brand-600, #00c853);
    border-color: var(--ds-brand-600, #00c853);
    color: #04231a;
    font-weight: 600;
}
.page-content .pagination .page-item.disabled .page-link { opacity: .5; }

/* ==========================================================================
   7. Badges / labels
   ========================================================================== */
.page-content .badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .34em .6em;
    border-radius: 999px;
    letter-spacing: .01em;
}

/* ==========================================================================
   8. Alertas
   ========================================================================== */
.page-content .alert {
    border: 1px solid var(--am-border);
    border-left-width: 3px;
    border-radius: var(--am-radius-sm);
    padding: .7rem .9rem;
    font-size: .875rem;
}

/* ==========================================================================
   9. Modais
   ========================================================================== */
.modal-content {
    border: 0;
    border-radius: var(--am-radius);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    overflow: hidden;
}
.modal-header {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--am-border-soft);
}
.modal-header .modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--am-ink);
}
.modal-body { padding: 1.1rem; }
.modal-footer {
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--am-border-soft);
    background: var(--am-surface-2);
    gap: .5rem;
}
.modal-footer .btn { border-radius: var(--am-radius-sm); }
.modal-footer .btn.px-5 { padding-left: 1.4rem !important; padding-right: 1.4rem !important; }

/* ==========================================================================
   10. Detalhes
   ========================================================================== */
/* barra flutuante de config (engrenagem lateral) menos intrusiva */
.switcher-wrapper .switcher-btn { border-radius: 10px 0 0 10px; }

/* espaçamento do help-button flutuante */
.page-content + .help-floating-btn,
.help-floating-btn { z-index: 1030; }

/* scrollbars sutis */
.page-content .table-responsive::-webkit-scrollbar { height: 8px; width: 8px; }
.page-content .table-responsive::-webkit-scrollbar-thumb {
    background: #d3dae4;
    border-radius: 4px;
}

/* cards informativos que devem manter moldura dentro de um bloco .fsec
   (ex.: card de dados do certificado no config fiscal) */
.page-content .fsec .card.fiscal-campos,
.page-content .fsec .card:not(.card-body) {
    border: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
    border-radius: 10px !important;
    margin: 0 0 .75rem !important;
}
.page-content .fsec .card.fiscal-campos > .card-body { padding: .9rem 1rem !important; }



/* ==========================================================================
   Tabelas largas: scroll-x sempre alcançável + paginação sempre visível

   A tabela vira um "viewport" com altura máxima: a barra de rolagem
   horizontal fica no rodapé DESSE box (não no fim da página) e o cabeçalho
   fica fixo no topo ao rolar. A paginação fica logo abaixo, sempre à vista.
   Os botões de ação NÃO são reestilizados aqui — não quebram.
   ========================================================================== */
.page-content .table-responsive {
    max-height: 60vh;
    overflow: auto;
    overscroll-behavior: contain;
}
.page-content .table-responsive > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: inset 0 -1px 0 var(--am-border);
}

/* célula de Ações: botões numa linha só (coluna ganha largura natural,
   a rolagem é do box) */
.page-content .table td.acoes-cell,
.page-content .table td:last-child {
    white-space: nowrap;
}

/* barra de rolagem horizontal sempre visível no rodapé do box */
.page-content .table-responsive::-webkit-scrollbar { height: 12px; width: 12px; }
.page-content .table-responsive::-webkit-scrollbar-track { background: var(--am-surface-2); }
.page-content .table-responsive::-webkit-scrollbar-thumb {
    background: #c2cbd8;
    border-radius: 6px;
    border: 3px solid var(--am-surface-2);
}
.page-content .table-responsive::-webkit-scrollbar-thumb:hover { background: #a9b4c4; }

/* paginação logo abaixo, com respiro */
.page-content .pagination { margin-top: .8rem !important; }