/* ============================================================
   galeria-painel.css — Refinamento visual do Painel "Nova Peça"
   APENAS CSS aditivo — sem alteração de HTML ou lógica JS
   ============================================================ */

/* ----------------------------------------------------------
   1. Variáveis de design do painel esquerdo
   ---------------------------------------------------------- */
:root {
    --gp-blue-dark : #0c1b33;
    --gp-blue-mid  : #1e3a5f;
    --gp-blue-accent: #2563eb;
    --gp-green     : #059669;
    --gp-border    : #e0e7ef;
    --gp-bg        : #f8fafc;
    --gp-text      : #1e293b;
    --gp-muted     : #64748b;
    --gp-label     : #475569;
    --gp-radius    : 12px;
    --gp-radius-sm : 8px;
}

/* ----------------------------------------------------------
   2. Corrigir labels vermelhos em todo o painel esquerdo
   ---------------------------------------------------------- */
.col-lg-5 label,
.col-lg-5 .form-label,
#formUpload label,
#formUpload .form-label {
    color: var(--gp-label) !important;
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

/* ----------------------------------------------------------
   3. Card principal — cabeçalho dark + corpo limpo
   ---------------------------------------------------------- */
.col-lg-5 > .card {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 28px rgba(12, 27, 51, 0.13) !important;
    overflow: hidden;
}

.col-lg-5 > .card > .card-body {
    padding: 0 !important;
}

/* Cabeçalho gradiente escuro */
.col-lg-5 > .card > .card-body > .d-flex:first-child {
    background: linear-gradient(135deg, var(--gp-blue-dark) 0%, var(--gp-blue-mid) 100%);
    padding: 1rem 1.35rem !important;
    margin-bottom: 0 !important;
    border-bottom: none;
}

.col-lg-5 > .card > .card-body > .d-flex:first-child .section-title {
    color: #ffffff !important;
    font-size: 1rem;
}

.col-lg-5 > .card > .card-body > .d-flex:first-child .section-title i {
    color: #93c5fd !important;
}

/* Body do formulário com padding */
.col-lg-5 > .card > .card-body > form#formUpload {
    padding: 1.15rem 1.35rem;
}

/* Status e outros divs abaixo do form */
.col-lg-5 > .card > .card-body > #statusUpload,
.col-lg-5 > .card > .card-body > #statusVideoTop {
    padding: 0 1.35rem 0.75rem;
}

/* ----------------------------------------------------------
   4. Busca Inteligente — compacta e limpa
   ---------------------------------------------------------- */
#formUpload .card.border.bg-light {
    border: 1.5px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    background: var(--gp-bg) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    margin-bottom: 0.85rem !important;
}

#formUpload .card.border.bg-light .card-body {
    padding: 0.7rem 0.85rem !important;
}

#formUpload .card.border.bg-light .card-title {
    font-size: 0.78rem !important;
    font-weight: 700;
    color: var(--gp-blue-accent) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0 !important;
}

/* Oculta botões de debug por padrão (são mostrados via JS quando há conteúdo) */
#debugToolbarInteligente {
    opacity: 0.65;
}

/* ----------------------------------------------------------
   5. Separadores entre seções — desktop
   ---------------------------------------------------------- */
@media (min-width: 993px) {
    #formUpload .collapse-section {
        border-top: 1px solid #edf1f7;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    #formUpload .collapse-section:first-of-type {
        border-top: none;
        padding-top: 0 !important;
    }

    #formUpload .collapse-section:last-of-type {
        padding-bottom: 0 !important;
    }
}

/* ----------------------------------------------------------
   6. Inputs de texto — visual consistente
   ---------------------------------------------------------- */
#formUpload .form-control,
#formUpload .form-select {
    border: 1.5px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    color: var(--gp-text) !important;
    background: #fff !important;
    font-weight: 500;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#formUpload .form-control:focus,
#formUpload .form-select:focus {
    border-color: var(--gp-blue-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    background: #fff !important;
}

