/* Padrões de tela — somente modo Moderno (rodada 1/2) */

.erp-design-moderno .ds-pattern-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

.erp-design-moderno .ds-ph {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

.erp-design-moderno .ds-ph h1 {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin: 0;
}

.erp-design-moderno .ds-ph .sub {
    color: var(--tx2);
    font-size: 14px;
    margin-top: 4px;
}

.erp-design-moderno .ds-ph-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* L — lista */
.erp-design-moderno .ds-pattern-list .card-header.bg-primary,
.erp-design-moderno .ds-pattern-list .card-header.text-white.bg-primary {
    background: var(--muted) !important;
    color: var(--tx) !important;
    border-bottom: 1px solid var(--bd);
}

.erp-design-moderno .ds-pattern-list .card-header h2,
.erp-design-moderno .ds-pattern-list .card-header h5 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--tx);
}

.erp-design-moderno .ds-pattern-list .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.erp-design-moderno .ds-pattern-list .filters-row .form-control,
.erp-design-moderno .ds-pattern-list .filters-row .form-select {
    min-width: 140px;
}

/* F — formulário */
.erp-design-moderno .ds-pattern-form .card {
    margin-bottom: var(--space-4, 16px);
}

.erp-design-moderno .ds-pattern-form .card-header {
    background: var(--muted);
    color: var(--tx);
    font-weight: 700;
    font-size: 15.5px;
    border-bottom: 1px solid var(--bd);
}

.erp-design-moderno .ds-pattern-form .ds-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #fff;
    border-top: 1px solid var(--bd);
    padding: 12px 0;
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* R — relatório */
.erp-design-moderno .ds-pattern-report .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 700px) {
    .erp-design-moderno .ds-pattern-report .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.erp-design-moderno .ds-pattern-report .dashboard-card .card-header.bg-primary {
    background: var(--muted) !important;
    color: var(--tx) !important;
}

/* Contas (fiado / pagar) */
.erp-design-moderno .ds-pattern-contas .dashboard-card.bg-warning,
.erp-design-moderno .ds-pattern-contas .dashboard-card .text-bg-warning {
    background: var(--card) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bd);
}

.erp-design-moderno .ds-pattern-contas .dashboard-card .card-value.text-warning {
    color: var(--alerta) !important;
}

/* N1 — segmentado PF/PJ legível */
.erp-design-moderno .btn-check:checked + .btn-outline-primary,
.erp-design-moderno .btn-check:checked + .btn-outline-primary:hover,
.erp-design-moderno .btn-check:checked + .btn-outline-primary:focus {
    background: var(--azul) !important;
    border-color: var(--azul) !important;
    color: #fff !important;
}

/* Agenda — blocos de horário */
.erp-design-moderno .ds-agenda-slot {
    min-height: 52px;
    padding: 8px 10px;
}

.erp-design-moderno .ds-agenda-slot .cliente-nome {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 600;
    font-size: 13px;
}

/* PDV (nova venda) */
.erp-design-moderno .ds-pattern-pdv .page-header.ds-ph h1 {
    font-size: 22px;
}

.erp-design-moderno .ds-pattern-pdv .card-header {
    background: var(--muted);
    border-bottom: 1px solid var(--bd);
    font-weight: 700;
}

.erp-design-moderno .ds-pattern-pdv .card-header h5 {
    font-size: 15.5px;
    margin: 0;
}

/* Caixa */
.erp-design-moderno .ds-pattern-caixa .dashboard-card {
    border: 1px solid var(--bd);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 36, 56, 0.06));
}

.erp-design-moderno .ds-pattern-caixa .card-value {
    font-weight: 750;
    letter-spacing: -0.02em;
}

