/* =============================================================================
   ADMIN.CSS — v7.0.5
   - NOVO: Adicionado estilo `.btn.warn` e `.btn-action.warn` para botões de
     exclusão, tornando-os vermelhos para indicar uma ação destrutiva.
   ============================================================================= */

/* 0) BASE & FIXES ---------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
body.admin-page { background: #f8f9fa; color: #212529; margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
:root {
  --tap: 44px;
  --gap-1: .5rem; --gap-2: .75rem; --gap-3: 1rem; --gap-4: 1.25rem; --gap-5: 2rem;
  --color-brand: #A32A55;
  --color-background: #f8f9fa;
  --color-surface: #ffffff;
  --color-border: #dee2e6;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-overlay: rgba(0,0,0,0.5);
  --border-radius: .5rem;
  --border-radius-sm: .25rem;
  --border-radius-lg: .75rem;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-heading: inherit;
}
@media (prefers-reduced-motion: reduce){
  * { animation: none!important; transition: none!important; }
}

/* 1) ELEMENTOS GERAIS ----------------------------------------------------------- */
.btn { display: inline-block; padding: .65rem 1.2rem; min-height: var(--tap); font-size: .95rem; font-weight: var(--font-weight-medium); border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; background-color: var(--color-brand); color: #fff; }
.btn.warn { background-color: #e63946; border-color: #e63946; } /* VERMELHO PARA DELETAR */
.btn.alt { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* 2) LAYOUT & ABAS --------------------------------------------------------------- */
.admin-page main.wrap.wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--gap-4) var(--gap-3); }
.admin-page .admin-toolbar{ display:flex; gap:var(--gap-2); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom: var(--gap-2); }
.admin-page h1.page-title{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin:0; }
.actions-row{ display:flex; gap:var(--gap-2); flex-wrap:wrap; margin-top:var(--gap-3); }

.section{ padding: var(--gap-4) 0; border-top:1px solid var(--color-border); }
.section:first-of-type{ border-top:none; padding-top:0; }
.section>h2{ font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin:0 0 var(--gap-2); }
.section>p{ color:var(--color-text-muted); margin:0 0 var(--gap-3); }

.card-admin{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--gap-4); box-shadow: var(--shadow-sm); }

.tabs{ display:flex; gap:.25rem; overflow:auto hidden; -webkit-overflow-scrolling:touch; border-bottom:2px solid var(--color-border); margin-bottom: var(--gap-4); scroll-snap-type:x mandatory; }
.tab-link{ scroll-snap-align:start; flex:0 0 auto; padding:.9rem 1.1rem; min-height: var(--tap); border:none; background:none; cursor:pointer; color:var(--color-text-muted); font-size:1rem; font-weight:var(--font-weight-medium); position:relative; }
.tab-link.active{ color:var(--color-brand); }
.tab-link.active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-2px; height:2px; background:var(--color-brand); }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* 3) DASHBOARD ------------------------------------------------------------------ */
.kpi-grid{ display:grid; gap:var(--gap-3); grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: var(--gap-5); }
@media(min-width:768px){ .kpi-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media(min-width:992px){ .kpi-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } } /* Ajustado para 4 colunas */
.kpi-card{ background:var(--color-surface); border:1px solid var(--color-border); border-left-width:6px; border-radius:var(--border-radius); padding: var(--gap-3); box-shadow: var(--shadow-sm); }
.kpi-top{ font-size:.9rem; color:var(--color-text-muted); margin-bottom:.4rem; }
.kpi-num{ font-family:var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.chart-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--border-radius-lg); padding: var(--gap-3); }
.chart-filters { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.chart-filter-btn { padding: .4rem .8rem; font-size: .85rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); border-radius: 999px; cursor: pointer; }
.chart-filter-btn.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

#chartMetrics{ display:block; width:100% !important; height:280px !important; }
@media (min-width:768px){ #chartMetrics{ height:320px !important; } }

.alert-section{ background: rgba(229,161,45,.10); border:1px solid rgba(229,161,45,.35); border-radius: var(--border-radius-lg); padding: var(--gap-4); }
.cold-leads-grid{ display:grid; gap: var(--gap-3); grid-template-columns: 1fr; }
@media(min-width:600px){ .cold-leads-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1000px){ .cold-leads-grid{ grid-template-columns: repeat(3,1fr); } }
.cold-lead-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--gap-3); }

/* 4) TABELA, FILTROS, KANBAN ---------------------------------------------------- */
.filter-toolbar{ display:grid; gap: var(--gap-2); margin-bottom: var(--gap-3); grid-template-columns: 1fr; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--color-background); padding: .25rem 0; }
.filter-toolbar input[type="search"], .filter-toolbar select{ min-height: var(--tap); padding:.7rem 1rem; border:1px solid var(--color-border); border-radius: var(--border-radius-sm); background:var(--color-surface); color:var(--color-text); }
@media(min-width:768px){ .filter-toolbar{ grid-template-columns: 1fr 220px; position:static; } }

