/**
 * News Collector V2 Admin Styles
 */

/* Tab group styling */
#nc-v2-tabs {
  height: 100%;
}

#nc-v2-tabs::part(base) {
  height: 100%;
}

#nc-v2-tabs::part(body) {
  overflow-y: auto;
  padding: 20px;
}

/* Status cards row */
.nc-v2-status-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: stretch;
}

.nc-v2-status-cards sl-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.nc-v2-status-cards sl-card::part(base) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nc-v2-status-cards sl-card::part(body) {
  padding: 16px;
  flex: 1;
  display: flex;
  align-items: center;
}

.nc-v2-status-cards .status-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--sl-color-primary-600);
}

.nc-v2-status-cards .status-label {
  font-size: 0.875rem;
  color: var(--sl-color-neutral-500);
}

/* Queue stats grid */
.nc-v2-queue-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
  width: 100%;
}

.nc-v2-queue-stats div {
  padding: 12px;
  background: var(--sl-color-neutral-50);
  border-radius: 4px;
}

.nc-v2-queue-stats strong {
  display: block;
  font-size: 1.5rem;
  color: var(--sl-color-primary-600);
}

/* Scheduler status card */
.nc-v2-scheduler-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
}

.nc-v2-scheduler-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 500;
}

.nc-v2-scheduler-indicator sl-icon {
  font-size: 1rem;
}

/* Status colors */
.nc-v2-scheduler-indicator[data-status="running"] sl-icon,
.nc-v2-scheduler-indicator[data-status="healthy"] sl-icon {
  color: var(--sl-color-success-600);
}

.nc-v2-scheduler-indicator[data-status="idle"] sl-icon {
  color: var(--sl-color-primary-600);
}

.nc-v2-scheduler-indicator[data-status="warning"] sl-icon {
  color: var(--sl-color-warning-600);
}

.nc-v2-scheduler-indicator[data-status="stopped"] sl-icon,
.nc-v2-scheduler-indicator[data-status="not_started"] sl-icon {
  color: var(--sl-color-danger-600);
}

.nc-v2-scheduler-indicator[data-status="unknown"] sl-icon {
  color: var(--sl-color-neutral-400);
}

.nc-v2-scheduler-details {
  margin-top: 6px;
  color: var(--sl-color-neutral-500);
  font-size: 0.85rem;
  text-align: center;
}

/* Source health card - full width */
.nc-v2-source-health-card {
  width: 100%;
}

/* Queue tab - failed jobs card full width */
sl-tab-panel[name="queue"] > sl-card {
  width: 100%;
}

/* 4-column variant for queue tab */
.nc-v2-queue-stats-4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Tables */
.nc-v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Prevent layout shift during table updates */
#nc-v2-articles-table {
  min-height: 200px;
}

#nc-v2-articles-table tbody {
  transition: opacity 0.15s ease-out;
}

#nc-v2-articles-table tbody.nc-v2-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Prevent layout shift during sources table updates */
#nc-v2-sources-table {
  min-height: 200px;
}

#nc-v2-sources-table tbody {
  transition: opacity 0.15s ease-out;
}

#nc-v2-sources-table tbody.nc-v2-loading {
  opacity: 0.5;
  pointer-events: none;
}

.nc-v2-table th,
.nc-v2-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--sl-color-neutral-200);
}

.nc-v2-table th {
  background: var(--sl-color-neutral-100);
  font-weight: 600;
  position: sticky;
  top: -20px; /* Offset for the tab panel padding */
  z-index: 1;
}

.nc-v2-table tr:hover {
  background: var(--sl-color-neutral-50);
}

.nc-v2-table td sl-badge {
  white-space: nowrap;
}

/* Clickable article title */
.nc-v2-article-title {
  cursor: pointer;
  color: var(--sl-color-primary-600);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-v2-article-title:hover {
  text-decoration: underline;
}

/* Type tags column */
.nc-v2-type-tags {
  max-width: 200px;
}

.nc-v2-type-tags sl-tag {
  margin: 1px;
  font-size: 0.7rem;
}

.nc-v2-type-tags sl-tag::part(base) {
  padding: 2px 6px;
  height: auto;
}

/* Filter bar */
.nc-v2-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.nc-v2-filter-bar sl-select,
.nc-v2-filter-bar sl-input {
  min-width: 150px;
}

.nc-v2-filter-bar sl-button {
  flex-shrink: 0;
}

/* Company filter autocomplete in filter bar */
.nc-v2-filter-company {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.nc-v2-filter-company label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-color-neutral-700);
  margin-bottom: 4px;
}

/*
 * Autocomplete styling to match Shoelace inputs
 * Applies to all autocomplete instances within NC-V2 module
 * Using !important to override news-articles.css global styles
 */
