/* ============================================================
 * produtos-foto.css — Request H
 * Estilo do bloco "FOTO DO PRODUTO" no modal de cadastro/edição,
 * miniatura na listagem e lightbox de visualização ampliada.
 *
 * Respeita tokens do CorePro:
 *   --cp-surface / --cp-surface-2 / --cp-border / --cp-text / --cp-text-muted
 * Fallbacks para modo light e dark cobrindo cor absoluta caso os tokens
 * não estejam definidos no contexto de execução.
 * ============================================================ */

/* ------- Tokens fallback ------- */
:root {
  --pf-surface:       var(--cp-surface, #ffffff);
  --pf-surface-2:     var(--cp-surface-2, #f5f7fa);
  --pf-border:        var(--cp-border, #e2e8f0);
  --pf-text:          var(--cp-text, #0f172a);
  --pf-text-muted:    var(--cp-text-muted, #64748b);
  --pf-orange:        #F97316;
  --pf-orange-hover:  #EA580C;
  --pf-orange-soft:   rgba(249, 115, 22, 0.10);
  --pf-shadow:        0 6px 20px rgba(15, 23, 42, 0.08);
}
html.dark {
  --pf-surface:       var(--cp-surface, #14243A);
  --pf-surface-2:     var(--cp-surface-2, #1A2A44);
  --pf-border:        var(--cp-border, #22314A);
  --pf-text:          var(--cp-text, #E6EDF6);
  --pf-text-muted:    var(--cp-text-muted, #9AA9BE);
  --pf-shadow:        0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ============================================================
 * BLOCO "FOTO DO PRODUTO" (dentro do modal)
 * ============================================================ */
.pf-block {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface-2);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
}

.pf-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.pf-header-icon {
  color: var(--pf-orange);
  font-size: 15px;
}
.pf-header-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--pf-orange);
  text-transform: uppercase;
}

.pf-help {
  font-size: 12px;
  color: var(--pf-text-muted);
  margin-bottom: 12px;
}

/* ---- Dropzone: área clicável + drag&drop ---- */
.pf-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed var(--pf-border);
  border-radius: 12px;
  background: var(--pf-surface);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.05s;
  outline: none;
}
.pf-dropzone:hover {
  border-color: var(--pf-orange);
  background: var(--pf-orange-soft);
}
.pf-dropzone:focus-visible {
  border-color: var(--pf-orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.25);
}
.pf-dropzone.pf-drag-over {
  border-color: var(--pf-orange);
  border-style: solid;
  background: var(--pf-orange-soft);
  transform: scale(1.005);
}
.pf-dropzone.pf-dropzone-has-image {
  border-style: solid;
  padding: 8px;
  min-height: 0;
}

/* Preview da imagem */
.pf-preview {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pf-preview img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Estado vazio: ícone + textos */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 20px;
  color: var(--pf-text-muted);
  text-align: center;
  pointer-events: none; /* clique passa para o dropzone */
}
.pf-empty-icon {
  font-size: 34px;
  color: var(--pf-orange);
  opacity: 0.85;
  margin-bottom: 6px;
}
.pf-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-text);
  margin-bottom: 2px;
}
.pf-empty-sub {
  font-size: 12px;
  color: var(--pf-text-muted);
}
.pf-empty-formats {
  font-size: 11px;
  color: var(--pf-text-muted);
  margin-top: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Estado processando */
.pf-block.pf-processing .pf-dropzone {
  opacity: 0.6;
  pointer-events: none;
}
.pf-block.pf-processing .pf-dropzone::after {
  content: "Processando…";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pf-surface);
  color: var(--pf-text);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: var(--pf-shadow);
}

/* ---- Ações (alterar / remover) ---- */
.pf-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pf-btn {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  color: var(--pf-text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-btn:hover {
  background: var(--pf-surface-2);
}
.pf-btn-alter {
  border-color: var(--pf-orange);
  color: var(--pf-orange);
}
.pf-btn-alter:hover {
  background: var(--pf-orange-soft);
}
.pf-btn-remove {
  color: #dc2626;
  border-color: #fecaca;
}
html.dark .pf-btn-remove {
  color: #f87171;
  border-color: #7f1d1d;
}
.pf-btn-remove:hover {
  background: rgba(220, 38, 38, 0.08);
}

/* ============================================================
 * COLUNA "FOTO" NA LISTAGEM DE PRODUTOS
 * ============================================================ */
.pf-col-foto-th {
  width: 60px;
  min-width: 60px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.pf-col-foto-td {
  width: 60px;
  min-width: 60px;
  padding: 4px 6px !important;
}
.pf-thumb-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pf-border);
  border-radius: 8px;
  background: var(--pf-surface);
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.pf-thumb-btn:hover {
  transform: scale(1.06);
  border-color: var(--pf-orange);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}
.pf-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-thumb-empty {
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px dashed var(--pf-border);
  background: var(--pf-surface-2);
  color: var(--pf-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  opacity: 0.7;
}

/* ============================================================
 * LIGHTBOX (visualização ampliada)
 * ============================================================ */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pfFadeIn 0.15s ease-out;
}
.pf-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.pf-lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pf-lightbox-caption {
  text-align: center;
  color: #fff;
}
.pf-lightbox-cod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pf-lightbox-desc {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 2px;
}
.pf-lightbox-content img {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background: #fff;
}
.pf-lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform 0.1s;
}
.pf-lightbox-close:hover { transform: scale(1.05); }
@keyframes pfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
 * FOTO DO PRODUTO NA CRONOMETRAGEM (integração com master-cronometragem.js)
 * Overrides da classe .cvr-produto-foto quando a imagem vem do image_url.
 * Já suportado por padrão pelo módulo antigo (usa <img>).
 * ============================================================ */

/* ============================================================
 * RESPONSIVIDADE
 * ============================================================ */
@media (max-width: 640px) {
  .pf-block { padding: 12px; }
  .pf-dropzone { min-height: 160px; }
  .pf-preview img { max-height: 240px; }
  .pf-empty { padding: 18px 14px; }
  .pf-empty-icon { font-size: 30px; }
  .pf-empty-title { font-size: 13px; }
  .pf-actions { flex-direction: column; }
  .pf-btn { width: 100%; justify-content: center; min-height: 44px; }
  .pf-col-foto-th, .pf-col-foto-td { width: 48px; min-width: 48px; }
  .pf-thumb-btn, .pf-thumb-empty { width: 36px; height: 36px; }
  .pf-lightbox { padding: 12px; }
  .pf-lightbox-close { top: -8px; right: -8px; width: 36px; height: 36px; }
}

@media (max-width: 380px) {
  .pf-dropzone { min-height: 140px; }
  .pf-empty-formats { display: none; } /* economiza espaço */
}

/* ============================================================
 * PRINT — ocultar bloco de upload em impressão
 * ============================================================ */
@media print {
  .pf-block, .pf-lightbox { display: none !important; }
}

/* ============================================================
 * Request H — Correções no modal genérico (openModal em app.js)
 *   Motivo: openModal usa classes Tailwind fixas (text-slate-800,
 *   border-slate-200, bg-slate-100) sem variantes dark:. Aplicamos
 *   overrides via CSS para (a) suportar dark mode e (b) evitar
 *   corte do rodapé em telas pequenas.
 * ============================================================ */

/* --- Estrutura: modal-body como flex column ---
   Só se aplica quando o form já foi reestruturado pelo JS
   (data-pf-restructured="1"), garantindo scroll interno nos campos
   E footer fixo no fim (sem sobreposição). */
.modal-body:has(form[data-pf-restructured="1"]) {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
.modal-body:has(form[data-pf-restructured="1"]) > .flex.items-center.justify-between {
  flex-shrink: 0;
  background: var(--cp-surface, #FFFFFF);
}

/* Form reestruturado: flex column, ocupa altura restante */
form[data-pf-restructured="1"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Wrapper de scroll dos campos criado via JS */
form[data-pf-restructured="1"] > .pf-form-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
  /* Preserva space-y-4 do Tailwind original */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
form[data-pf-restructured="1"] > .pf-form-scroll > * {
  margin-top: 0 !important; /* zera space-y-4 duplicado */
}

/* Footer fixo no fundo do form */
form[data-pf-restructured="1"] > .flex.justify-end {
  flex-shrink: 0;
  background: var(--cp-surface, #FFFFFF);
  padding: 12px 20px !important;
  margin: 0 !important;
  border-top: 1px solid var(--cp-border, #E2E8F0);
  border-bottom-left-radius: var(--cp-radius-lg, 14px);
  border-bottom-right-radius: var(--cp-radius-lg, 14px);
  box-shadow: 0 -4px 12px -6px rgba(11,22,40,.08);
  position: relative;
  z-index: 3;
}

/* --- Dark mode overrides para o modal genérico ---
   Como openModal usa classes fixas (text-slate-800, border-slate-200,
   bg-slate-100, hover:bg-slate-200, text-slate-700) sem variantes dark:,
   sobrescrevemos aqui usando os tokens de tema. */
[data-theme="dark"] .modal-body,
html.dark .modal-body {
  background: var(--cp-surface, #14243A);
  color: var(--cp-text, #F8FAFC);
  border-color: var(--cp-border, #263B55);
}
[data-theme="dark"] .modal-body > .flex.items-center.justify-between,
html.dark .modal-body > .flex.items-center.justify-between {
  background: var(--cp-surface, #14243A);
  border-bottom-color: var(--cp-border, #263B55) !important;
}
[data-theme="dark"] .modal-body > form > .flex.justify-end,
html.dark .modal-body > form > .flex.justify-end {
  background: var(--cp-surface, #14243A);
  border-top-color: var(--cp-border, #263B55) !important;
}
/* Título */
[data-theme="dark"] .modal-body h3.text-slate-800,
html.dark .modal-body h3.text-slate-800 {
  color: var(--cp-text, #F8FAFC) !important;
}
/* Botão "X" fechar */
[data-theme="dark"] .modal-body button#mc,
html.dark .modal-body button#mc {
  color: var(--cp-text-muted, #94A3B8) !important;
}
[data-theme="dark"] .modal-body button#mc:hover,
html.dark .modal-body button#mc:hover {
  color: var(--cp-text, #F8FAFC) !important;
  background: var(--cp-surface-2, #1B3150) !important;
}
/* Botão Cancelar (bg-slate-100, text-slate-700) */
[data-theme="dark"] .modal-body button#mcancel,
html.dark .modal-body button#mcancel {
  background: var(--cp-surface-2, #1B3150) !important;
  color: var(--cp-text, #F8FAFC) !important;
  border: 1px solid var(--cp-border, #263B55);
}
[data-theme="dark"] .modal-body button#mcancel:hover,
html.dark .modal-body button#mcancel:hover {
  background: var(--cp-surface-hover, #20385A) !important;
}
/* Inputs, selects, textarea dentro do form */
[data-theme="dark"] .modal-body input,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body textarea,
html.dark .modal-body input,
html.dark .modal-body select,
html.dark .modal-body textarea {
  background: var(--cp-surface-2, #1B3150);
  color: var(--cp-text, #F8FAFC);
  border-color: var(--cp-border, #263B55);
}
[data-theme="dark"] .modal-body input::placeholder,
[data-theme="dark"] .modal-body textarea::placeholder,
html.dark .modal-body input::placeholder,
html.dark .modal-body textarea::placeholder {
  color: var(--cp-text-muted, #94A3B8);
  opacity: .7;
}
/* Labels dentro do modal */
[data-theme="dark"] .modal-body label,
html.dark .modal-body label {
  color: var(--cp-text, #F8FAFC);
}
[data-theme="dark"] .modal-body .text-slate-500,
[data-theme="dark"] .modal-body .text-slate-600,
[data-theme="dark"] .modal-body .text-slate-700,
html.dark .modal-body .text-slate-500,
html.dark .modal-body .text-slate-600,
html.dark .modal-body .text-slate-700 {
  color: var(--cp-text-muted, #94A3B8) !important;
}

/* --- Mobile: garantir que footer não seja cortado --- */
@media (max-width: 640px) {
  .modal-body {
    max-height: calc(100vh - 24px) !important;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .modal-backdrop {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  /* Header em mobile: menos padding lateral */
  .modal-body > .flex.items-center.justify-between {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Wrapper de scroll: padding menor em mobile */
  form[data-pf-restructured="1"] > .pf-form-scroll {
    padding: 16px;
  }
  /* Footer em mobile: padding menor + botões com touch target */
  form[data-pf-restructured="1"] > .flex.justify-end {
    padding: 12px 16px !important;
    gap: 8px;
  }
  form[data-pf-restructured="1"] > .flex.justify-end button {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 380px) {
  form[data-pf-restructured="1"] > .flex.justify-end {
    flex-direction: column-reverse;
  }
  form[data-pf-restructured="1"] > .flex.justify-end button {
    width: 100%;
    justify-content: center;
  }
}