/* ==========================================================
   PDV (Registrar Atendimento) - Compacto / alinhado ao layout
   - Tipografia: system-ui
   - Base 12px / line-height 1.5
   - Tudo isolado em .pdv-shell
   ========================================================== */

/* =========================
   Tokens / Base
   ========================= */
.pdv-shell {
    /* Tipografia */
    --pdv-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --pdv-lh: 1.5;
    /* Tamanhos (compacto) */
    --pdv-fs-base: 12px;
    --pdv-fs-label: 12px;
    --pdv-fs-input: 12px;
    --pdv-fs-title: 18px;
    --pdv-fs-cardtitle: 12px;
    --pdv-fs-prod-name: 12px;
    --pdv-fs-prod-price: 11px;
    --pdv-fs-item-title: 12px;
    --pdv-fs-item-sub: 12px;
    --pdv-fs-total: 22px;
    --pdv-fs-btn: 12px;
    /* Cores / UI */
    --pdv-bg: #f5f5f5;
    --pdv-card: #ffffff;
    --pdv-border: rgba(0,0,0,0.12);
    --pdv-border-soft: rgba(0,0,0,0.08);
    --pdv-text: #1f2937;
    --pdv-muted: #6b7280;
    --pdv-danger: #c00000;
    --pdv-success: #1f8f5f;
    /* Layout */
    --pdv-radius: 14px;
    --pdv-gap: 14px;
    --pdv-shadow: 0 1px 8px rgba(0,0,0,0.06);
    font-family: var(--pdv-font);
    font-size: var(--pdv-fs-base);
    line-height: var(--pdv-lh);
    color: var(--pdv-text);
    max-width: 1280px;
    margin: 0 auto;
}

/* =========================
   Página / Estrutura
   ========================= */
.pdv-page {
    display: flex;
    flex-direction: column;
    gap: var(--pdv-gap);
    padding: 16px;
    background: var(--pdv-bg);
}

/* Topo */
.pdv-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pdv-title-page {
    margin: 0;
    font-size: var(--pdv-fs-title);
    font-weight: 700;
    letter-spacing: .2px;
}

/* Cabeçalho com campos */
.pdv-header {
    background: var(--pdv-card);
    border: 1px solid var(--pdv-border);
    border-radius: var(--pdv-radius);
    box-shadow: var(--pdv-shadow);
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
    align-items: end;
}

.pdv-field label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--pdv-fs-label);
    font-weight: 700;
    color: rgba(0,0,0,0.65);
}

/* Inputs (compactos) */
.pdv-field .form-control,
.pdv-field .form-select,
.pdv-search .form-control {
    font-size: var(--pdv-fs-input);
    line-height: 1.2;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.pdv-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Corpo */
.pdv-body {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--pdv-gap);
    align-items: start;
}

/* Card base */
.pdv-card {
    background: var(--pdv-card);
    border: 1px solid var(--pdv-border);
    border-radius: var(--pdv-radius);
    box-shadow: var(--pdv-shadow);
    overflow: hidden;
}

.pdv-card-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pdv-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--pdv-fs-cardtitle);
    font-weight: 700;
}

/* Carrinho “grudado” */
.pdv-right {
    position: sticky;
    top: 16px;
}

/* =========================
   Produtos
   ========================= */
.pdv-products {
    padding: 12px;
}

.pdv-search {
    margin-bottom: 12px;
}

/* Agrupamento por categoria */
.pdv-products-grouped {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Barra da categoria (com toggle) */
.pdv-category-bar {
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(200,200,200,0.35);
    background: #fafafa;
}

.pdv-category-title {
    font-size: 11px;
    font-weight: 700;
    opacity: .85;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.75);
}

/* Toggle */
.pdv-category-bar.clickable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .pdv-category-bar.clickable:hover {
        background: rgba(0,0,0,.03);
    }

.pdv-arrow {
    font-size: 11px;
    opacity: .75;
}

/* Grid de produtos (compacto) */
.pdv-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