#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-input {
  height: 40px !important;
  padding: 0 2.5rem !important;
  border: solid 1px var(--sl-input-border-color, #ccc) !important;
  border-radius: var(--sl-input-border-radius-medium, 4px) !important;
  font-size: var(--sl-input-font-size-medium, 1rem) !important;
  font-family: var(--sl-font-sans) !important;
  color: var(--sl-input-color, #333) !important;
  background-color: var(--sl-input-background-color, #fff) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-input:hover {
  border-color: var(--sl-input-border-color-hover, #999) !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-input:focus {
  outline: none !important;
  border-color: var(--sl-color-primary-500, #0ea5e9) !important;
  box-shadow: 0 0 0 3px var(--sl-color-primary-100, rgba(14, 165, 233, 0.2)) !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-input::placeholder {
  color: var(--sl-input-placeholder-color, #999) !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget .input-icon {
  color: var(--sl-color-neutral-500, #666) !important;
  height: 40px !important;
  line-height: 40px !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget .clear-btn {
  color: var(--sl-color-neutral-500, #666) !important;
  font-size: 0.75rem !important;
  height: 40px !important;
  line-height: 40px !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget .clear-btn:hover {
  color: var(--sl-color-neutral-700, #333) !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-autocomplete-wrapper,
sl-dialog .autocomplete-searchbar-widget-autocomplete-wrapper {
  border-radius: var(--sl-border-radius-medium, 4px) !important;
  border: solid 1px var(--sl-panel-border-color, #ddd) !important;
  box-shadow: var(--sl-shadow-large) !important;
  margin-top: 4px !important;
}

/* Ignore companies - inline delete status indicator (spinner/checkmark) */
.nc-v2-ignore-delete-status {
  display: inline-block;
  width: 22px;
  text-align: center;
  vertical-align: middle;
}

/* Make confirmation dialog narrower so it doesn't align exactly with the parent dialog */
#nc-v2-ignore-company-confirm-dialog::part(panel) {
  max-width: 420px;
}

/* Allow autocomplete dropdown to overflow out of dialog */
#nc-v2-ignore-company-dialog::part(body),
#nc-v2-ignore-company-dialog::part(panel) {
  overflow: visible !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-autocomplete-wrapper:empty,
sl-dialog .autocomplete-searchbar-widget-autocomplete-wrapper:empty {
  display: none !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-autocomplete-item,
sl-dialog .autocomplete-searchbar-widget-autocomplete-item {
  display: block !important;
  padding: 6px 10px !important;
  font-size: var(--sl-font-size-small, 0.8rem) !important;
}

#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-autocomplete-item:hover,
#mode-wrapper-nc-v2 .autocomplete-searchbar-widget-autocomplete-item.active,
sl-dialog .autocomplete-searchbar-widget-autocomplete-item:hover,
sl-dialog .autocomplete-searchbar-widget-autocomplete-item.active {
  background-color: var(--sl-color-primary-50, #f0f9ff) !important;
}

/* Table header (above table with totals/pagination) */
.nc-v2-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--sl-color-neutral-50);
  border: 1px solid var(--sl-color-neutral-200);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  color: var(--sl-color-neutral-600);
}

.nc-v2-table-header + .nc-v2-table {
  border-radius: 0 0 4px 4px;
}

/* Pagination */
.nc-v2-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 0;
}

.nc-v2-pagination span {
  color: var(--sl-color-neutral-600);
}

/* Toolbar */
.nc-v2-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.nc-v2-toolbar-buttons {
  display: flex;
  gap: 8px;
}

/* Source detail drawer */
.nc-v2-source-info,
.nc-v2-source-stats {
  margin-bottom: 20px;
}

.nc-v2-source-info h3 {
  margin-top: 0;
}

.nc-v2-source-info p,
.nc-v2-source-stats p {
  margin: 8px 0;
}

.nc-v2-source-stats h4 {
  margin-bottom: 12px;
  color: var(--sl-color-neutral-600);
}

/* Article drawer */
#nc-v2-article-drawer::part(body) {
  padding: 20px;
}

#nc-v2-article-content h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

#nc-v2-article-content .article-meta {
  display: flex;
  gap: 16px;
  color: var(--sl-color-neutral-500);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

#nc-v2-article-content .article-meta a {
  color: var(--sl-color-primary-600);
}

#nc-v2-article-excerpt {
  background: var(--sl-color-neutral-50);
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  line-height: 1.6;
}

#nc-v2-article-content h4 {
  margin-top: 20px;
  margin-bottom: 12px;
  color: var(--sl-color-neutral-600);
  font-size: 0.875rem;
  text-transform: uppercase;
}

#nc-v2-article-hints {
  background: var(--sl-color-neutral-50);
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

#nc-v2-article-hints p {
  margin: 4px 0;
  font-size: 0.875rem;
}

#nc-v2-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Unmatched by source details */
sl-details.nc-v2-unmatched-details {
  margin-bottom: 20px;
}

sl-details.nc-v2-unmatched-details::part(summary) {
  font-weight: 600;
}

/* Search row inside unmatched details */
.nc-v2-unmatched-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sl-color-neutral-200);
}

.nc-v2-unmatched-search-row sl-input {
  flex: 1;
  max-width: 400px;
}

/* Source hints autocomplete */
.nc-v2-source-hints-autocomplete {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.nc-v2-source-hints-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 350px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.nc-v2-source-hints-section {
  padding: 4px 0;
}

.nc-v2-source-hints-section:not(:last-child) {
  border-bottom: 1px solid var(--sl-color-neutral-100);
}

.nc-v2-source-hints-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sl-color-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 6px;
}

.nc-v2-source-hints-section-header sl-icon {
  font-size: 12px;
}

.nc-v2-source-hints-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--sl-color-neutral-800);
  transition: background-color 0.1s ease;
}

.nc-v2-source-hints-item:hover,
.nc-v2-source-hints-item.active {
  background: var(--sl-color-neutral-100);
}

.nc-v2-hint-icon {
  flex-shrink: 0;
  color: var(--sl-color-neutral-500);
  font-size: 16px;
}

.nc-v2-hint-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-v2-source-hints-item mark {
  background: var(--sl-color-warning-200);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}

.nc-v2-source-hints-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  text-align: center;
  color: var(--sl-color-neutral-500);
  font-size: 14px;
}

.nc-v2-source-hints-empty sl-spinner {
  font-size: 16px;
}

/* Selected hint chip */
.nc-v2-selected-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: var(--sl-color-primary-100);
  color: var(--sl-color-primary-700);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.nc-v2-selected-hint .hint-type {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.7;
}

.nc-v2-selected-hint sl-icon-button {
  font-size: 14px;
}

/* Active search indicator */
.nc-v2-unmatched-details.has-search::part(summary)::after {
  content: ' (filtered)';
  color: var(--sl-color-primary-600);
  font-weight: 500;
}

/* Loaders */
.nc-v2-loader {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.nc-v2-loader sl-spinner {
  font-size: 2rem;
}

/* Card headers with actions */
sl-card .card-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Code display */
.nc-v2-table code {
  font-size: 0.75rem;
  background: var(--sl-color-neutral-100);
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-all;
}

/* Mode wrapper override for nc-v2 */
#mode-wrapper-nc-v2 {
  padding: 0;
  max-width: 100%;
  height: calc(100vh - 100px); /* Account for top navbar + mode selector bar */
  overflow: hidden;
}

/* Manual matching form in article drawer */
.nc-v2-manual-match-form {
  background: var(--sl-color-neutral-50);
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.nc-v2-form-row {
  margin-bottom: 16px;
}

.nc-v2-form-row:last-child {
  margin-bottom: 0;
}

.nc-v2-form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--sl-color-neutral-700);
}

