/* ============================================================
   NETSCRAPPER — UI Polish Layer (v1)
   Pure enhancement: presentation, motion and accessibility
   overrides on top of the existing design system. No structural
   changes — everything degrades gracefully.
   ============================================================ */

/* U1 · Design tokens for the polish layer */
:root {
  --polish-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --polish-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --polish-fast: 0.14s;
  --polish-med: 0.25s;
  --polish-slow: 0.45s;
  --polish-ring: rgba(220, 38, 38, 0.35);
  --polish-radius-card: 12px;
  --polish-radius-ctl: 8px;
  --polish-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --polish-shadow-2: 0 8px 28px rgba(0, 0, 0, 0.35);
  --polish-glow-red: 0 0 0 1px rgba(220, 38, 38, 0.25), 0 4px 18px rgba(220, 38, 38, 0.12);
}

/* U2 · Global motion easing — every interactive transition feels intentional */
.btn, .input, .select, .textarea, .panel, .stat-card, .nav-item, .tab,
.quick-filter, .badge, .tag, .card, .template-item, .facet-item, .status-pill {
  transition:
    color var(--polish-fast) var(--polish-ease),
    background-color var(--polish-fast) var(--polish-ease),
    border-color var(--polish-fast) var(--polish-ease),
    box-shadow var(--polish-med) var(--polish-ease),
    transform var(--polish-fast) var(--polish-ease),
    opacity var(--polish-fast) var(--polish-ease);
}

/* U3 · Focus-visible rings — keyboard users always know where they are */
.btn:focus-visible, .input:focus-visible, .select:focus-visible,
.textarea:focus-visible, .quick-filter:focus-visible, .nav-item:focus-visible,
.tab:focus-visible, .template-item:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 2px;
  border-radius: var(--polish-radius-ctl);
}

/* U4 · Input focus: soft glow + border lift */
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* U5 · Buttons: tactile press + subtle lift on hover */
.btn:hover { transform: translateY(-1px); box-shadow: var(--polish-glow-red); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* U6 · Secondary button refined */
.btn-secondary:hover { box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2); }

/* U7 · Panel cards: glass lift + hover halo */
.panel {
  border-radius: var(--polish-radius-card);
  box-shadow: var(--polish-shadow-1);
  position: relative;
}
.panel:hover { box-shadow: var(--polish-shadow-2); }

/* U8 · Panel header polish: stronger hierarchy + divider */
.panel-header {
  letter-spacing: 0.04em;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(220, 38, 38, 0.14);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-subtitle { opacity: 0.65; font-size: 0.78rem; letter-spacing: 0.02em; }

/* U9 · Stat cards: gradient edge + hover raise */
.stat-card {
  border-radius: var(--polish-radius-card);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
  opacity: 0.5;
  transition: opacity var(--polish-med) var(--polish-ease);
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card:hover::before { opacity: 1; }
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; opacity: 0.7; }

/* U10 · Tab bar: animated active pill + hover tint */
.tab {
  position: relative;
  border-radius: var(--polish-radius-ctl) var(--polish-radius-ctl) 0 0;
  cursor: pointer;
  user-select: none;
}
.tab:hover { background: rgba(220, 38, 38, 0.08); }
.tab.active { background: rgba(220, 38, 38, 0.14); box-shadow: inset 0 -2px 0 var(--red); }

/* U11 · Nav items: clean active treatment, remove double highlight */
.nav-item {
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: 0 var(--polish-radius-ctl) var(--polish-radius-ctl) 0;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.04));
  border-left-color: var(--red-bright);
  color: #fff;
}
.nav-item.active .nav-icon { filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6)); }

/* U12 · Sidebar: refined scrollbar + subtle right divider */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, 0.35) transparent;
  border-right: 1px solid rgba(220, 38, 38, 0.1);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(220, 38, 38, 0.3); border-radius: 3px; }

/* U13 · Nav section titles: crisp micro-labels */
.nav-title {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  opacity: 0.55;
  margin-bottom: 6px;
}

/* U14 · Content pane: smooth cross-fade on view switch + scrollbar */
.content {
  animation: polish-fade-in 0.28s var(--polish-ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, 0.3) transparent;
}
.content::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: rgba(220, 38, 38, 0.28); border-radius: 4px; }
.content::-webkit-scrollbar-thumb:hover { background: rgba(220, 38, 38, 0.45); }

