/* ============================================================
   logs.css — Log viewer, DNS log entries, log toolbar
   ============================================================ */

.log-info { font-size: 12px; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.log-viewer {
  background: rgba(0, 0, 0, .02);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 0;
  overflow-y: auto; overflow-x: hidden;
  font-size: 12px; line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.log-line {
  padding: 2px 16px;
  word-break: break-all;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  transition: background var(--transition-fast);
  border-radius: 6px;
  margin: 1px 6px;
}
.log-line:hover { background: rgba(0, 0, 0, .04); }
.log-line.log-error { color: var(--error); }
.log-line.log-warn { color: var(--warn); }
.log-empty {
  text-align: center; padding: 60px 20px;
  color: var(--text-muted); font-size: 14px; font-weight: 400;
}

.tab-content.log-page.active {
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.tab-content.log-page.active .page-header {
  flex-shrink: 0; margin-bottom: 8px;
}
.tab-content.log-page.active .log-toolbar { flex-shrink: 0; }
.tab-content.log-page.active .log-viewer { flex: 1; min-height: 0; }

.log-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 0 8px; flex-shrink: 0;
}
.log-filter-row {
  display: flex; align-items: center; gap: 8px;
}
.log-toolbar .filter-select {
  flex: 1; min-width: 80px;
}
.log-toolbar .filter-input {
  width: 100%; min-width: 0;
}
.filter-input {
  flex: 1; min-width: 120px; padding: 7px 10px;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 8px; color: var(--text-main);
  font-size: 13px; font-family: inherit;
  outline: none; transition: all var(--transition-fast);
}
.filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.filter-select {
  padding: 7px 26px 7px 10px;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 8px; color: var(--text-main);
  font-size: 13px; font-family: inherit;
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23aeaeb2' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: all var(--transition-fast);
}
.filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.filter-lines-inline { width: 80px; flex-shrink: 0; }

/* DNS Log Entries */
.dns-log-list { display: flex; flex-direction: column; }
.dns-log-entry {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  transition: background var(--transition-fast); cursor: default;
  border-bottom: none;
  border-radius: 8px;
  margin: 2px 6px;
}
.dns-log-entry:last-child { border-bottom: none; }
.dns-log-entry:hover { background: rgba(0, 0, 0, .03); }
.dns-log-entry.entry-blocked { background: rgba(255, 59, 48, .06); }
.dns-log-entry.entry-blocked:hover { background: rgba(255, 59, 48, .10); }
.dns-log-entry.entry-rewritten { background: rgba(88, 86, 214, .06); }
.dns-log-entry.entry-rewritten:hover { background: rgba(88, 86, 214, .10); }

.entry-status {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.entry-status.st-resolve { background: var(--success); box-shadow: 0 0 6px var(--success-glow); }
.entry-status.st-cache { background: var(--info); box-shadow: 0 0 6px var(--primary-glow); }
.entry-status.st-blocked { background: var(--error); box-shadow: 0 0 6px var(--error-glow); animation: statusPulseRed 2s ease-in-out infinite; }
.entry-status.st-blocked-rsp { background: var(--warn); box-shadow: 0 0 6px rgba(255, 149, 0, .25); }
.entry-status.st-rewritten { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.entry-status.st-unknown { background: var(--text-muted); }

.entry-body { flex: 1; min-width: 0; }
.entry-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.entry-domain { font-size: 13px; font-weight: 500; color: var(--text-main); word-break: break-all; }
.entry-qtype {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 500;
  background: var(--primary-light); color: var(--primary); flex-shrink: 0;
}
.entry-protocol {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 400;
  background: rgba(0, 0, 0, .04); color: var(--text-muted); flex-shrink: 0;
}
.entry-meta { display: flex; gap: 12px; margin-top: 2px; flex-wrap: wrap; }
.entry-meta-item {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 3px;
}
.entry-meta-item svg { width: 11px; height: 11px; opacity: .35; }

.entry-status-text { font-size: 11px; font-weight: 500; }
.entry-status-text.st-resolve { color: var(--success); }
.entry-status-text.st-cache { color: var(--info); }
.entry-status-text.st-blocked { color: #FF3B30; }
.entry-status-text.st-blocked-rsp { color: var(--warn); }
.entry-status-text.st-rewritten { color: var(--accent); }
.entry-status-text.st-unknown { color: var(--text-muted); }
.entry-filter-tag {
  font-size: 9px; color: var(--warn);
  background: var(--warn-bg); padding: 1px 6px;
  border-radius: 10px; margin-left: 3px; font-weight: 500;
}

.entry-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 2px; flex-shrink: 0;
}
.entry-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.entry-latency { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.dns-log-entry[data-has-response] {
  cursor: pointer;
}
.dns-log-entry[data-has-response]:hover {
  background: rgba(0, 0, 0, .03);
}
.entry-detail-btn {
  font-size: 10px;
  color: var(--primary);
  background: rgba(0, 122, 255, .08);
  border: none;
  border-radius: 10px;
  padding: 1px 5px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.entry-detail-btn:hover {
  background: rgba(0, 122, 255, .15);
}