/* ═══════════════════════════════════════════════════════════
   components.css — Modal, tabelas, badges, filtros, export
   ═══════════════════════════════════════════════════════════ */

/* ── BADGE ───────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:600;
  padding:2px 9px; border-radius:20px;
}
.badge.open { background:var(--rose-dim);   color:var(--rose);   }
.badge.warn { background:var(--amber-dim);  color:var(--amber);  }
.badge.ok   { background:var(--green-dim);  color:var(--green);  }
.badge.info { background:var(--teal-dim);   color:var(--teal);   }

/* ── TABLE ───────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }

table { width:100%; border-collapse:collapse; font-size:12.5px; }
thead th {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-muted); padding:0 8px 10px 0;
  font-weight:600; text-align:left; border-bottom:1px solid var(--border);
}
tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--tr); cursor:pointer;
}
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }
tbody td { padding:10px 8px 10px 0; color:var(--text); vertical-align:middle; }

/* ── DETAIL TABLE (modals) ───────────────────────────────────────────── */
.detail-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.detail-table thead th {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-muted); padding:6px 10px 10px 0;
  font-weight:600; border-bottom:1px solid var(--border);
}
.detail-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--tr);
}
.detail-table tbody tr:hover { background:var(--surface2); }
.detail-table tbody td { padding:10px 10px 10px 0; vertical-align:middle; }

/* ── MONTHS PILLS ────────────────────────────────────────────────────── */
.months-pills { display:flex; gap:4px; flex-wrap:wrap; }
.mpill { font-size:10px; padding:2px 7px; border-radius:20px; font-weight:600; }
.mpill.nov { background:var(--teal-dim);   color:var(--teal);   }
.mpill.dez { background:var(--amber-dim);  color:var(--amber);  }
.mpill.jan { background:var(--rose-dim);   color:var(--rose);   }

/* ── MODAL OVERLAY ───────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(5,14,28,.6); z-index:300;
  align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
.modal-overlay.open { display:flex; }

.modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); width:780px; max-width:96vw;
  max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:modalIn .25s ease both;
}
.modal-head {
  padding:24px 28px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0; display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px;
}
.modal-title {
  font-family:'Sora',sans-serif; font-size:17px; font-weight:700; color:var(--text);
}
.modal-sub    { font-size:12px; color:var(--text-muted); margin-top:3px; }
.modal-close  {
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; flex-shrink:0;
  transition:all var(--tr);
}
.modal-close:hover { background:var(--rose); color:#fff; border-color:var(--rose); }
.modal-body   { padding:24px 28px; overflow-y:auto; flex:1; }

.modal-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:22px;
}
.mstat       { background:var(--surface2); border-radius:var(--radius-sm); padding:14px; text-align:center; }
.mstat-val   { font-family:'Sora',sans-serif; font-size:20px; font-weight:800; color:var(--text); }
.mstat-lbl   {
  font-size:10px; color:var(--text-muted);
  letter-spacing:.5px; text-transform:uppercase; margin-top:3px;
}

.modal-filter {
  display:flex; gap:8px; margin-bottom:16px;
  flex-wrap:wrap; align-items:center;
}
.filter-btn {
  border:1px solid var(--border); background:var(--surface);
  border-radius:20px; padding:5px 13px;
  font-size:12px; color:var(--text-soft); cursor:pointer;
  transition:all var(--tr);
}
.filter-btn:hover      { background:var(--surface2); }
.filter-btn.active     { background:var(--green); color:#fff; border-color:var(--green); }

.modal-search {
  margin-left:auto; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius-sm); padding:6px 12px;
  font-size:12px; color:var(--text); outline:none; width:180px;
  transition:border-color var(--tr);
}
.modal-search:focus { border-color:var(--green); }

.modal-foot {
  padding:16px 28px; border-top:1px solid var(--border);
  flex-shrink:0; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
}
.export-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green); color:#fff; border:none;
  border-radius:var(--radius-sm); padding:8px 18px;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; transition:background var(--tr);
}
.export-btn:hover { background:var(--green2); }

/* ═══════════════════════════════════════════════════════════
   PAINEL DE CONFIGURAÇÃO — Google Sheets
   ═══════════════════════════════════════════════════════════ */

/* Botão de engrenagem na topbar */
.cfg-btn {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px;
  transition:all var(--tr);
  position:relative;
}
.cfg-btn:hover { background:var(--surface2); transform:rotate(30deg); }
.cfg-btn.active { background:var(--green); border-color:var(--green); }

/* Ponto indicador de status no botão */
.cfg-btn-dot {
  position:absolute; top:3px; right:3px;
  width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--surface);
  background:var(--text-muted);
  transition:background .3s;
}
.cfg-btn-dot.ok    { background:var(--green); }
.cfg-btn-dot.error { background:var(--rose); }
.cfg-btn-dot.warn  { background:var(--amber); }