@keyframes polish-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* U15 · Tables: consistent geometry + row hover + click affordance */
.table-wrap { border-radius: var(--polish-radius-card); overflow: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; }
.table-wrap th {
  text-align: left;
  padding: 9px 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: rgba(220, 38, 38, 0.9);
  border-bottom: 2px solid rgba(220, 38, 38, 0.25);
  white-space: nowrap;
}
.table-wrap td { padding: 8px 10px; }
.table-wrap tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.table-wrap tbody tr:hover { background: rgba(220, 38, 38, 0.06); }

/* U16 · Generic data-table rows generated inline (report tables) */
tr[onclick] { cursor: pointer; }
tr[onclick]:hover { background: rgba(220, 38, 38, 0.07); }

/* U17 · Scrollable report lists: thin dark scrollbar */
[data-polish-scroll], .content div[style*="overflow-x:auto"], .content div[style*="overflow:auto"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, 0.3) transparent;
}
[data-polish-scroll]::-webkit-scrollbar,
.content div[style*="overflow-x:auto"]::-webkit-scrollbar,
.content div[style*="overflow:auto"]::-webkit-scrollbar { height: 7px; width: 7px; }
[data-polish-scroll]::-webkit-scrollbar-thumb,
.content div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
.content div[style*="overflow:auto"]::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.3); border-radius: 4px;
}

/* U18 · Badges: pill geometry + crisp contrast */
.badge, .status-pill {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* U19 · Tag chips: quiet by default, lift on hover */
.tag {
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  opacity: 0.85;
}
.tag:hover { opacity: 1; transform: translateY(-1px); }

/* U20 · Quick filter chips: ghost → filled on hover */
.quick-filter {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  user-select: none;
}
.quick-filter:hover {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.12);
  transform: translateY(-1px);
}
.quick-filter:active { transform: translateY(0) scale(0.97); }

/* U21 · Form labels + hints: consistent rhythm */
.label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  opacity: 0.75;
  margin-bottom: 6px;
}
.form-group { margin-bottom: 14px; }

/* U22 · Select dropdown: dark option list */
.select option { background: #0d0f14; color: var(--bone); }

/* U23 · Progress bar: animated stripe + rounded track */
.progress {
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  transition: width 0.5s var(--polish-ease);
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.25) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: polish-stripe 1.4s linear infinite;
}
@keyframes polish-stripe {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* U24 · Hero: layered glow + refined type */
.hero { position: relative; }
.hero::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at 30% 20%, rgba(220, 38, 38, 0.1), transparent 60%);
  pointer-events: none;
}
.hero-title { letter-spacing: -0.01em; }
.hero-title span:first-of-type { animation: polish-pulse-dot 3s var(--polish-ease) infinite; }
@keyframes polish-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.hero-desc { line-height: 1.75; opacity: 0.75; max-width: 68ch; }

/* U25 · View page hero: breathing room + crisp glyph */
.view-page { margin-bottom: 22px; align-items: center; }
.view-page-glyph {
  border-radius: var(--polish-radius-card);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--polish-glow-red);
}
.view-page-title { letter-spacing: 0.01em; }
.view-page-sub { opacity: 0.7; line-height: 1.6; }

/* U26 · Toasts: slide-in + glass depth (host styles) */
.toast {
  animation: polish-toast-in 0.3s var(--polish-ease-spring);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: var(--polish-shadow-2);
}
@keyframes polish-toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* U27 · Modal (node-detail / host modal): scale-in + deep backdrop */
.node-detail-modal { animation: polish-modal-in 0.22s var(--polish-ease-spring); }
@keyframes polish-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.node-detail-header { border-radius: var(--polish-radius-card) var(--polish-radius-card) 0 0; }

/* U28 · Kbd keys: unified chrome */
kbd, .kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* U29 · Status dots: consistent sizing + gentle pulse for live states */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.live, .status-dot.online {
  animation: polish-dot-pulse 2s var(--polish-ease) infinite;
}
@keyframes polish-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

/* U30 · Empty states: softer, centered, readable */
.empty { padding: 48px 24px; opacity: 0.85; }
.empty-icon { opacity: 0.5; margin-bottom: 12px; }
.empty-text { line-height: 1.7; opacity: 0.75; }

/* U31 · Loading + spinner: smoother rotation */
.spinner { animation: polish-spin 0.8s linear infinite; }
@keyframes polish-spin { to { transform: rotate(360deg); } }
.loading { opacity: 0.85; letter-spacing: 0.06em; }

