/* ============================================================
   ADMIN.CSS — Estilos específicos do painel de administração
   ============================================================ */

/* ---- Views ---- */
.view { display: none; flex-direction: column; gap: 32px; width: 100%; }
.view.active { display: flex; }

/* ---- Courses breadcrumb + back button (Módulos › Curso › Tópico) ---- */
.courses-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.breadcrumb-item {
  font-weight: 500;
  cursor: pointer;
}

.breadcrumb-item:hover {
  color: var(--text-primary);
}

.breadcrumb-sep {
  color: var(--text-tertiary);
}

#courses-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ---- Icon Picker ---- */
.icon-picker-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.icon-picker-preview-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  padding: 8px;
  max-height: 180px;
  overflow-y: auto;
}
.icon-picker-item {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background .12s, color .12s, border-color .12s;
  padding: 0;
}
.icon-picker-item:hover {
  background: var(--glass-bg-card);
  color: var(--text-primary);
}
.icon-picker-item.selected {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ---- Dashboard KPIs ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kpi-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* Subtle decorative bg circle */
.kpi-card::after {
  content: '';
  position: absolute;
  top: -14px; right: -14px;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.05;
  pointer-events: none;
}
.kpi-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.kpi-icon.blue   { background: var(--badge-info-bg);    color: var(--accent);       }
.kpi-icon.green  { background: var(--badge-success-bg); color: var(--color-green);  }
.kpi-icon.yellow { background: var(--badge-warning-bg); color: var(--color-yellow); }
.kpi-icon.purple { background: var(--badge-promo-bg);   color: var(--color-purple); }
.kpi-icon.red    { background: var(--badge-error-bg);   color: var(--color-red);    }
/* KPI texts */
.kpi-card .metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.kpi-card .metric-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ---- Charts ---- */
.chart-card { position: relative; }
.chart-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}

/* ---- View title (cabeçalho dinâmico de cada view) ---- */
.view-count-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---- Bulk action bar ---- */
.bulk-bar {
  display: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bulk-bar.visible { display: flex; }
.bulk-bar .btn {
  background: rgba(var(--on-accent-rgb), 0.20);
  color: var(--on-accent);
  border: 1px solid rgba(var(--on-accent-rgb), 0.30);
}
.bulk-bar .btn:hover {
  background: rgba(var(--on-accent-rgb), 0.32);
}
.bulk-bar .btn-danger-bulk {
  background: rgba(255, 80, 80, 0.30);
  border-color: rgba(255, 100, 100, 0.40);
}
.bulk-bar-hint {
  width: 100%;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--on-accent-rgb), 0.20);
  margin-top: 2px;
  color: rgba(var(--on-accent-rgb), 0.90);
}

/* ---- Data tables (admin) ---- */
.admin-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.table-search { max-width: 280px; }

/* Status dot */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.active   { background: var(--color-green);  }
.status-dot.inactive { background: var(--color-red);    }
.status-dot.warning  { background: var(--color-yellow); }

/* ---- User row actions ---- */
.action-btns { display: flex; gap: 6px; align-items: center; }

/* ---- Module manager ---- */
/* Usa .list-item base + modificador .list-item-draggable de components.css */
.module-list-item {
  display: flex;
  align-items: center;
  gap: var(--list-item-gap);
  padding: var(--list-item-padding);
  border-radius: var(--list-item-radius);
  border: 1px solid var(--glass-border-inner);
  background: var(--glass-bg-card);
  transition: background 0.15s ease;
}
.module-list-item:hover { background: var(--control-bg); }
.module-list-thumb {
  width: 52px;
  aspect-ratio: 4/5;
  border-radius: 8px;
  object-fit: cover;
  background: var(--control-border);
  flex-shrink: 0;
}
.module-list-info { flex: 1; min-width: 0; }
.module-list-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.module-list-meta  { font-size: 11px; color: var(--text-secondary); display: flex; gap: 8px; }
/* ---- Reordenar arrastando ---- */
.drag-handle {
  color: var(--text-tertiary);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 4px 2px;
  border-radius: 6px;
  /* Sem isto o toque rola a página em vez de arrastar o item. */
  touch-action: none;
}
.drag-handle:hover { color: var(--text-secondary); background: var(--control-bg); }
.drag-handle:active { cursor: grabbing; }