/* Drawer lateral */
.cfg-drawer {
  position:fixed;
  top:0; right:0;
  width:400px; max-width:96vw;
  height:100vh;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 40px rgba(0,0,0,.18);
  z-index:400;
  display:flex; flex-direction:column;
  transform:translateX(110%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.cfg-drawer.open { transform:translateX(0); }

/* Backdrop escurecido */
.cfg-backdrop {
  display:none;
  position:fixed; inset:0;
  background:rgba(5,14,28,.45);
  z-index:399;
  backdrop-filter:blur(3px);
  transition:opacity .28s;
}
.cfg-backdrop.open { display:block; }

/* Header do drawer */
.cfg-head {
  padding:22px 22px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-shrink:0;
}
.cfg-head-title {
  font-family:'Sora',sans-serif; font-size:15px; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:9px;
}
.cfg-head-sub { font-size:11px; color:var(--text-muted); margin-top:3px; }
.cfg-close {
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; flex-shrink:0;
  transition:all var(--tr); color:var(--text-soft);
}
.cfg-close:hover { background:var(--rose); color:#fff; border-color:var(--rose); }

/* Corpo do drawer */
.cfg-body { padding:22px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }

/* Bloco de status de conexão */
.cfg-status-block {
  border-radius:var(--radius-sm);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  transition:background .25s, border-color .25s;
}
.cfg-status-block.connected    { background:var(--green-dim);  border-color:var(--green);  }
.cfg-status-block.error        { background:var(--rose-dim);   border-color:var(--rose);   }
.cfg-status-block.not-set      { background:var(--amber-dim);  border-color:var(--amber);  }
.cfg-status-icon { font-size:20px; flex-shrink:0; }
.cfg-status-label {
  font-size:12px; font-weight:700;
  color:var(--text);
}
.cfg-status-id {
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; color:var(--text-muted);
  margin-top:2px; word-break:break-all;
}
.cfg-status-sync { font-size:10px; color:var(--text-muted); margin-top:3px; }

/* Grupo de campo */
.cfg-field { display:flex; flex-direction:column; gap:6px; }
.cfg-label {
  font-size:11px; font-weight:600; color:var(--text-soft);
  letter-spacing:.4px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.cfg-label-badge {
  font-size:9px; padding:1px 6px; border-radius:20px;
  background:var(--green-dim); color:var(--green);
  font-weight:700; letter-spacing:.3px;
}

/* Input URL */
.cfg-input {
  width:100%;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--text);
  outline:none;
  resize:none;
  transition:border-color var(--tr), box-shadow var(--tr);
  min-height:64px;
}
.cfg-input:focus {
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-dim);
}
.cfg-input.valid   { border-color:var(--green); }
.cfg-input.invalid { border-color:var(--rose);  }

/* Preview do ID extraído */
.cfg-id-preview {
  font-size:11px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
  min-height:18px; transition:color .2s;
}
.cfg-id-preview.ok    { color:var(--green); }
.cfg-id-preview.error { color:var(--rose);  }
.cfg-id-preview .mono { font-family:'IBM Plex Mono',monospace; font-size:10.5px; }

/* Botões de ação */
.cfg-actions { display:flex; flex-direction:column; gap:8px; }
.cfg-btn-save {
  width:100%;
  padding:11px;
  background:var(--green); color:#fff; border:none;
  border-radius:var(--radius-sm);
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--tr), transform .15s;
}
.cfg-btn-save:hover   { background:var(--green2); }
.cfg-btn-save:active  { transform:scale(.98); }
.cfg-btn-save:disabled { opacity:.5; cursor:not-allowed; }

.cfg-btn-refresh {
  width:100%;
  padding:10px;
  background:var(--surface); color:var(--text-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--tr);
}
.cfg-btn-refresh:hover  { background:var(--surface2); color:var(--text); }
.cfg-btn-refresh.spinning svg { animation:spin .8s linear infinite; }

.cfg-btn-reset {
  width:100%; padding:9px;
  background:transparent; color:var(--text-muted);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:11px; cursor:pointer;
  transition:all var(--tr);
}
.cfg-btn-reset:hover { color:var(--rose); border-color:var(--rose-dim); background:var(--rose-dim); }

/* Mensagem de feedback */
.cfg-feedback {
  font-size:12px; padding:10px 14px;
  border-radius:var(--radius-sm);
  display:none; align-items:center; gap:8px;
  animation:fadeUp .2s ease both;
}
.cfg-feedback.show { display:flex; }
.cfg-feedback.ok    { background:var(--green-dim); color:var(--green);  border:1px solid var(--green); }
.cfg-feedback.error { background:var(--rose-dim);  color:var(--rose);   border:1px solid var(--rose);  }

/* Divisor */
.cfg-divider {
  border:none; border-top:1px solid var(--border); margin:0;
}

/* Dica de ajuda */
.cfg-hint {
  background:var(--surface2);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:11px; color:var(--text-soft); line-height:1.6;
}
.cfg-hint strong { color:var(--text); }
.cfg-hint ol, .cfg-hint ul { padding-left:16px; margin-top:4px; }
.cfg-hint li { margin-top:3px; }

/* ═══════════════════════════════════════════════════════════
   UPLOAD DE PLANILHA — Drawer Tab
   ═══════════════════════════════════════════════════════════ */

/* Tabs no topo do drawer */
.cfg-tabs {
  display:flex; gap:2px;
  padding:14px 16px 0;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:var(--surface);
}
.cfg-tab {
  flex:1; text-align:center;
  padding:9px 8px 10px;
  font-family:'Sora',sans-serif;
  font-size:11.5px; font-weight:600;
  color:var(--text-muted);
  cursor:pointer; border:none; background:transparent;
  border-bottom:2px solid transparent;
  transition:color var(--tr), border-color var(--tr);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cfg-tab:hover { color:var(--text); }
.cfg-tab.active {
  color:var(--green);
  border-bottom-color:var(--green);
}
.cfg-tab-panel { display:none; }
.cfg-tab-panel.active { display:flex; flex-direction:column; gap:20px; }

/* Feature badges strip */
.upload-badges {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--navy) 0%, #0e4a3a 100%);
  border-radius:var(--radius-sm);
}
.upload-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:4px 10px;
}