/* U32 · Facet list rows: even spacing + hover */
.facet-item {
  border-radius: 7px;
  padding: 6px 9px;
  cursor: pointer;
}
.facet-item:hover { background: rgba(220, 38, 38, 0.09); }
.facet-count {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* U33 · Facet breadcrumb chips */
.facet-breadcrumb-item {
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.facet-breadcrumb-remove { cursor: pointer; }
.facet-breadcrumb-remove:hover { background: rgba(220, 38, 38, 0.25); }

/* U34 · Pagination: chunky buttons, active state clear */
.pagination { gap: 6px; display: flex; align-items: center; }
.pagination .btn, .pagination button {
  min-width: 36px;
  border-radius: var(--polish-radius-ctl);
  font-variant-numeric: tabular-nums;
}
.pagination button:hover { border-color: rgba(220, 38, 38, 0.5); }
.pagination button.active {
  background: var(--red);
  color: #fff;
  box-shadow: var(--polish-glow-red);
}

/* U35 · Results header block: aligned meta */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.results-title { letter-spacing: 0.03em; }
.results-meta { opacity: 0.7; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* U36 · Risk / severity badge spectrum — consistent semantics */
.badge-critical, .tag-cve.critical { background: rgba(220, 38, 38, 0.18); color: #f87171; border: 1px solid rgba(220, 38, 38, 0.4); }
.badge-high { background: rgba(249, 115, 22, 0.18); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.4); }
.badge-medium { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.badge-low { background: rgba(16, 185, 129, 0.14); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
.badge-info { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); }
.badge-open { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.35); }

/* U37 · Card field rows: key-value rhythm */
.card-field { display: flex; gap: 8px; padding: 4px 0; align-items: baseline; }
.field-label { opacity: 0.6; min-width: 110px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.field-value { color: var(--text-primary); word-break: break-word; }

/* U38 · Detail rows (host modal): aligned ledger look */
.detail-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  align-items: baseline;
}
.detail-row:last-child { border-bottom: none; }

/* U39 · Template list items: hover lift + accent bar */
.template-item {
  border-radius: var(--polish-radius-ctl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  padding: 10px 12px;
}
.template-item:hover {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.07);
  transform: translateY(-1px);
}
.template-item-title { letter-spacing: 0.02em; }
.template-item-query { opacity: 0.65; font-size: 0.76rem; }

/* U40 · Filter group boxes (query builder) */
.filter-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--polish-radius-card);
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.filter-group-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  opacity: 0.8;
  margin-bottom: 10px;
}
.filter-input { margin-bottom: 8px; }
.filter-input::placeholder { opacity: 0.4; }

/* U41 · Textareas: relaxed line-height for list input */
.textarea {
  line-height: 1.65;
  resize: vertical;
  min-height: 96px;
}

/* U42 · Query preview strip */
.query-preview {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--polish-radius-ctl);
  padding: 10px 12px;
  word-break: break-all;
}

/* U43 · Copy affordance on code-ish text */
.copyable { cursor: copy; border-radius: 4px; }
.copyable:hover { background: rgba(220, 38, 38, 0.1); }

/* U44 · Header status cluster: unified pill spacing */
.status { gap: 10px; display: flex; align-items: center; }
.status-item { display: flex; align-items: center; gap: 7px; }

/* U45 · Version badge: quiet metallic chip */
.version-badge {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

/* U46 · Accessibility: reduced motion respects user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .progress-bar::after { display: none; }
}

/* U47 · Selection color: on-brand */
::selection { background: rgba(220, 38, 38, 0.35); color: #fff; }
::-moz-selection { background: rgba(220, 38, 38, 0.35); color: #fff; }

/* U48 · Scrollbar fallback for the whole app */
* { scrollbar-width: thin; scrollbar-color: rgba(220, 38, 38, 0.28) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.28);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(220, 38, 38, 0.5); background-clip: padding-box; }

/* U49 · Responsive tightening for narrow layouts */
@media (max-width: 960px) {
  .view-page { flex-wrap: wrap; }
  .panel-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .results-header { flex-direction: column; align-items: flex-start; }
  .hero-actions { flex-wrap: wrap; }
}

/* U50 · Print: clean, ink-friendly report output */
@media print {
  #gl, .veil, .scanline, .sidebar, .header .status, #app-footer { display: none !important; }
  .app, .content { position: static; overflow: visible; height: auto; }
  body { background: #fff; color: #111; overflow: visible; }
  .panel { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .stat-value, .view-page-title, .hero-title { color: #111; }
}