/* Nome do álbum — destaque especial */
#nomeAlbum {
    font-weight: 700 !important;
    font-size: 0.97rem !important;
    border-left: 3px solid var(--gp-blue-accent) !important;
    padding-left: 0.85rem !important;
}

/* ----------------------------------------------------------
   6b. Bloco Valor / Condição / Detalhe — 2 linhas limpas
       Linha 1: [Valor da Peça 50%] [Detalhe na Peça 50%]
       Linha 2: [Condição 100% — USADO | NOVO | RECONDICIONADO]
   ---------------------------------------------------------- */

/* Linha 1 — Valor (esquerda) + Detalhe (direita) */
.row.g-2.align-items-start:has(#precoVenda) {
    flex-wrap: wrap !important;
}

.row.g-2.align-items-start:has(#precoVenda) > .col-md-4:has(#precoVenda) {
    flex: 0 0 auto !important;
    width: 50% !important;
    order: 1;
}

.row.g-2.align-items-start:has(#precoVenda) > .col-md-4:has(#detalhePecaSim) {
    flex: 0 0 auto !important;
    width: 50% !important;
    order: 2;
}

/* Linha 2 — Condição ocupa 100% e vem depois */
.row.g-2.align-items-start:has(#precoVenda) > .col-md-4:has(#condicaoAlbumUsado) {
    flex: 0 0 auto !important;
    width: 100% !important;
    order: 3;
}

/* Container Condição — pills em linha horizontal, sem quebra
   O JS adiciona .condicao-album-card via closest('.d-flex.flex-wrap'),
   por isso mantemos flex-wrap no HTML e sobrescrevemos aqui */
.condicao-album-card {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.65rem !important;
    align-items: center !important;
}

/* Container Detalhe — pills centralizados */
.col-md-4:has(#detalhePecaSim) > .d-flex {
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    padding: 0.45rem 0.75rem !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Pills de Condição — compactos, sem quebra */
.condicao-album-card .form-check-label,
.col-md-4:has(#condicaoAlbumUsado) .form-check-label {
    font-size: 0.78rem !important;
    padding: 0.25rem 0.65rem !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px;
}

/* Labels Sim/Não */
.col-md-4:has(#detalhePecaSim) .form-check-label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Sub-títulos "Condição" / "Detalhe na Peça" */
.col-md-4:has(#condicaoAlbumUsado) > .small,
.col-md-4:has(#detalhePecaSim) > .small {
    font-size: 0.68rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gp-muted) !important;
    margin-bottom: 0.3rem !important;
}

/* ----------------------------------------------------------
   7. Dimensões — inputs centrados com visual numérico
   ---------------------------------------------------------- */
#dimAltura, #dimComprimento, #dimLargura, #dimPeso {
    font-weight: 700 !important;
    text-align: center !important;
    background: var(--gp-bg) !important;
    font-size: 1rem !important;
    color: var(--gp-blue-dark) !important;
}

#dimAltura:focus, #dimComprimento:focus, #dimLargura:focus, #dimPeso:focus {
    background: #fff !important;
}

/* Labels de mínimo abaixo dos inputs */
#formUpload .row.g-2 > div > small.text-muted {
    display: block;
    text-align: center;
    font-size: 0.68rem !important;
    font-weight: 600;
    color: #94a3b8 !important;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Botões de dimensão — compactos */
#btnGerarDimensoes,
#btnLimparDimensoes,
#btnAbrirAprendizado {
    border-radius: var(--gp-radius-sm) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 0.32rem 0.7rem !important;
    letter-spacing: 0.2px;
}

/* ----------------------------------------------------------
   8. Localização — select estilizado
   ---------------------------------------------------------- */
#selectLocalizacaoGaleria {
    border: 1.5px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    background: var(--gp-bg) !important;
    color: var(--gp-text) !important;
    font-weight: 500;
}