.nc-v2-form-row sl-select {
  width: 100%;
}

.nc-v2-form-row #nc-v2-article-company-autocomplete {
  width: 100%;
}

/* Allow autocomplete dropdown to overflow dialog */
#nc-v2-alias-dialog::part(panel) {
  overflow: visible;
}

#nc-v2-alias-dialog::part(body) {
  overflow: visible;
}

#nc-v2-alias-company-autocomplete {
  position: relative;
  width: 100%;
}

/* Allow autocomplete dropdown to overflow ticker-match-only dialog */
#nc-v2-ticker-match-only-dialog::part(panel) {
  overflow: visible;
}

#nc-v2-ticker-match-only-dialog::part(body) {
  overflow: visible;
}

#nc-v2-ticker-match-only-company-autocomplete {
  position: relative;
  width: 100%;
}

.nc-v2-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

/* Bulk actions bar */
.nc-v2-bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--sl-color-primary-50);
  border: 1px solid var(--sl-color-primary-200);
  border-radius: 4px;
  margin-bottom: 12px;
}

.nc-v2-bulk-actions #nc-v2-selected-count {
  font-weight: 600;
  color: var(--sl-color-primary-700);
  margin-right: 8px;
}

/* ============================================================================
   WEB SCRAPER WIZARD
   ============================================================================ */

.nc-v2-scraper-wizard {
  max-width: 1200px;
  margin: 0 auto;
}

/* Step indicator */
.nc-v2-scraper-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 16px 0;
}

.nc-v2-scraper-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  background: var(--sl-color-neutral-100);
  color: var(--sl-color-neutral-500);
  font-size: 14px;
  transition: all 0.2s ease;
}

.nc-v2-scraper-step .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sl-color-neutral-300);
  color: white;
  font-weight: 600;
  font-size: 12px;
}

.nc-v2-scraper-step.active {
  background: var(--sl-color-primary-100);
  color: var(--sl-color-primary-700);
}

.nc-v2-scraper-step.active .step-number {
  background: var(--sl-color-primary-600);
}

.nc-v2-scraper-step.completed {
  background: var(--sl-color-success-100);
  color: var(--sl-color-success-700);
}

.nc-v2-scraper-step.completed .step-number {
  background: var(--sl-color-success-600);
}

/* Scraper panels */
.nc-v2-scraper-panel sl-card {
  margin-bottom: 20px;
}

.nc-v2-scraper-panel sl-card p {
  color: var(--sl-color-neutral-600);
  margin-bottom: 16px;
}

/* Layout for step 2 */
.nc-v2-scraper-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

.nc-v2-scraper-selectors-card {
  grid-column: 1;
}

.nc-v2-scraper-preview-card {
  grid-column: 2;
}

.nc-v2-scraper-hint {
  font-size: 13px;
  color: var(--sl-color-neutral-500);
  line-height: 1.5;
}

/* Actions bar */
.nc-v2-scraper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sl-color-neutral-200);
}

/* Test results */
.nc-v2-scraper-test-summary {
  margin-bottom: 24px;
}

.nc-v2-scraper-test-stats {
  display: flex;
  gap: 24px;
}

.nc-v2-scraper-test-stats div {
  text-align: center;
  padding: 16px 24px;
  background: var(--sl-color-primary-50);
  border-radius: 8px;
}

.nc-v2-scraper-test-stats strong {
  display: block;
  font-size: 2rem;
  color: var(--sl-color-primary-600);
}

.nc-v2-scraper-test-stats span {
  font-size: 14px;
  color: var(--sl-color-neutral-600);
}

/* Article preview cards */
.nc-v2-scraper-article-preview {
  background: var(--sl-color-neutral-50);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.15s ease;
}

