/* Aba "Roteadores CPE" (TR-069 / GenieACS). Isolado, sem reaproveitar IDs do core. */

#cpe-toolbar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
  flex-wrap: wrap;
}
#cpe-toolbar input {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); padding: 4px 8px; font-size: 12px;
  min-width: 220px;
}
#cpe-toolbar .cpe-pill {
  background: var(--panel-head); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 10px; font-size: 11px;
}
#cpe-toolbar .cpe-spacer { flex: 1 1 auto; }

/* Redesign: menu de overflow "Mais" (ferramentas raras) */
.cpe-more { position: relative; }
.cpe-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
  background: var(--panel-head); border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 3px; font-size: 12px;
}
.cpe-more > summary::-webkit-details-marker,
.cpe-more > summary::marker { display: none; content: ''; }
.cpe-more > summary:hover, .cpe-more[open] > summary { border-color: var(--accent); }
.cpe-more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; min-width: 232px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.cpe-more-menu .cpe-btn {
  width: 100%; text-align: left; border-color: transparent; background: transparent;
  display: flex; gap: 8px; align-items: center;
}
.cpe-more-menu .cpe-btn:hover { background: var(--panel-head); border-color: var(--border); }

/* Redesign: faixa de pendências (precisa de atenção) */
#cpe-pendencias {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.28);
}
#cpe-pendencias .lbl {
  font-size: 10px; font-weight: 700; color: #f59e0b;
  text-transform: uppercase; letter-spacing: .5px; margin-right: 2px;
}

#cpe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#cpe-table th, #cpe-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
#cpe-table th { background: var(--panel-head); font-weight: 600; }
#cpe-table tr.cpe-row { cursor: pointer; }
#cpe-table tr.cpe-row:hover { background: var(--panel-head); }

.cpe-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cpe-dot.on  { background: #43A047; box-shadow: 0 0 6px #43A047; }
.cpe-dot.off { background: #757575; }

/* Modal */
#cpeDetailModal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 4000; align-items: center; justify-content: center;
}
#cpeDetailModal.show { display: flex; }
#cpeDetailModal .cpe-modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  width: min(960px, 96vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.cpe-modal-hdr {
  padding: 10px 14px; background: var(--panel-head);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.cpe-modal-hdr .ttl { font-weight: 600; flex: 1; }
.cpe-modal-hdr .x { cursor: pointer; opacity: .7; font-size: 18px; }
.cpe-modal-hdr .x:hover { opacity: 1; }

.cpe-tabs { display: flex; gap: 2px; padding: 6px 10px 0; background: var(--panel-head); }
.cpe-tab {
  background: transparent; border: 0; color: var(--text-dim, var(--text));
  padding: 6px 12px; cursor: pointer; font-size: 12px;
  border-bottom: 2px solid transparent;
}
.cpe-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.cpe-tab-body { padding: 14px; overflow-y: auto; flex: 1; }
.cpe-tab-pane { display: none; }
.cpe-tab-pane.active { display: block; }

.cpe-kv { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; font-size: 12px; }
.cpe-kv > .k { color: var(--text-dim, #8a93a0); }
.cpe-kv > .v { font-family: var(--mono, monospace); word-break: break-all; }

.cpe-radio-card {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--panel-head);
}
.cpe-radio-card h4 { margin: 0 0 8px; font-size: 13px; }
.cpe-radio-card .row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin-bottom: 6px; font-size: 12px; align-items: center; }
.cpe-radio-card input[type=text], .cpe-radio-card input[type=password] {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); padding: 4px 8px; font-size: 12px; width: 100%;
}

.cpe-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cpe-btn {
  background: var(--panel-head); border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.cpe-btn:hover { border-color: var(--accent); }
.cpe-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cpe-btn.danger  { background: #C62828; color: #fff; border-color: #C62828; }
.cpe-btn:disabled { opacity: .5; cursor: not-allowed; }

#cpe-history-table { width: 100%; font-size: 11px; border-collapse: collapse; }
#cpe-history-table th, #cpe-history-table td {
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
#cpe-history-table .ok  { color: #43A047; }
#cpe-history-table .err { color: #C62828; }

.cpe-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 5000;
  padding: 10px 14px; border-radius: 4px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--border);
}
.cpe-toast.ok  { border-color: #43A047; }
.cpe-toast.err { border-color: #C62828; }
.cpe-toast.warn { border-color: #d29922; }