.table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--border-radius); box-shadow:var(--shadow-sm); background:var(--color-surface); }
table{ width:100%; border-collapse:collapse; font-size:.95rem; }
thead th{ background:var(--color-background); text-align:left; padding:12px 14px; border-bottom:2px solid var(--color-border); white-space:nowrap; }
tbody td{ padding:10px 14px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
.img-cell{ width:50px; height:50px; object-fit:contain; background:#fff; border:1px solid var(--color-border); border-radius:8px; padding:4px; }

@media(max-width:768px){
  thead{ display:none; } table, tbody, tr, td{ display:block; width:100%; }
  tbody tr{ border:1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--gap-3); margin: 0 0 var(--gap-3); background: var(--color-surface); }
  tbody td{ border:none; padding:8px 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:right; }
  tbody td::before{ content: attr(data-label); font-weight:var(--font-weight-bold); color:var(--color-text); text-align:left; flex:1 1 50%; }
  .img-cell{ margin-left:auto; } .actions-cell{ gap:.5rem; flex-direction:row; justify-content:flex-end; width:100%; }
}

.kanban-grid{ display:grid; gap: var(--gap-3); grid-template-columns: 1fr; overflow:visible; }
@media(min-width:992px){ .kanban-grid{ grid-template-columns: repeat(5, minmax(220px,1fr)); } }
.kan-col{ background:var(--color-background); border:1px solid var(--color-border); border-radius: var(--border-radius); display:flex; flex-direction:column; }
.kan-title{ display:flex; justify-content:space-between; gap:.5rem; padding: .75rem 1rem; border-bottom:2px solid var(--color-border); flex-wrap:wrap; }
.kan-summary{ font-size:.85rem; color:var(--color-text-muted); }
.kan-list{ display:flex; flex-direction:column; gap:.6rem; padding: .9rem; min-height:180px; flex-grow: 1; }
.kan-list.drag-over{ background: rgba(163, 42, 85, .06); }
.kan-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:.8rem; box-shadow: var(--shadow-sm); cursor:grab; }
.kan-card.dragging { opacity: .5; }
.kan-card strong{ display:block; margin-bottom:2px; font-size:.95rem; }
.kan-card small{ display:block; color:var(--color-text-muted); }
.kan-card small.date{ font-size:.75rem; margin-top:4px; }

