/**
 * CalculaFin - Estilos do Gerador de Orçamentos
 * Versão: 3.0.1
 */

/* ─── Variáveis ─────────────────────────────────────────────── */
:root {
    --cf-primary:      #0073aa;
    --cf-primary-dark: #005177;
    --cf-secondary:    #f4f4f4;
    --cf-success:      #25D366;
    --cf-danger:       #d9534f;
    --cf-text:         #333;
    --cf-border:       #dee2e6;
    --cf-bg:           #f8f9fa;
    --cf-white:        #ffffff;
    --cf-shadow:       0 4px 6px rgba(0,0,0,0.1);
}

/* ─── Container principal ───────────────────────────────────── */
.cf-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    color: var(--cf-text);
    background: var(--cf-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--cf-shadow);
    /* Removido overflow-x: hidden para permitir que o sticky funcione */
    overflow: visible;
}

/* ─── Cabeçalho ─────────────────────────────────────────────── */
.cf-header {
    text-align: center;
    margin-bottom: 40px;
}
.cf-header h1 {
    color: var(--cf-primary);
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.cf-header p {
    color: #666;
    font-size: 1.1rem;
}

/* ─── Grid principal (editor + preview) ─────────────────────── */
.cf-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
}

/* ─── Seções do formulário ──────────────────────────────────── */
.cf-section {
    background: var(--cf-white);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.cf-section h2 {
    font-size: 1.3rem;
    color: var(--cf-primary);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cf-secondary);
}

/* ─── Campos de formulário ──────────────────────────────────── */
.cf-form-group {
    margin-bottom: 20px;
}
.cf-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
}
.cf-form-group input,
.cf-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.cf-form-group input:focus,
.cf-form-group textarea:focus {
    border-color: var(--cf-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.1);
}
.cf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ─── Tabela de itens ───────────────────────────────────────── */
.cf-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

:is(#cf-items-table,[data-batch-field="cf-items-table"]) {
    width: 100%;
    border-collapse: collapse;
}

/* Cabeçalho — sempre visível, sem hover trick */
:is(#cf-items-table,[data-batch-field="cf-items-table"]) thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--cf-bg);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    white-space: nowrap;
    border-bottom: 2px solid var(--cf-border);
}

:is(#cf-items-table,[data-batch-field="cf-items-table"]) td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cf-border);
    vertical-align: middle;
}