/* Selectable article previews */
.nc-v2-scraper-article-preview.nc-v2-selectable {
  cursor: pointer;
}

.nc-v2-scraper-article-preview.nc-v2-selectable:hover {
  border-color: var(--sl-color-primary-300);
  background: var(--sl-color-primary-50);
}

.nc-v2-scraper-article-preview.nc-v2-selected {
  border-color: var(--sl-color-primary-500);
  background: var(--sl-color-primary-50);
  box-shadow: 0 0 0 2px var(--sl-color-primary-200);
}

.nc-v2-scraper-article-preview .nc-v2-select-indicator {
  margin-left: auto;
  color: var(--sl-color-neutral-400);
}

.nc-v2-scraper-article-preview.nc-v2-selected .nc-v2-select-indicator {
  color: var(--sl-color-primary-600);
}

.nc-v2-scraper-article-preview .preview-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.nc-v2-scraper-article-preview .preview-header strong {
  flex: 1;
}

.nc-v2-scraper-article-preview .preview-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sl-color-primary-600);
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.nc-v2-scraper-article-preview .preview-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--sl-color-neutral-500);
  margin-bottom: 8px;
}

.nc-v2-scraper-article-preview .preview-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nc-v2-scraper-article-preview .preview-excerpt {
  font-size: 13px;
  color: var(--sl-color-neutral-600);
  line-height: 1.5;
  margin: 0;
}

/* Detail results preview */
.nc-v2-detail-results h5 {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--sl-color-neutral-700);
}

/* Scraper warnings */
#nc-v2-scraper-warnings sl-alert {
  margin-bottom: 12px;
}

#nc-v2-scraper-warnings sl-alert ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

#nc-v2-scraper-warnings sl-alert li {
  margin-bottom: 8px;
}

#nc-v2-scraper-warnings sl-alert code {
  font-size: 0.75rem;
  background: var(--sl-color-neutral-100);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Config preview */
#nc-v2-scraper-config-preview {
  background: var(--sl-color-neutral-50);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 4px;
  padding: 12px;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}

/* ============================================================================
   FETCH PROGRESS PANEL
   ============================================================================ */

.nc-v2-fetch-progress-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  display: none;
}

.nc-v2-fetch-progress-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--sl-color-primary-600);
  color: white;
  font-weight: 600;
}

.nc-v2-fetch-progress-panel.completed .nc-v2-fetch-progress-header {
  background: var(--sl-color-success-600);
}

.nc-v2-fetch-progress-panel.error .nc-v2-fetch-progress-header {
  background: var(--sl-color-danger-600);
}

.nc-v2-fetch-progress-header sl-icon {
  font-size: 1.25rem;
}

.nc-v2-fetch-progress-header sl-icon.spin {
  animation: nc-v2-spin 1s linear infinite;
}

@keyframes nc-v2-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nc-v2-fetch-progress-panel.completed .nc-v2-fetch-progress-header sl-icon.spin,
.nc-v2-fetch-progress-panel.error .nc-v2-fetch-progress-header sl-icon.spin {
  animation: none;
}

.nc-v2-fetch-progress-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-v2-fetch-progress-content {
  padding: 16px;
}

.nc-v2-fetch-progress-message {
  font-size: 14px;
  color: var(--sl-color-neutral-700);
  margin-bottom: 12px;
  line-height: 1.4;
}

.nc-v2-fetch-progress-content sl-progress-bar {
  margin-bottom: 8px;
}

.nc-v2-fetch-progress-content sl-progress-bar::part(base) {
  height: 8px;
  border-radius: 4px;
}

.nc-v2-fetch-progress-content sl-progress-bar::part(indicator) {
  border-radius: 4px;
}

.nc-v2-fetch-progress-details {
  font-size: 12px;
  color: var(--sl-color-neutral-500);
  text-align: right;
}

/* Source actions cell - aligned button groups */
.nc-v2-source-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-v2-source-actions-primary {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 100px; /* Ensure consistent width for Fetch/Backfill buttons */
}

.nc-v2-source-actions-secondary {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ensure button groups don't wrap */
.nc-v2-source-actions sl-button-group {
  flex-shrink: 0;
}

/* Exchange company multi-select */
.nc-v2-exchange-company-multiselect {
  margin-bottom: 8px;
}

.nc-v2-selected-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.nc-v2-selected-companies sl-tag {
  font-size: 0.8rem;
}

.nc-v2-selected-companies sl-tag::part(base) {
  padding: 4px 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nc-v2-status-cards {
    flex-direction: column;
  }

  .nc-v2-queue-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .nc-v2-filter-bar {
    flex-direction: column;
  }

  .nc-v2-filter-bar sl-select,
  .nc-v2-filter-bar sl-input {
    width: 100%;
  }

  .nc-v2-scraper-steps {
    flex-wrap: wrap;
  }

  .nc-v2-scraper-step .step-label {
    display: none;
  }

  .nc-v2-scraper-layout {
    grid-template-columns: 1fr;
  }

  .nc-v2-scraper-preview-card {
    grid-column: 1;
  }

  /* Progress panel full width on mobile */
  .nc-v2-fetch-progress-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }
}

/* ============================================================================
   ACTIVITY / LOGS TAB
   ============================================================================ */

/* Event counts summary */
.nc-v2-event-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}

.nc-v2-event-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nc-v2-event-count strong {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sl-color-neutral-900);
}