/* 5) MODAIS, PAGINAÇÃO, BOTÕES DE AÇÃO --------------------------------------------*/
.pagination-controls{ display:flex; justify-content:center; gap:.4rem; margin-top: var(--gap-4); position: sticky; bottom: env(safe-area-inset-bottom, 0px); background: var(--color-background); padding: .25rem 0; }
.pagination-controls button{ min-width:42px; height:42px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text); font-weight:var(--font-weight-medium); cursor: pointer; }
.pagination-controls button.active{ background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.pagination-controls button:disabled{ opacity:.5; cursor: not-allowed; }

.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background: var(--color-overlay); padding: var(--gap-3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-card{ position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius: clamp(0px, 2vw, var(--border-radius-lg)); width:100%; max-width: 820px; padding: var(--gap-4); box-shadow: var(--shadow-lg); max-height: 95vh; overflow-y: auto; }
.close-btn{ position:absolute; top:.6rem; right:1rem; font-size:2rem; line-height:1; background:none; border:none; color:var(--color-text-muted); cursor:pointer; z-index: 10; }
.modal-content-grid{ display:grid; gap: var(--gap-4); grid-template-columns: 1fr; }
@media(min-width:880px){ .modal-content-grid{ grid-template-columns: 1fr 1fr; } }
.history-list, .notes-list{ max-height: 320px; overflow:auto; background:var(--color-background); border-radius: var(--border-radius); padding: .75rem; border:1px solid var(--color-border); }
.note-card { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); } .note-card:last-child { border-bottom: none; }
#addNoteForm textarea{ width:100%; min-height:90px; padding:.6rem; border:1px solid var(--color-border); border-radius: var(--border-radius-sm); }
#addNoteForm button{ margin-top:.6rem; min-height: var(--tap); }

.image-zoom-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.image-zoom-modal img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: var(--shadow-lg); }
.image-zoom-modal .close-btn { color: #fff; font-size: 2.5rem; top: 1rem; right: 1.5rem; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

.btn-action{ display:inline-flex; align-items:center; justify-content:center; padding:.45rem .8rem; min-height: var(--tap); font-size:.85rem; font-weight:var(--font-weight-medium); border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; text-align:center; }
.btn-action.whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.btn-action.details{ background:var(--color-text-muted); color:#fff; }
.btn-action.warn { background-color: #e63946; color: #fff; border-color: #e63946; } /* NOVO ESTILO PARA BOTÃO DE EXCLUIR */
.btn-action.warn:hover { background-color: #d00000; border-color: #d00000; }

select.status-select{ appearance:none; -webkit-appearance:none; border:none; padding:.55rem 1rem; min-width:130px; border-radius:999px; color:#fff; font-weight:var(--font-weight-medium); }

/* 6) CATÁLOGO & CATÁLOGO PRO -----------------------------------------------------*/
.catalog-grid{ display:grid; gap: var(--gap-3); grid-template-columns: 1fr; }
@media(min-width:620px){ .catalog-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:992px){ .catalog-grid{ grid-template-columns: repeat(3,1fr); } }
.catalog-card{ display:flex; align-items:center; gap: var(--gap-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--gap-2); cursor:pointer; }
.catalog-card img{ width:72px; height:72px; object-fit:contain; background:#fff; border-radius:10px; border:1px solid var(--color-border); }
.catalog-card-info{ overflow:hidden; }
.catalog-card-info strong, .catalog-card-info small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pm-card{ max-width: 980px; }
.pm-grid{ display:grid; gap: var(--gap-4); grid-template-columns: 1fr; }
@media(min-width:880px){ .pm-grid{ grid-template-columns: 1.1fr 1fr; } }
.pm-media img{ width:100%; height:auto; border:1px solid var(--color-border); border-radius: var(--border-radius); background:#fff; }
.pm-thumbs{ display:flex; gap:.5rem; margin-top:.5rem; overflow:auto hidden; padding-bottom: .5rem; }
.pm-thumbs .pm-thumb{ width:60px; height:60px; object-fit:contain; border:2px solid transparent; border-radius:8px; background:#fff; opacity:.8; cursor:pointer; flex-shrink: 0; }
.pm-thumbs .pm-thumb.is-active, .pm-thumbs .pm-thumb:hover{ opacity:1; border-color: var(--color-brand); }
.pm-thumbs .pm-thumb.is-active { box-shadow: 0 0 0 2px var(--color-brand); }
.pm-media-actions{ display:flex; gap:.5rem; margin-top:.5rem; }
.pm-title{ margin:0 0 .25rem; font-size: clamp(1.1rem,2.4vw,1.4rem); }
.pm-meta{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.pm-price{ font-weight: var(--font-weight-bold); color: var(--color-brand); }
.pm-sku{ color: var(--color-text-muted); font-size:.9rem; }
.pm-highlights{ margin:.5rem 0 1rem; }
.pm-bullets{ margin:0; padding-left:1rem; list-style: none; }
.pm-bullets li{ margin:.25rem 0; position: relative; padding-left: .5rem; }
.pm-bullets li::before { content: '•'; color: var(--color-brand); position: absolute; left: -10px; }
.pm-tone-row{ display:flex; align-items:center; gap:.5rem; margin:.5rem 0 1rem; }
.pm-tone-row select{ min-height: var(--tap); padding:.45rem .8rem; border:1px solid var(--color-border); border-radius: var(--border-radius-sm); background:var(--color-surface); color:var(--color-text); }
.pm-msg-wrap textarea{ width:100%; min-height:120px; padding:.7rem 1rem; border:1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-background); color: var(--color-text); font-size:.98rem; line-height:1.5; }
.pm-msg-actions, .pm-actions, .pm-share { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; align-items: center; }
.pm-card .btn-action { background: var(--color-surface); border:1px solid var(--color-border); color: var(--color-text); }
.pm-card .btn-action.whatsapp { background:#25D366; color:#fff; border-color: #25D366; }
.pm-share .btn-action { padding: .4rem .6rem; min-height: initial; }

/* 7) CONFIGURAÇÕES & IMPORTADOR ----------------------------------------------------*/
#settingsForm .form-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-3) var(--gap-4); max-width: 800px; }
@media(min-width: 640px) { #settingsForm .form-grid { grid-template-columns: 180px 1fr; align-items: center; } }
#settingsForm label { font-weight: var(--font-weight-medium); text-align: left; }
#settingsForm input { width:100%; min-height: var(--tap); padding:.7rem 1rem; border:1px solid var(--color-border); border-radius: var(--border-radius-sm); background: var(--color-surface); color: var(--color-text); }

.progress-bar{ width:100%; height: 1rem; border-radius: 999px; overflow:hidden; background:var(--color-border); position:relative; }
.progress-bar-inner{ width:0%; height:100%; background:var(--color-brand); transition: width .4s ease; }
.importer-log{ background:var(--color-background); border:1px solid var(--color-border); border-radius: var(--border-radius); padding: .75rem; font-family:monospace; font-size:.9rem; max-height: 200px; overflow-y: auto; }
.importer-log p { margin: 0 0 .25rem; }