/* Larguras das colunas — ajustadas para nova coluna Preço Unit. */
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-desc    { width: 40%; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-qty     { width: 10%; text-align: center; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-price   { width: 20%; text-align: right; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-total   { width: 20%; text-align: right; font-weight: 600; color: var(--cf-primary); }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-actions { width: 10%; text-align: center; }

:is(#cf-items-table,[data-batch-field="cf-items-table"]) thead th.col-qty     { text-align: center; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) thead th.col-price   { text-align: right; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) thead th.col-total   { text-align: right; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) thead th.col-actions { text-align: center; }

/* Inputs dentro da tabela */
:is(#cf-items-table,[data-batch-field="cf-items-table"]) input {
    padding: 8px 6px;
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    border-radius: 4px;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
:is(#cf-items-table,[data-batch-field="cf-items-table"]) .col-desc input {
    padding-left: 4px;
}
:is(#cf-items-table,[data-batch-field="cf-items-table"]) input:hover,
:is(#cf-items-table,[data-batch-field="cf-items-table"]) input:focus {
    background: var(--cf-white);
    border-color: var(--cf-border);
    outline: none;
}

:is(#cf-items-table,[data-batch-field="cf-items-table"]) input.item-qty   { text-align: center; }
:is(#cf-items-table,[data-batch-field="cf-items-table"]) input.item-price { text-align: right; }

/* ─── Linha de item — botão de remover ───────────────────────── */
.remove-item {
    background: transparent;
    color: #999;
    border: 1px solid #ddd;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
}
.remove-item:hover {
    background: var(--cf-danger);
    color: white;
    border-color: var(--cf-danger);
    transform: scale(1.1);
}
.remove-item:active {
    transform: scale(0.95);
}

/* ─── Resumo de totais ──────────────────────────────────────── */
.cf-summary {
    background: var(--cf-bg);
    padding: 20px;
    border-radius: 8px;
}
.cf-summary p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 1rem;
}
.cf-total {
    border-top: 2px solid var(--cf-primary);
    padding-top: 15px;
    margin-top: 15px !important;
    font-size: 1.4rem !important;
    font-weight: 800;
    color: var(--cf-primary);
}

/* ─── Botões de ação ────────────────────────────────────────── */
.cf-btn-primary {
    background: var(--cf-primary);
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    width: 100%;
    margin-bottom: 15px;
}
.cf-btn-primary:hover  { background: var(--cf-primary-dark); }
.cf-btn-primary:active { transform: scale(0.98); }

.cf-btn-secondary {
    background: var(--cf-white);
    border: 1px solid var(--cf-primary);
    color: var(--cf-primary);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.cf-btn-secondary:hover {
    background: var(--cf-primary);
    color: white;
}

.cf-btn-whatsapp {
    background: var(--cf-success);
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cf-btn-whatsapp:hover { background: #1eb954; }

/* ─── Assinatura ────────────────────────────────────────────── */
.cf-input-type-sig {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.signature-font {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #002244;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
    display: inline-block;
    min-width: 200px;
    min-height: 50px;
    background: white;
    border-radius: 4px;
}

/* ─── Upload de logo ────────────────────────────────────────── */
:is(#cf-logo-upload,[data-batch-field="cf-logo-upload"]) { font-size: 0.9rem; }
:is(#cf-logo-upload,[data-batch-field="cf-logo-upload"])::-webkit-file-upload-button {
    background: var(--cf-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

/* ─── Preview (coluna direita) ──────────────────────────────── */
.cf-preview-container {
    position: sticky;
    top: 30px; /* Ajustado para dar um pequeno respiro do topo */
    height: fit-content;
    align-self: start; /* Garante que o container não estique verticalmente */
    z-index: 10;
}
.cf-pdf-page {
    background: white;
    width: 100%;
    min-height: 600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: visible;
    transform: scale(0.9);
    transform-origin: top center;
}

/* ─── RESPONSIVIDADE ────────────────────────────────────────── */

/* Tablet (≤ 1024px): preview vai para baixo */
@media (max-width: 1024px) {
    .cf-grid {
        grid-template-columns: 1fr;
    }
    .cf-preview-container {
        position: static;
    }
    .cf-pdf-page {
        transform: scale(1);
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .cf-container {
        padding: 15px;
        margin: 0;
        border-radius: 0;
        background: #fdfdfd;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .cf-header {
        margin-bottom: 24px;
    }
    .cf-header h1  { font-size: 1.5rem; }
    .cf-header p   { font-size: 0.9rem; }

    .cf-section    { 
        padding: 18px; 
        margin-bottom: 20px; 
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .cf-section h2 { 
        font-size: 1.1rem; 
        margin-bottom: 18px; 
        border-bottom-width: 1px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Campos lado a lado viram coluna única */
    .cf-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Totais em coluna única */
    .cf-form-row:has(#cf-desconto) {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cf-form-group {
        margin-bottom: 14px;
        width: 100%;
        box-sizing: border-box;
    }
    .cf-form-group label {
        font-size: 0.85rem;
        margin-bottom: 6px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .cf-form-group input,
    .cf-form-group textarea {
        padding: 10px;
        font-size: 16px; /* Evita zoom automático no iOS */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Tabela de itens no mobile:
       Transforma cada linha em um "card" */
    :is(#cf-items-table,[data-batch-field="cf-items-table"]),
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) thead,
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) tbody,
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) tr,
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Células da tabela (td) dentro da linha (tr) não devem ser display:block 
       para respeitarem o grid da linha pai */
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td {
        display: inline-block; /* fallback */
        width: auto;
        box-sizing: border-box;
        padding: 0;
        border: none;
    }

    :is(#cf-items-table,[data-batch-field="cf-items-table"]) thead { display: none; }

    .cf-item-row {
        background: var(--cf-white);
        border: 1px solid var(--cf-border);
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 15px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* Botão de remover no topo direito do card - Posicionado à direita para não sobrepor o texto */
    .remove-item {
        position: absolute;
        right: 12px;
        top: 12px;
        background: #ff4d4d;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 18px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
    }

    .cf-item-row td.col-desc {
        padding: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 15px;
        /* Padding removido da esquerda para alinhar o texto "DESCRIÇÃO" */
    }

    /* Labels elegantes para mobile */
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td::before {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 5px;
        letter-spacing: 0.05em;
    }
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td.col-desc::before    { content: "Descrição"; }
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td.col-qty::before     { content: "Qtd"; }
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td.col-price::before   { content: "Preço Unit."; }
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td.col-total::before   { content: "Total"; }
    :is(#cf-items-table,[data-batch-field="cf-items-table"]) td.col-actions::before { content: "Ações"; }

    /* Grid para os campos: Descrição em cima, Qtd/Preço/Total/Ações embaixo */
    .cf-item-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        align-items: end;
    }
    .cf-item-row td {
        display: block !important;
        width: 100% !important;
    }
    .cf-item-row td.col-desc {
        grid-column: 1 / span 2 !important;
        margin-bottom: 8px;
    }
    .cf-item-row td.col-qty     { grid-column: 1 / span 1 !important; }
    .cf-item-row td.col-price   { grid-column: 2 / span 1 !important; text-align: right; }
    .cf-item-row td.col-total   { grid-column: 1 / span 2 !important; text-align: right; }
    .cf-item-row td.col-actions {
        grid-column: 1 / span 2 !important;
        display: flex !important;
        justify-content: flex-end;
        margin-top: 10px;
    }
}


/* ==========================================================================
   Design de Linha Única / Cards para os Itens do Preview (Anti-Estouro)
   ========================================================================== */

/* Remove a aparência de tabela antiga do preview se estiver usando divs */
.cf-preview-container .item-card-row {
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    background: #fdfdfd;
    border: 1px solid #eaedf1;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}

/* Linha Superior: Descrição em destaque ocupando toda a largura */
.cf-preview-item-desc {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 8px;
    word-break: break-all; /* Se o nome for gigante, ele quebra de linha correto */
}

/* Linha Inferior: Agrupa Qtd, Preço e Total lado a lado com respiro */
.cf-preview-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    gap: 15px; /* Garante um espaço mínimo de segurança entre os valores do card */
}

/* Estilo individual para cada dado dentro da linha única */
.cf-preview-meta-field {
    display: flex;
    flex-direction: column; /* Rótulo em cima, valor embaixo */
}

.cf-preview-meta-field .label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cf-preview-meta-field .value {
    font-weight: 500;
    color: #334155;
}

/* Destaca o TOTAL do item */
.cf-preview-meta-field.total-field .value {
    font-weight: 700;
    color: #0284c7; /* Cor azul de destaque */
    word-break: break-all; /* Proteção absoluta contra números astronômicos */
}