.nc-v2-event-count span {
  font-size: 0.8rem;
  color: var(--sl-color-neutral-500);
  text-transform: uppercase;
}

.nc-v2-event-count[data-type="error"] strong {
  color: var(--sl-color-danger-600);
}

.nc-v2-event-count[data-type="processed"] strong {
  color: var(--sl-color-success-600);
}

.nc-v2-event-count[data-type="duplicate_attempt"] strong {
  color: var(--sl-color-neutral-500);
}

/* Activity filters */
.nc-v2-activity-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Activity content - force single column layout */
.nc-v2-activity-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Errors card */
.nc-v2-errors-card {
  width: 100%;
}

.nc-v2-error-message {
  font-size: 0.75rem;
  background: var(--sl-color-danger-50);
  color: var(--sl-color-danger-700);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-word;
}

/* Empty state for errors */
.nc-v2-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 8px;
  color: var(--sl-color-neutral-500);
}

/* Activity feed */
.nc-v2-activity-feed-card {
  width: 100%;
}

.nc-v2-activity-table {
  font-size: 0.85rem;
}

.nc-v2-activity-table tbody tr:hover {
  background: var(--sl-color-neutral-50);
}

.nc-v2-event-details {
  position: relative;
  padding-right: 36px;
}

.nc-v2-event-details-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sl-color-neutral-600);
  font-size: 0.8rem;
  display: block;
}

.nc-v2-event-details sl-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nc-v2-activity-pagination {
  text-align: center;
  padding: 16px;
}

/* Event detail dialog */
.nc-v2-event-detail-dialog::part(panel) {
  max-width: 600px;
}

.nc-v2-event-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nc-v2-event-detail-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.nc-v2-event-detail-row strong {
  min-width: 100px;
  color: var(--sl-color-neutral-600);
}

.nc-v2-event-json {
  background: var(--sl-color-neutral-100);
  padding: 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  overflow: auto;
  max-height: 300px;
  margin: 8px 0 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Responsive adjustments for Activity tab */
@media (max-width: 768px) {
  .nc-v2-event-counts {
    grid-template-columns: repeat(2, 1fr);
  }

  .nc-v2-activity-filters {
    flex-wrap: wrap;
  }

  .nc-v2-activity-table th:nth-child(5),
  .nc-v2-activity-table td:nth-child(5) {
    display: none;
  }
}

/* ============================================================================
   CONFIG TAB - TAG RULES & ALIASES
   ============================================================================ */

/* Tag filters toolbar */
.nc-v2-tag-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nc-v2-tag-filters sl-select {
  min-width: 150px;
}

/* Tag count badges */
.nc-v2-tag-counts {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.nc-v2-tag-count-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--sl-color-neutral-100);
  color: var(--sl-color-neutral-700);
  text-transform: capitalize;
}

.nc-v2-tag-count-badge[data-category="country"] {
  background: var(--sl-color-blue-100);
  color: var(--sl-color-blue-700);
}

.nc-v2-tag-count-badge[data-category="region"] {
  background: var(--sl-color-green-100);
  color: var(--sl-color-green-700);
}

.nc-v2-tag-count-badge[data-category="commodity"] {
  background: var(--sl-color-amber-100);
  color: var(--sl-color-amber-700);
}

.nc-v2-tag-count-badge[data-category="type"] {
  background: var(--sl-color-purple-100);
  color: var(--sl-color-purple-700);
}

/* Category badges in table */
.nc-v2-category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.nc-v2-category-country {
  background: var(--sl-color-blue-100);
  color: var(--sl-color-blue-700);
}

.nc-v2-category-region {
  background: var(--sl-color-green-100);
  color: var(--sl-color-green-700);
}

.nc-v2-category-commodity {
  background: var(--sl-color-amber-100);
  color: var(--sl-color-amber-700);
}

.nc-v2-category-type {
  background: var(--sl-color-purple-100);
  color: var(--sl-color-purple-700);
}

/* Pattern cell truncation */
.nc-v2-pattern-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-size: 0.8rem;
}

/* Tag rule dialog form */
#nc-v2-tag-rule-dialog .nc-v2-form-row-inline {
  display: flex;
  gap: 16px;
  align-items: center;
}

#nc-v2-tag-rule-dialog .nc-v2-form-row-inline > div {
  flex: 1;
}

#nc-v2-tag-rule-dialog sl-details {
  margin-top: 16px;
}

/* Aliases table */
#nc-v2-aliases-table code {
  font-size: 0.75rem;
  color: var(--sl-color-neutral-600);
}

/* Config tabs nested styling */
#nc-v2-config-tabs {
  margin-top: -8px;
}

#nc-v2-config-tabs sl-tab-panel {
  padding-top: 16px;
}

/* Tag Tester */
.nc-v2-tag-tester {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.nc-v2-tag-tester-inputs {
  background: var(--sl-color-neutral-50);
  border-radius: 8px;
  padding: 16px;
}

.nc-v2-tag-tester-inputs h4 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: var(--sl-color-neutral-800);
}

.nc-v2-tag-tester-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.nc-v2-tag-tester-results {
  background: var(--sl-color-neutral-50);
  border-radius: 8px;
  padding: 16px;
  max-height: 600px;
  overflow-y: auto;
}

.nc-v2-tag-tester-results h4 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: var(--sl-color-neutral-800);
}