/* Drop zone */
.upload-dropzone {
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:28px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--tr), background var(--tr);
  position:relative;
  background:var(--bg);
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color:var(--green);
  background:var(--green-dim);
}
.upload-dropzone input[type="file"] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-dropzone-icon { font-size:28px; margin-bottom:10px; }
.upload-dropzone-title {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700;
  color:var(--text); margin-bottom:4px;
}
.upload-dropzone-sub { font-size:11px; color:var(--text-muted); }
.upload-dropzone-formats {
  display:inline-flex; gap:6px; margin-top:10px;
}
.upload-fmt-pill {
  font-size:10px; font-weight:700; padding:2px 9px;
  border-radius:20px; border:1px solid var(--border);
  color:var(--text-soft); background:var(--surface);
}

/* Progress bar de upload */
.upload-progress {
  display:none;
  flex-direction:column; gap:6px;
}
.upload-progress.show { display:flex; }
.upload-progress-bar-wrap {
  height:6px; background:var(--surface2);
  border-radius:10px; overflow:hidden;
}
.upload-progress-bar {
  height:100%; background:var(--green);
  border-radius:10px; width:0%;
  transition:width .4s ease;
}
.upload-progress-msg {
  font-size:11px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
}
.upload-progress-msg .spin {
  width:10px; height:10px;
  border:2px solid var(--border);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}

/* Resultado do upload */
.upload-result {
  display:none; border-radius:var(--radius-sm); padding:12px 14px;
  font-size:12px; border:1px solid;
  animation:fadeUp .2s ease both;
}
.upload-result.show { display:block; }
.upload-result.ok    { background:var(--green-dim); border-color:var(--green); color:var(--green); }
.upload-result.warn  { background:var(--amber-dim); border-color:var(--amber); color:var(--amber); }
.upload-result.error { background:var(--rose-dim);  border-color:var(--rose);  color:var(--rose);  }
.upload-result-title { font-family:'Sora',sans-serif; font-weight:700; margin-bottom:4px; }
.upload-result-detail { font-size:11px; color:var(--text-soft); margin-top:4px; line-height:1.5; }

/* Fonte ativa (badge quando xlsx está sendo usado) */
.upload-active-badge {
  display:none; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--teal-dim); border:1px solid var(--teal);
  font-size:11px; color:var(--teal);
}
.upload-active-badge.show { display:flex; }
.upload-active-badge strong { font-weight:700; }

/* Tabela de histórico */
.upload-history-title {
  font-family:'Sora',sans-serif; font-size:12px; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:8px;
  margin-bottom:0;
}
.upload-history-sub { font-size:10px; color:var(--text-muted); margin-top:2px; }

.upload-hist-table {
  width:100%; border-collapse:collapse; font-size:11px;
  margin-top:8px;
}
.upload-hist-table thead th {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--text-muted); padding:6px 8px 8px 0; font-weight:600;
  border-bottom:1px solid var(--border); text-align:left;
}
.upload-hist-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--tr);
}
.upload-hist-table tbody tr:last-child { border-bottom:none; }
.upload-hist-table tbody tr:hover { background:var(--surface2); }
.upload-hist-table tbody td {
  padding:8px 8px 8px 0; color:var(--text-soft); vertical-align:middle;
}
.upload-hist-table .hist-file {
  font-weight:600; color:var(--text); font-size:11px;
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.upload-hist-table .hist-size { color:var(--text-muted); font-size:10px; margin-top:1px; }
.upload-hist-empty {
  text-align:center; padding:20px; color:var(--text-muted);
  font-size:11px;
}

/* Botão limpar dados locais */
.cfg-btn-clear-xlsx {
  width:100%; padding:9px;
  background:transparent; color:var(--text-muted);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:11px; cursor:pointer;
  transition:all var(--tr); display:none;
}
.cfg-btn-clear-xlsx.show {
  display:block;
}
.cfg-btn-clear-xlsx:hover { color:var(--rose); border-color:var(--rose-dim); background:var(--rose-dim); }