/* Número da posição — é o mesmo que o aluno vê na área de membros. */
.sort-num {
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.module-list-item.is-dragging {
  opacity: .55;
  background: var(--control-bg);
  box-shadow: var(--glass-shadow);
}
/* Durante o arraste, nada de seleção de texto nem de hover piscando. */
.is-sorting { user-select: none; }
.is-sorting .module-list-item { cursor: grabbing; }
.is-sorting .module-list-item:hover { background: transparent; }
.is-sorting .module-list-item.is-dragging:hover { background: var(--control-bg); }

/* ---- Access control matrix ---- */
/* Usa .list-item base + modificador .list-item-interactive de components.css */
.access-user-card {
  display: flex;
  align-items: center;
  gap: var(--list-item-gap);
  padding: var(--list-item-padding);
  border-radius: var(--list-item-radius);
  border: 1px solid var(--glass-border-inner);
  background: var(--glass-bg-card);
  cursor: pointer;
  transition: background 0.1s ease;
}
.access-user-card:hover {
  background: var(--control-bg-hover);
}
.access-user-card:active {
  background: var(--fill-secondary);
}
.access-user-info { flex: 1; }
.access-user-name  { font-size: 13px; font-weight: 500; }
.access-user-email { font-size: 11px; color: var(--text-secondary); }
.access-count { font-size: 12px; color: var(--text-secondary); }

/* ---- Settings form ---- */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.settings-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border-inner);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
  padding: 4px 0;
}
.settings-row-label { flex: 1; }
.settings-row-label strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.settings-row-label span   { font-size: 12px; color: var(--text-secondary); }
.settings-row-control { flex-shrink: 0; min-width: 240px; }
.settings-row-control.wide { min-width: 100%; }

/* Color pickers */
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px; height: 36px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  cursor: pointer;
  background: none;
  padding: 2px;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; }
.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }

/* Code editor area */
.code-editor {
  font-family: "SF Mono", "Fira Code", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  min-height: 140px;
  tab-size: 2;
}

/* Markdown editor toolbar (injetada por JS acima de textareas) */
.md-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  margin-bottom: 6px;
  background: var(--fill-tertiary);
  border-radius: 8px;
}
.md-toolbar .btn {
  padding: 4px 9px;
  font-size: 12px;
  gap: 4px;
}
.md-toolbar .btn.loading { opacity: 0.6; pointer-events: none; }

/* ---- Analytics ---- */
.analytics-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border-inner);
  gap: 0;
  margin: -20px -24px 20px;
  padding: 0 24px;
  overflow-x: auto;
}
.analytics-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s;
}
.analytics-tab:hover { color: var(--text-primary); }
.analytics-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Activity timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border-inner);
  align-items: flex-start;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.timeline-body { flex: 1; }
.timeline-text { font-size: 13px; line-height: 1.5; }
.timeline-time { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.page-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text-primary);
  transition: all 0.15s;
}
.page-btn:hover { background: var(--control-bg-hover); }
.page-btn.active {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}
.page-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ---- Snippet item ---- */
/* Usa .list-item base + modificador .list-item-interactive de components.css */
.snippet-item {
  display: flex;
  align-items: center;
  gap: var(--list-item-gap);
  padding: var(--list-item-padding);
  border-radius: var(--list-item-radius);
  border: 1px solid var(--glass-border-inner);
  background: var(--glass-bg-card);
  cursor: pointer;
  transition: background 0.1s ease;
}
.snippet-item:hover {
  background: var(--control-bg-hover);
}
.snippet-item:active {
  background: var(--fill-secondary);
}
.snippet-info { flex: 1; }
.snippet-name { font-size: 13px; font-weight: 500; }
.snippet-pos  { font-size: 11px; color: var(--text-secondary); }

/* ---- Popup / Banner preview ---- */
.preview-card {
  border: 1px dashed var(--glass-border-outer);
  border-radius: 8px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .settings-row { flex-direction: column; align-items: flex-start; }
  .settings-row-control { min-width: 100%; }
  .admin-table-header { flex-direction: column; align-items: flex-start; }
  .table-search { max-width: 100%; width: 100%; }
}

/* ============================================================
   PALETTE PICKER (radio cards com preview de swatches)
   ============================================================ */
.palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.palette-option {
  display: block;
  cursor: pointer;
}
.palette-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.palette-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  border: 1.5px solid var(--glass-border-outer);
  background: var(--control-bg);
  transition: border-color 0.1s;
}
.palette-option:hover .palette-card {
  border-color: var(--accent);
}
.palette-option input:checked + .palette-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-elevated);
}
.palette-card-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-border-inner);
  flex-shrink: 0;
}
.palette-card-swatches span {
  display: block;
  width: 100%;
  height: 100%;
}
.palette-card-info { min-width: 0; }
.palette-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.palette-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ---- ID chip (lesson / module identifiers) ---- */
.id-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--text-tertiary);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ---- HLS upload panel (lesson edit form) ---- */
.hls-panel { margin-top: 4px; }
.hls-panel-inner {
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--control-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hls-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hls-panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.hls-file-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 4px;
  background: var(--bg-color);
}
.hls-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.hls-file-row:hover { background: var(--row-hover); }
.hls-file-icon { font-size: 10px; color: var(--accent); flex-shrink: 0; }
.hls-file-name { flex: 1; font-family: var(--font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.hls-file-size { color: var(--text-tertiary); font-size: 11px; flex-shrink: 0; }
.hls-file-row .hls-rm-btn { opacity: 0; transition: opacity .15s; }
.hls-file-row:hover .hls-rm-btn { opacity: 1; }
.hls-upload-label { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   INTEGRAÇÕES — card de webhook por produto
   Duas credenciais por card (URL do produto e Security Token).
   O valor é longo e monoespaçado; as ações são curtas e fixas.
   Por isso a linha é grid "valor 1fr / ações auto" em vez de flex
   com min-width, que no mobile espremia o campo até virar "h..".
   ============================================================ */
.integration-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.integration-page-head h2 { font-size: 17px; font-weight: 700; }
.integration-page-head p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  max-width: 70ch;
}
.integration-page-head .btn { flex-shrink: 0; }

.integration-card { padding: 0; gap: 0; overflow: hidden; }

.integration-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border-inner);
}
.integration-ident { flex: 1; min-width: 0; }
.integration-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.integration-title strong {
  font-size: 15px;
  overflow-wrap: anywhere;   /* nome longo quebra, mas não uma palavra por linha */
}
.integration-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.integration-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Grade de 3 colunas compartilhada pelas duas credenciais: rótulo, valor e
   ações. Compartilhar as colunas é o que mantém os botões das duas linhas
   alinhados — com uma linha flex por credencial, cada uma achava uma largura
   diferente e o bloco ficava serrilhado. */
.integration-creds {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 20px;
  background: var(--control-bg);
}
.cred-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cred-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-inner);
  border-radius: 7px;
  padding: 7px 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;          /* clique único seleciona o valor inteiro */
  cursor: text;
}
.cred-value.is-masked { letter-spacing: 2px; color: var(--text-tertiary); }
.cred-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Instrução: uma vez no topo da lista, não repetida em cada produto. */
.integration-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--glass-border-inner);
  border-radius: 10px;
  background: var(--control-bg);
}
.integration-hint code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-inner);
}

@media (max-width: 700px) {
  /* O botao nao encolhe, entao lado a lado ele espremia a descricao numa
     coluna de 3 palavras. Empilhar e deixar o botao ocupar a largura. */
  .integration-page-head { flex-direction: column; align-items: stretch; }
  .integration-page-head .btn { justify-content: center; }
  .integration-head { flex-direction: column; gap: 12px; }
  .integration-actions { width: 100%; flex-wrap: wrap; }
  .integration-actions .btn { flex: 1 1 auto; justify-content: center; }
  .integration-actions .btn-icon { flex: 0 0 auto; }
  /* Empilha: o valor ocupa a linha toda e as ações vão para baixo, alinhadas
     à direita. Espremer os dois lado a lado deixava o campo ilegível. */
  /* Empilha tudo: rótulo, valor e ações em linhas próprias. Manter as três
     colunas aqui espremia o campo até virar "h..". */
  .integration-creds { grid-template-columns: 1fr; gap: 6px; }
  .cred-label { margin-top: 6px; }
  .cred-actions { justify-content: flex-end; margin-bottom: 4px; }
}