.nc-v2-tag-tester-results h5 {
  margin: 16px 0 8px 0;
  font-size: 0.9rem;
  color: var(--sl-color-neutral-700);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nc-v2-tag-tester-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.nc-v2-tag-tester-summary .summary-item {
  background: white;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.nc-v2-tag-tester-summary .summary-item strong {
  color: var(--sl-color-primary-600);
}

.nc-v2-tag-tester-section {
  margin-bottom: 16px;
}

.nc-v2-tag-match-card {
  background: white;
  border: 1px solid var(--sl-color-success-300);
  border-left: 4px solid var(--sl-color-success-500);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.nc-v2-tag-match-card .tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.nc-v2-tag-match-card .tag-name {
  font-weight: 600;
  color: var(--sl-color-success-700);
}

.nc-v2-tag-match-card .tag-category {
  font-size: 0.75rem;
  color: var(--sl-color-neutral-500);
  background: var(--sl-color-neutral-100);
  padding: 2px 6px;
  border-radius: 3px;
}

.nc-v2-tag-match-card .tag-details {
  font-size: 0.8rem;
  color: var(--sl-color-neutral-600);
}

.nc-v2-tag-match-card .tag-details code {
  background: var(--sl-color-neutral-100);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 0.75rem;
}

.nc-v2-tag-match-card .match-location {
  margin-top: 4px;
  font-style: italic;
  color: var(--sl-color-neutral-500);
}

.nc-v2-tag-match-card .match-context {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--sl-color-neutral-50);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: monospace;
  color: var(--sl-color-neutral-600);
  word-break: break-word;
  line-height: 1.4;
}

.nc-v2-tag-match-card .match-context mark.context-match {
  background: var(--sl-color-warning-200);
  color: var(--sl-color-neutral-900);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

.nc-v2-tag-unmatch-card {
  background: white;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.nc-v2-tag-unmatch-card .tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nc-v2-tag-unmatch-card .tag-name {
  font-weight: 500;
  color: var(--sl-color-neutral-700);
}

.nc-v2-tag-unmatch-card .tag-reason {
  font-size: 0.75rem;
  color: var(--sl-color-neutral-500);
  margin-top: 4px;
}

/* Tag tester collapsible sections */
#nc-v2-tag-tester-matched-details,
#nc-v2-tag-tester-unmatched-details,
#nc-v2-tag-tester-normalized-details {
  margin-bottom: 12px;
}

#nc-v2-tag-tester-matched-details [slot="summary"],
#nc-v2-tag-tester-unmatched-details [slot="summary"] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

#nc-v2-tag-tester-matched-details [slot="summary"] sl-icon,
#nc-v2-tag-tester-unmatched-details [slot="summary"] sl-icon {
  font-size: 1rem;
}

.nc-v2-tag-tester-normalized {
  font-size: 0.85rem;
}

.nc-v2-norm-section {
  margin-bottom: 16px;
}

.nc-v2-norm-section strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sl-color-neutral-700);
}

.nc-v2-norm-content {
  display: block;
  background: white;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid var(--sl-color-neutral-200);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

.nc-v2-norm-body-full {
  overflow-y: auto;
}

/* Tag highlight colors by category */
.nc-v2-tag-highlight {
  padding: 1px 3px;
  border-radius: 3px;
  cursor: help;
  font-weight: 500;
  position: relative;
}

.nc-v2-tag-highlight-commodity {
  background-color: #fff3cd;
  border-bottom: 2px solid #ffc107;
}

.nc-v2-tag-highlight-country {
  background-color: #cce5ff;
  border-bottom: 2px solid #007bff;
}

.nc-v2-tag-highlight-region {
  background-color: #d4edda;
  border-bottom: 2px solid #28a745;
}

.nc-v2-tag-highlight-type {
  background-color: #f8d7da;
  border-bottom: 2px solid #dc3545;
}

/* Filtered out type tags - gray styling */
.nc-v2-tag-highlight-filtered {
  background-color: #e9ecef;
  border-bottom: 2px dashed #6c757d;
}

/* Custom tooltip for tag highlights */
.nc-v2-tag-highlight::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: normal;
  white-space: pre-line;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  min-width: 150px;
  max-width: 300px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Default: show tooltip above */
.nc-v2-tag-highlight:not(.tooltip-below)::after {
  bottom: 100%;
  margin-bottom: 4px;
}

/* Show tooltip below when near top of container */
.nc-v2-tag-highlight.tooltip-below::after {
  top: 100%;
  bottom: auto;
  margin-top: 4px;
}

.nc-v2-tag-highlight:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Ensure the body container allows overflow for tooltips */
.nc-v2-norm-body-full {
  overflow: visible !important;
}

.nc-v2-norm-content {
  position: relative;
  overflow: visible;
}

/* Tag tester legend */
.nc-v2-tag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: var(--sl-color-neutral-50);
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.nc-v2-tag-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nc-v2-tag-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
}

.nc-v2-tag-legend-color.commodity {
  background-color: #fff3cd;
  border-bottom: 2px solid #ffc107;
}

.nc-v2-tag-legend-color.country {
  background-color: #cce5ff;
  border-bottom: 2px solid #007bff;
}

.nc-v2-tag-legend-color.region {
  background-color: #d4edda;
  border-bottom: 2px solid #28a745;
}

.nc-v2-tag-legend-color.type {
  background-color: #f8d7da;
  border-bottom: 2px solid #dc3545;
}

.nc-v2-tag-legend-color.filtered {
  background-color: #e9ecef;
  border-bottom: 2px dashed #6c757d;
}