/* Card do produto (menor) */
.pdv-product-btn {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: transform .06s ease, filter .12s ease, border-color .12s ease;
    min-height: 56px;
}

    .pdv-product-btn:hover {
        filter: brightness(0.985);
        border-color: rgba(180,0,0,0.35);
    }

    .pdv-product-btn:active {
        transform: scale(0.99);
    }

/* Texto produto */
.pdv-product-name {
    font-size: var(--pdv-fs-prod-name);
    font-weight: 600;
    line-height: 1.1;
}

/* Preço menor e sem negrito */
.pdv-product-price {
    margin-top: 2px;
    font-size: var(--pdv-fs-prod-price);
    font-weight: 400;
    color: rgba(0,0,0,0.60);
}

/* =========================
   Carrinho / Itens
   ========================= */
.pdv-cart-items {
    padding: 10px 12px;
    max-height: calc(100vh - 280px);
    overflow: auto;
}

.pdv-empty {
    color: rgba(0,0,0,0.55);
    font-size: 11px;
    padding: 8px 0;
}

.pdv-item {
    display: grid;
    grid-template-columns: 1fr 120px 90px 34px;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pdv-border-soft);
    align-items: center;
}

    .pdv-item:last-child {
        border-bottom: none;
    }

.pdv-item-title {
    font-size: var(--pdv-fs-item-title);
    font-weight: 800;
}

.pdv-item-sub {
    font-size: var(--pdv-fs-item-sub);
    color: var(--pdv-muted);
}

.pdv-item-total {
    text-align: right;
    font-weight: 800;
}

/* Quantidade */
.pdv-qty {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

    .pdv-qty button {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.18);
        background: #fff;
        font-weight: 700;
        font-size: 12px;
    }

    .pdv-qty span {
        min-width: 26px;
        text-align: center;
        font-weight: 700;
    }

/* Remover */
.pdv-remove {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
    color: var(--pdv-danger);
    font-weight: 700;
    cursor: pointer;
}

    .pdv-remove:hover {
        filter: brightness(0.985);
        border-color: rgba(192,0,0,.35);
    }

/* Total + botão */
.pdv-total-box {
    padding: 12px;
    border-top: 1px solid var(--pdv-border-soft);
    background: #fff;
    position: sticky;
    bottom: 0;
}

.pdv-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.pdv-total-label {
    font-weight: 700;
    color: rgba(0,0,0,0.75);
}

.pdv-total-value {
    font-size: var(--pdv-fs-total);
    font-weight: 800;
}

.pdv-finish {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: var(--pdv-success);
    color: #fff;
    font-weight: 800;
    font-size: var(--pdv-fs-btn);
    cursor: pointer;
}

    .pdv-finish:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.pdv-error {
    margin-top: 10px;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 992px) {
    .pdv-header {
        grid-template-columns: 1fr;
    }

    .pdv-body {
        grid-template-columns: 1fr;
    }

    .pdv-right {
        position: static;
    }

    .pdv-cart-items {
        max-height: none;
    }

    .pdv-total-box {
        position: static;
    }
}

@media (max-width: 520px) {
    .pdv-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

    .pdv-item {
        grid-template-columns: 1fr 110px;
        grid-template-rows: auto auto;
    }

    .pdv-item-total {
        text-align: left;
    }

    .pdv-remove {
        justify-self: end;
    }
}

/* Garante que o conteúdo do card fique “por cima” do header (evita clique roubado) */
.pdv-card {
    position: relative;
}

.pdv-card-header {
    position: relative;
    z-index: 1;
}


/* Alguns headers/overlays (ou pseudo-elements) ficam por cima do conteúdo e roubam o clique */
.pdv-card::before,
.pdv-card::after {
    pointer-events: none !important;
    z-index: 0 !important;
}

.pdv-card {
    position: relative;
}

.pdv-card-header {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.pdv-card > .p-3 {
    position: relative;
    z-index: 2;
}

/* Reforça que a área dos botões sempre recebe clique */
.pdv-actions-row,
.pdv-actions-row * {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;
}

/* Tudo dentro do card fica acima */
.pdv-card > * {
    position: relative;
    z-index: 1;
}


/* Botões e inputs sempre clicáveis */
.pdv-card button,
.pdv-card input,
.pdv-card a {
    pointer-events: auto !important;
}