/* Estilos personalizados do CosturaPro */

/* ============================================================
   VARIÁVEIS DE TEMA (claro / escuro)
   ============================================================ */
:root {
    --cp-bg: #f8f9fa;
    --cp-card-bg: #ffffff;
    --cp-text: #212529;
    --cp-text-muted: #64748b;
    --cp-border: #dee2e6;
    --cp-label: #495057;
    --cp-toolbar-bg: #f8f9fa;
    --cp-row-border: #f1f1f1;
}

[data-theme="dark"] {
    --cp-bg: #0f172a;
    --cp-card-bg: #1e293b;
    --cp-text: #e2e8f0;
    --cp-text-muted: #94a3b8;
    --cp-border: #334155;
    --cp-label: #94a3b8;
    --cp-toolbar-bg: #162032;
    --cp-row-border: #2d3f55;
}

body {
    background-color: var(--cp-bg);
}

/* Botão de tema na topbar */
.btn-tema {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.btn-tema:hover {
    background: rgba(255,255,255,0.28);
}

/* Barra de ações em lote */
[data-theme="dark"] .acao-lote-bar {
    background: var(--cp-toolbar-bg);
    border-color: var(--cp-border);
    color: var(--cp-text);
}
[data-theme="dark"] .acao-lote-bar .sel-count {
    color: var(--cp-text-muted);
}

.navbar-brand {
    font-size: 1.3rem;
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
}

.card-header {
    font-weight: 600;
}

.table th {
    font-size: 0.9rem;
}

.btn {
    font-weight: 500;
}

/* Status */
.status-ativo {
    color: #198754;
    font-weight: bold;
}

.status-inativo {
    color: #dc3545;
}

/* Formulários */
.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

/* ==========================================================================
   RESPONSIVO - TELAS INTERNAS (Romaneios, Terceiros, Produtos, etc.)
   Padrão reutilizável: tabelas Bootstrap (.table-responsive table) virando
   "cards" em telas pequenas, sem precisar alterar o JS que popula as linhas.
   ========================================================================== */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    h3, h4, h5 {
        font-size: 1.1rem;
    }

    /* Cabeçalhos de tela (título + botões de ação) em coluna, ocupando a largura */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 8px;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 h3,
    .d-flex.justify-content-between.align-items-center.mb-3 h4 {
        width: 100%;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 > button,
    .d-flex.justify-content-between.align-items-center.mb-3 > div {
        flex: 1 1 auto;
    }

    /* Formulários Bootstrap: força colunas a ocupar 100% da largura no mobile */
    .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    /* Barra de ações em lote (ex: Selecionar Todos / Marcar como Pago) */
    .acao-lote-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .acao-lote-bar label {
        flex: 1 1 100%;
    }
    .btn-pago {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    /* Botões de cabeçalho de card (ex: + Adicionar Item) não devem espremer o título */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- TABELA -> CARDS ---- */
    /* Aplica-se a qualquer .table dentro de .table-responsive nas telas internas */
    .table-responsive table.table-cards-mobile {
        border: none;
    }

    .table-cards-mobile thead {
        display: none; /* cabeçalho original escondido; o rótulo vira ::before em cada célula */
    }

    .table-cards-mobile tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--cp-border);
        border-radius: 8px;
        padding: 10px 12px;
        background: var(--cp-card-bg);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .table-cards-mobile tbody tr.table-dark,
    .table-cards-mobile tfoot tr {
        background: #212529;
        color: #fff;
        border-radius: 8px;
    }

    .table-cards-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        border: none;
        border-bottom: 1px solid var(--cp-row-border);
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    .table-cards-mobile td:last-child {
        border-bottom: none;
    }

    /* Rótulo da coluna, injetado via data-label="..." no <td> (ou atributo definido no HTML) */
    .table-cards-mobile td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cp-label);
        text-align: left;
        margin-right: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Quando a célula contém select/input, eles ocupam o espaço restante do card */
    .table-cards-mobile td select,
    .table-cards-mobile td input {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 60%;
    }

    /* Célula sem data-label (ex: checkbox de seleção, coluna de ações) fica centralizada */
    .table-cards-mobile td:not([data-label]) {
        justify-content: flex-end;
        border-bottom: none;
        padding: 0 0 8px 0;
    }

    /* Linha "vazia" / "carregando" (colspan) não deve virar card quebrado */
    .table-cards-mobile td[colspan] {
        display: block;
        text-align: center;
    }
    .table-cards-mobile td[colspan]::before {
        content: none;
    }
}

/* Cabeçalhos de ordenação — funciona em mobile (evita delay de toque) */
[class*="th-sort"] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
[class*="th-sort"]:hover { opacity: 0.8; }
[class*="th-sort"] span { font-size: 10px; margin-left: 3px; }