.nc-v2-tag-tester-normalized > div {
  margin-bottom: 12px;
}

/* Empty state for tag tester */
.nc-v2-tag-tester-empty {
  text-align: center;
  color: var(--sl-color-neutral-500);
  padding: 20px;
  font-style: italic;
}

@media (max-width: 1200px) {
  .nc-v2-tag-tester {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Article Preview Modal
   Emulates the styling from the main app's article page
   ============================================================================ */

/* Make the dialog wider and taller */
.nc-v2-article-preview-modal::part(panel) {
  max-height: 90vh;
}

.nc-v2-article-preview-modal::part(body) {
  padding: 0;
  overflow: hidden;
}

/* Preview content container */
.nc-v2-preview-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(90vh - 140px);
}

/* Preview header - matching main app styling */
.nc-v2-preview-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--sl-color-neutral-200);
  flex-shrink: 0;
}

.nc-v2-preview-date {
  font-size: 12px;
  letter-spacing: 0px;
  color: #9296ad;
  margin-bottom: 8px;
}

.nc-v2-preview-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.nc-v2-preview-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.nc-v2-preview-source {
  font-size: 13px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 4px;
}

.nc-v2-preview-company {
  font-size: 13px;
  font-weight: 500;
  color: #0091af;
}

/* Preview body - scrollable article content */
.nc-v2-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 32px;
}

/* Article content styling - emulating main app's .article-excerpt */
.nc-v2-preview-body.article-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}

/* Style common HTML elements in article content */
.nc-v2-preview-body h1,
.nc-v2-preview-body h2,
.nc-v2-preview-body h3,
.nc-v2-preview-body h4,
.nc-v2-preview-body h5,
.nc-v2-preview-body h6 {
  color: #1f2937;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.nc-v2-preview-body h1 { font-size: 1.75em; }
.nc-v2-preview-body h2 { font-size: 1.5em; }
.nc-v2-preview-body h3 { font-size: 1.25em; }
.nc-v2-preview-body h4 { font-size: 1.1em; }

.nc-v2-preview-body p {
  margin: 0 0 1em 0;
}

.nc-v2-preview-body ul,
.nc-v2-preview-body ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
}

.nc-v2-preview-body li {
  margin-bottom: 0.5em;
}

.nc-v2-preview-body a {
  color: #0091af;
  text-decoration: none;
}

.nc-v2-preview-body a:hover {
  text-decoration: underline;
}

.nc-v2-preview-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1em 0;
}

.nc-v2-preview-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}

.nc-v2-preview-body th,
.nc-v2-preview-body td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
}

.nc-v2-preview-body th {
  background: #f9fafb;
  font-weight: 600;
}

.nc-v2-preview-body tr:nth-child(even) {
  background: #f9fafb;
}

.nc-v2-preview-body blockquote {
  margin: 1em 0;
  padding: 12px 20px;
  border-left: 4px solid #0091af;
  background: #f0f9ff;
  color: #1e40af;
  font-style: italic;
}

.nc-v2-preview-body pre,
.nc-v2-preview-body code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  background: #f3f4f6;
  border-radius: 4px;
}

.nc-v2-preview-body pre {
  padding: 12px 16px;
  overflow-x: auto;
  margin: 1em 0;
}

.nc-v2-preview-body code {
  padding: 2px 6px;
}

.nc-v2-preview-body pre code {
  padding: 0;
  background: none;
}

/* Placeholder when no content */
.nc-v2-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--sl-color-neutral-400);
  text-align: center;
}

.nc-v2-preview-placeholder p {
  margin-top: 12px;
  font-size: 14px;
}

/* Article actions row in drawer */
.nc-v2-article-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================================
   LOGS TAB STYLES
   ============================================================================ */

/* Full width for all cards in logs tab */
sl-tab-panel[name="logs"] > sl-card,
sl-tab-panel[name="logs"] > .nc-v2-status-cards {
  width: 100%;
}

.nc-v2-logs-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sl-color-neutral-200);
}

.nc-v2-logs-filters sl-select {
  min-width: 150px;
}

.nc-v2-logs-stream-card {
  margin-top: 16px;
  width: 100%;
}

.nc-v2-logs-status {
  display: flex;
  gap: 8px;
}

.nc-v2-logs-container {
  background: #1e1e1e;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

.nc-v2-logs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
  text-align: center;
}

.nc-v2-logs-empty sl-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.nc-v2-logs-entries {
  padding: 8px 0;
  width: 100%;
}

.nc-v2-log-entry {
  padding: 4px 12px;
  display: flex;
  gap: 8px;
  line-height: 1.4;
  border-bottom: 1px solid #2a2a2a;
  width: 100%;
  box-sizing: border-box;
}

.nc-v2-log-entry:hover {
  background: #2a2a2a;
}

.nc-v2-log-entry .log-time {
  color: #666;
  flex-shrink: 0;
  width: 85px;
}

.nc-v2-log-entry .log-level {
  flex-shrink: 0;
  width: 50px;
  font-weight: 600;
  text-transform: uppercase;
}

.nc-v2-log-entry .log-level.debug {
  color: #888;
}

.nc-v2-log-entry .log-level.info {
  color: #4fc3f7;
}

.nc-v2-log-entry .log-level.warn {
  color: #ffb74d;
}

.nc-v2-log-entry .log-level.error {
  color: #ef5350;
}