#selectLocalizacaoGaleria:focus {
    border-color: var(--gp-blue-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* ----------------------------------------------------------
   9. Condição e Detalhe — pills mais clean
   ---------------------------------------------------------- */
#formUpload .d-flex.flex-wrap.gap-2.align-items-center.border.rounded.px-3.py-2,
#formUpload .d-flex.flex-wrap.gap-3.align-items-center.border.rounded.px-3.py-2 {
    border: 1.5px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    background: var(--gp-bg) !important;
    padding: 0.45rem 0.75rem !important;
}

/* ----------------------------------------------------------
   10. Botões de ação principal — proeminentes
   ---------------------------------------------------------- */
#btnEnviar {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: var(--gp-radius) !important;
    font-weight: 700 !important;
    font-size: 0.93rem !important;
    padding: 0.72rem 1rem !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28) !important;
    letter-spacing: 0.3px;
    transition: box-shadow 0.2s ease, transform 0.12s ease !important;
}

#btnEnviar:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38) !important;
    transform: translateY(-1px);
}

#btnEnviar:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

#btnGerarPdfEtiqueta {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: none !important;
    border-radius: var(--gp-radius) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 0.72rem 1rem !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.22) !important;
    transition: box-shadow 0.2s ease, transform 0.12s ease !important;
}

#btnGerarPdfEtiqueta:hover {
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.32) !important;
    transform: translateY(-1px);
}

#btnUploadVideoTop {
    border-radius: var(--gp-radius) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border: 1.5px dashed #fca5a5 !important;
    color: #dc2626 !important;
    background: #fff8f8 !important;
    padding: 0.55rem 1rem !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
}

#btnUploadVideoTop:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}

/* ----------------------------------------------------------
   11. Code badge — sem alteração, só garante contraste
   ---------------------------------------------------------- */
.col-lg-5 .code-badge {
    font-size: 0.88rem;
}

/* ----------------------------------------------------------
   12. Mobile — seções colapsáveis mais refinadas
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .col-lg-5 > .card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .col-lg-5 > .card > .card-body > .d-flex:first-child {
        border-radius: 0 !important;
        padding: 0.85rem 1rem !important;
    }

    .col-lg-5 > .card > .card-body > form#formUpload {
        padding: 0.75rem 0 !important;
    }

    /* Seções colapsáveis com accent bar azul */
    .collapse-header {
        border-left: 3px solid transparent;
        transition: border-color 0.2s;
    }

    .collapse-header:not([data-collapsed]) {
        border-left-color: var(--gp-blue-accent);
    }

    .collapse-header h6 {
        color: var(--gp-blue-dark) !important;
        font-size: 0.9rem !important;
    }

    /* Inputs mobile — tamanho legível sem zoom iOS */
    #formUpload .form-control,
    #formUpload .form-select {
        font-size: 16px !important;
    }

    /* Botão enviar ocupa 100% no mobile */
    #btnEnviar {
        font-size: 1rem !important;
        padding: 0.85rem 1rem !important;
    }
}

/* ----------------------------------------------------------
   13. Input-group (título ML) — bordas arredondadas
   ---------------------------------------------------------- */
#formUpload .input-group > .form-control:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#formUpload .input-group > .btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--gp-radius) !important;
    border-bottom-right-radius: var(--gp-radius) !important;
}

#formUpload .input-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

#formUpload .input-group {
    border-radius: var(--gp-radius) !important;
    overflow: hidden;
}

/* ----------------------------------------------------------
   14. File inputs — botão verde mais refinado
   ---------------------------------------------------------- */
#formUpload input[type="file"].form-control {
    padding: 0 !important;
    background: var(--gp-bg) !important;
    border: 1.5px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    overflow: hidden;
}

#formUpload input[type="file"].form-control::file-selector-button {
    border-radius: 0 !important;
    padding: 0.55rem 1rem !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border: none !important;
    border-right: 1px solid #166534 !important;
    margin-right: 0.75rem !important;
    font-weight: 600;
    font-size: 0.83rem;
    transition: background 0.18s;
}

#formUpload input[type="file"].form-control::file-selector-button:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

/* ----------------------------------------------------------
   15. Status do upload — estilizado
   ---------------------------------------------------------- */
#statusUpload {
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--gp-radius-sm);
}