/* Login admin (layout público) */
.auth-split.ds-auth-page .register-title {
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.auth-split.ds-auth-page .register-lead {
    color: #475569;
}

/* Loja pública */
.erp-design-moderno .ds-store-page .btn-add-cart,
.store-layout .btn-add-cart.btn-primary {
    background: var(--azul, #036cca) !important;
    border-color: var(--azul, #036cca) !important;
    color: #fff !important;
    opacity: 1;
}

/* =====================================================================
   Bridge rules — transformam o conteúdo antigo (Bootstrap) no visual novo
   quando a classe .erp-design-moderno está no body.
   QA: B1 (shell novo / conteúdo antigo), G1, G5, G6, G14.
   ===================================================================== */

/* G1 — Faixa azul nos cabeçalhos de card ➜ fundo neutro + texto escuro */
.erp-design-moderno .card-header.bg-primary,
.erp-design-moderno .card-header.text-white.bg-primary,
.erp-design-moderno .card-header.text-bg-primary {
    background: var(--muted, #f8fafc) !important;
    color: var(--tx, #0f172a) !important;
    border-bottom: 1px solid var(--bd, #e2e8f0);
}

.erp-design-moderno .card-header.bg-primary h2,
.erp-design-moderno .card-header.bg-primary h5,
.erp-design-moderno .card-header.text-white.bg-primary h2,
.erp-design-moderno .card-header.text-white.bg-primary h5,
.erp-design-moderno .card-header.text-bg-primary h5 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--tx, #0f172a);
}

/* G6 — Badges amarelos ➜ estilo do design system (alerta semântico) */
.erp-design-moderno .badge.bg-warning,
.erp-design-moderno .badge.text-bg-warning {
    background: var(--alerta-bg, #fef4e2) !important;
    color: var(--alerta, #b45309) !important;
    border: 1px solid var(--alerta-bd, #f8d9a4);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    font-size: 12px;
}

.erp-design-moderno .badge.bg-success,
.erp-design-moderno .badge.text-bg-success {
    background: var(--ok-bg, #eaf6ea) !important;
    color: var(--ok, #2e7d32) !important;
    border: 1px solid var(--ok-bd, #bfe3c1);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    font-size: 12px;
}

.erp-design-moderno .badge.bg-danger,
.erp-design-moderno .badge.text-bg-danger {
    background: var(--erro-bg, #fdecec) !important;
    color: var(--erro, #c62828) !important;
    border: 1px solid var(--erro-bd, #f5c2c2);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    font-size: 12px;
}

.erp-design-moderno .badge.bg-secondary,
.erp-design-moderno .badge.text-bg-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid var(--bd, #e2e8f0);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    font-size: 12px;
}

.erp-design-moderno .badge.bg-info,
.erp-design-moderno .badge.text-bg-info {
    background: var(--info-bg, #e6f6fe) !important;
    color: var(--info, #0b7fb0) !important;
    border: 1px solid var(--info-bd, #b5e3f8);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    font-size: 12px;
}

/* G5 — KPIs / dashboard-card: garantir espaçamento e contraste adequados */
.erp-design-moderno .dashboard-card .card-value,
.erp-design-moderno .dashboard-card .h4,
.erp-design-moderno .dashboard-card h4 {
    font-weight: 750;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* G14 — Valores quebrando linha: forçar nowrap em células numéricas */
.erp-design-moderno .card-value,
.erp-design-moderno td .money,
.erp-design-moderno td .num,
.erp-design-moderno .text-primary.fw-bold,
.erp-design-moderno td > strong.text-primary {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Contas a pagar/receber — cards bg-warning / text-bg-warning ➜ neutros */
.erp-design-moderno .dashboard-card.bg-warning,
.erp-design-moderno .dashboard-card .text-bg-warning {
    background: var(--card, #fff) !important;
    color: var(--tx, #0f172a) !important;
    border: 1px solid var(--bd, #e2e8f0);
}

.erp-design-moderno .dashboard-card .card-value.text-warning {
    color: var(--alerta, #b45309) !important;
}

/* Tabelas: herdar bordas arredondadas e espaçamento do DS */
.erp-design-moderno .table {
    font-size: 13.5px;
}

.erp-design-moderno .table > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx3, #64748b);
    background: var(--muted, #f8fafc);
    border-bottom: 1px solid var(--bd, #e2e8f0);
    white-space: nowrap;
}

.erp-design-moderno .table > tbody > tr > td {
    vertical-align: middle;
    border-bottom-color: #eef2f6;
}

/* page-header genérico: herdar estilos do ds-ph */
.erp-design-moderno .page-header {
    background: transparent;
    border: none;
    padding: 0 0 16px;
    margin-bottom: 8px;
}

.erp-design-moderno .page-header h1 {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--tx, #0f172a);
}

/* Alert: bordas arredondadas */
.erp-design-moderno .alert {
    border-radius: var(--r, 12px);
}

/* Legacy dashboard-card: remover borda-esquerda azul e ícone amarelo */
.erp-design-moderno .dashboard-card {
    border-left: none;
}

.erp-design-moderno .dashboard-card:hover {
    border-left: none;
}

.erp-design-moderno .dashboard-card .card-title {
    text-transform: none;
    letter-spacing: normal;
    color: var(--tx2, #475569);
}

.erp-design-moderno .dashboard-card .card-value {
    color: var(--tx, #0f172a);
}

.erp-design-moderno .dashboard-card .card-icon {
    color: var(--azul, #036cca);
    opacity: 0.6;
}