.nc-v2-log-entry .log-component {
  color: #9575cd;
  flex-shrink: 0;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-v2-log-entry .log-message {
  color: #d4d4d4;
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-v2-log-entry .log-data {
  color: #888;
  font-size: 11px;
  margin-left: 4px;
}

.nc-v2-log-entry.clickable {
  cursor: pointer;
}

.nc-v2-log-entry.clickable:hover {
  background: #333;
}

/* Load more button container */
.nc-v2-logs-load-more {
  display: flex;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid var(--sl-color-neutral-200);
}

/* Log detail dialog styles */
.nc-v2-log-detail {
  font-size: 14px;
}

.nc-v2-log-detail-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-v2-log-detail-row strong {
  min-width: 100px;
  color: var(--sl-color-neutral-600);
}

.nc-v2-log-detail-data {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  overflow-x: auto;
}

.nc-v2-log-detail-data pre {
  margin: 0;
  color: #d4d4d4;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Level badges for detail dialog */
.nc-v2-log-level-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.nc-v2-log-level-badge.debug {
  background: #e0e0e0;
  color: #616161;
}

.nc-v2-log-level-badge.info {
  background: #e3f2fd;
  color: #1565c0;
}

.nc-v2-log-level-badge.warn {
  background: #fff3e0;
  color: #e65100;
}

.nc-v2-log-level-badge.error {
  background: #ffebee;
  color: #c62828;
}

/* Job details section in log detail dialog */
.nc-v2-log-detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sl-color-neutral-200);
}

.nc-v2-log-detail-section-header {
  margin-bottom: 12px;
  color: var(--sl-color-neutral-700);
}

.nc-v2-log-job-details {
  background: var(--sl-color-neutral-50);
  border-radius: 6px;
  padding: 12px;
}

.nc-v2-log-job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.nc-v2-log-job-field {
  display: flex;
  gap: 8px;
}

.nc-v2-log-job-field .label {
  color: var(--sl-color-neutral-500);
  font-size: 12px;
  min-width: 70px;
}

.nc-v2-log-job-field .value {
  font-size: 13px;
  color: var(--sl-color-neutral-800);
}

.nc-v2-log-job-field .value.error {
  color: var(--sl-color-danger-600);
}

.nc-v2-log-job-error-field {
  grid-column: 1 / -1;
}

.nc-v2-log-job-not-found,
.nc-v2-log-job-error {
  color: var(--sl-color-neutral-500);
  font-style: italic;
  font-size: 13px;
}

.nc-v2-log-job-raw {
  margin-top: 12px;
  font-size: 12px;
}

.nc-v2-log-job-raw summary {
  cursor: pointer;
  color: var(--sl-color-primary-600);
  font-weight: 500;
  padding: 4px 0;
}

.nc-v2-log-job-raw summary:hover {
  color: var(--sl-color-primary-700);
}

.nc-v2-log-job-raw pre {
  margin-top: 8px;
  background: #1e1e1e;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  color: #d4d4d4;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* Clear logs modal options */
.nc-v2-clear-option {
  transition: all 0.15s ease;
  cursor: pointer;
  width: 100%;
}

.nc-v2-clear-option:hover {
  border-color: var(--sl-color-primary-300);
  background: var(--sl-color-primary-50);
}

.nc-v2-clear-option::part(base) {
  transition: all 0.15s ease;
}

.nc-v2-clear-option:hover::part(base) {
  border-color: var(--sl-color-primary-400);
}

.nc-v2-clear-option.selected {
  border-color: var(--sl-color-primary-500);
  background: var(--sl-color-primary-50);
}

.nc-v2-clear-option.selected::part(base) {
  border-color: var(--sl-color-primary-500);
  box-shadow: 0 0 0 2px var(--sl-color-primary-200);
}

/* Hide the radio button circle since we're using card selection */
#nc-v2-clear-logs-dialog sl-radio::part(control) {
  display: none;
}

#nc-v2-clear-logs-dialog sl-radio {
  --sl-spacing-small: 0;
}

/* Help text for config panels */
.nc-v2-help-text {
  color: var(--sl-color-neutral-500);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ===== Logs Filter Drawer Styles ===== */
.nc-v2-logs-filter-drawer::part(panel) {
  width: 380px;
}

.nc-v2-logs-filter-drawer::part(body) {
  padding: 0;
  overflow-x: hidden;
}

.nc-v2-logs-filter-drawer::part(footer) {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

.nc-v2-filter-drawer-content {
  padding: 20px;
}

.nc-v2-filter-section {
  margin-bottom: 20px;
}

.nc-v2-filter-section:last-child {
  margin-bottom: 0;
}

.nc-v2-filter-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

.nc-v2-filter-section sl-radio-group {
  width: 100%;
}

.nc-v2-filter-section sl-radio-button::part(button) {
  font-size: 12px;
  padding: 4px 10px;
}

.nc-v2-filter-section sl-select {
  width: 100%;
}

.nc-v2-filter-custom-dates {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.nc-v2-filter-custom-dates sl-input {
  flex: 1;
}

.nc-v2-filter-drawer-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.nc-v2-filter-drawer-footer sl-button {
  flex: 1;
}

/* Filter button badge */
#nc-v2-logs-filter-btn {
  position: relative;
}

#nc-v2-logs-filter-btn sl-badge {
  margin-left: 8px;
}

#nc-v2-logs-filter-badge {
  font-size: 11px;
  min-width: 18px;
  height: 18px;
}