/* ============================================================
   SilentSniper — eBay CSV Processor
   Navy / teal control-panel theme (shared system across SilentSniper pages)
   ============================================================ */

:root {
  /* Surfaces */
  --navy-950: #070b14;
  --navy-900: #0b1322;
  --navy-800: #111c30;
  --navy-700: #18253c;
  --navy-600: #213452;

  /* Lines */
  --line: #243551;
  --line-subtle: #1c2940;
  --line-strong: #2c3e5e;

  /* Accent */
  --teal-300: #7fe9da;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-glow: rgba(45, 212, 191, 0.18);

  /* Status colors */
  --success-400: #34d399;
  --success-500: #10b981;
  --danger-400: #fb7185;
  --danger-500: #e11d48;
  --warning-300: #ffd76a;
  --warning-400: #f5a623;

  /* Text */
  --ink-100: #eaf2fb;
  --ink-300: #c2d0e4;
  --ink-400: #91a3bd;
  --ink-600: #5a6b85;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────────────── */
/* Base page styling */
body {
  font-family: var(--font-body);
  padding: 0;
  margin: 0;
  color: var(--ink-100);
  background:
    radial-gradient(900px 420px at 50% -160px, rgba(45, 212, 191, 0.10), transparent 60%),
    var(--navy-950);
  min-height: 100vh;
}

.ss-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.ss-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--ink-400);
}

.ss-brand__mark {
  width: 16px;
  height: 16px;
  color: var(--teal-400);
}

.ss-brand__name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Panels (new wrapper cards around existing sections) */
.panel {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 16px;
  font-weight: 500;
  display: block;
}

.panel--stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
}

.ss-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--ink-300);
}

.ss-field-label {
  display: block;
  margin-top: 16px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-300);
}

.vero-v {
  display: inline-block;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.2s ease;
  margin: 0 2px 0 1px;
  /* tighter kerning */
  line-height: 1;
  vertical-align: baseline;
}

.vero-v:hover {
  color: var(--danger-400);
  transform: scale(1.05) rotate(-1deg);
}

.controls,
.controls-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.controls-bottom {
  justify-content: flex-end;
}

.controls input,
.controls button,
.controls label,
.controls select {
  margin-right: 10px;
  margin-left: 5px;
  /* padding: 6px 12px; */
}

#position {
  margin-bottom: 10px;
  margin-top: 16px;
  font-weight: bold;
  color: var(--ink-300);
  font-size: 0.86rem;
}

/* Form controls (new base — page had no themed controls before)
   Scoped to .ss-shell so these don't leak into the two modals the
   bundle injects directly onto <body> (membership gate modal,
   VERO-details popup), which are styled independently. */
.ss-shell input[type="number"],
.ss-shell input[type="text"],
.ss-shell input[type="file"],
.ss-shell select,
.ss-shell textarea {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink-100);
  background: var(--navy-700);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}

.ss-shell select,
.ss-shell input[type="file"] {
  font-family: var(--font-body);
}

.ss-shell input[type="number"]::placeholder,
.ss-shell input[type="text"]::placeholder,
.ss-shell textarea::placeholder {
  color: var(--ink-600);
  font-family: var(--font-body);
}

.ss-shell input[type="number"]:focus-visible,
.ss-shell input[type="text"]:focus-visible,
.ss-shell select:focus-visible,
.ss-shell textarea:focus-visible {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

.ss-shell input[type="checkbox"],
.ss-shell input[type="radio"] {
  accent-color: var(--teal-400);
}

.ss-shell input[type="number"] {
  width: 80px;
}

.ss-shell input[type="file"]::file-selector-button,
.ss-shell input[type="file"]::-webkit-file-upload-button {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-100);
  background: var(--navy-600);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ss-shell input[type="file"]::file-selector-button:hover,
.ss-shell input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--navy-700);
}

.ss-shell a {
  color: var(--teal-300);
}

.ss-shell a:hover {
  color: var(--teal-400);
}

.ss-shell label {
  color: var(--ink-300);
}

/* Buttons (new base) */
.ss-shell button {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-300);
  background: var(--navy-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.ss-shell button:hover {
  background: var(--navy-600);
  color: var(--ink-100);
}

.ss-shell button:active {
  transform: translateY(1px);
}

.ss-shell button:disabled {
  background: var(--navy-700);
  border-color: var(--line-subtle);
  color: var(--ink-600);
  cursor: not-allowed;
  transform: none;
}

#startBtn,
#downloadActiveListingsBtn,
#confirmExport,
#updateListingsBtn {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--navy-950);
}

#startBtn:hover,
#downloadActiveListingsBtn:hover,
#confirmExport:hover,
#updateListingsBtn:hover {
  background: var(--teal-400);
  border-color: var(--teal-400);
}

#exportBtn {
  background: var(--success-500);
  border-color: var(--success-500);
  color: var(--navy-950);
}

#exportBtn:hover {
  background: var(--success-400);
  border-color: var(--success-400);
}

#retryFailedBtn {
  border-color: rgba(245, 166, 35, 0.4);
  color: var(--warning-300);
}

#retryFailedBtn:hover {
  background: rgba(245, 166, 35, 0.1);
  border-color: var(--warning-400);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  border: 1px solid var(--line-subtle);
  padding: 8px;
  text-align: left;
  color: var(--ink-300);
}

thead th {
  color: var(--ink-100);
  font-weight: 600;
}

/* Mark a raw‐table row as “processing” (amber tint) */
tr.processing {
  background-color: rgba(245, 166, 35, 0.12);
}

/* Mark a raw‐table row as “done” (teal tint) */
tr.done {
  background-color: rgba(45, 212, 191, 0.1);
}

/* Container for each table, with a minimum height to prevent collapse */
.table-container {
  position: relative;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 5px;
  min-height: 200px;
  background: var(--navy-900);
}

table thead th {
  position: sticky;
  top: 0;
  background: var(--navy-700);
  z-index: 1;
}

/* Overlay that covers the entire page (used when importing) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: var(--ink-100);
  z-index: 999;
}

/* Generic “hidden” utility */
.hidden {
  display: none;
}

/* Loader box (for chunked rendering) */
.loader-box {
  margin: 15px 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--navy-700);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-300);
  width: 100%;
  max-width: 400px;
}

.loader-box.hidden {
  display: none;
}

.progress-bar {
  margin-top: 8px;
  height: 10px;
  background: var(--navy-900);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--teal-400);
  transition: width 0.2s ease-out;
}

/* ───────────────────────────────────────────────────────── */
/* Fade-in animation for every processed‐table row */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#processedTable tbody tr {
  animation: fadeIn 0.4s ease-in forwards;
  will-change: opacity, transform;
}

@keyframes flashHighlight {
  0% {
    background-color: rgba(125, 233, 218, 0.28);
  }

  /* soft teal */
  50% {
    background-color: rgba(52, 211, 153, 0.22);
  }

  /* soft green */
  100% {
    background-color: transparent;
  }
}

#processedTable tbody tr.highlighted-row {
  animation:
    flashHighlight 1.2s ease-out,
    fadeIn 0.4s ease-in;
}

/* Scan toggles container default hidden and layout */
.scan-toggles {
  display: none;
  align-items: center;
  gap: 16px;
  margin: 6px 0 10px 0;
  color: var(--ink-300);
}

.scan-toggles:not(.hidden) {
  display: flex;
}

/* Clean inline VERO status layout */
.vero-status-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px 12px;
}

.vero-status-text {
  white-space: pre-wrap;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-300);
}

.btn-remove-chip {
  justify-self: end;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--navy-700);
  color: var(--ink-300);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

.btn-remove-chip:hover {
  background: var(--navy-600);
  border-color: var(--ink-400);
}

.btn-remove-chip:active {
  transform: scale(0.98);
}


/* Hide all .spinner elements by default */
.spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--teal-400);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}

/* When the .spinner no longer has “hidden”, show it */
.spinner:not(.hidden) {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ───────────────────────────────────────────────────────── */
/* Overlay that covers only the raw‐table area */
#loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 19, 34, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  /* sits above the table */
}

#loadingOverlay .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--line-strong);
  border-top-color: var(--teal-400);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#loadingOverlay.hidden {
  display: none;
}

/* ───────────────────────────────────────────────────────── */

#blockModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

#blockModal.hidden {
  display: none;
}

.block-modal-content {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  color: var(--ink-100);
  font-family: var(--font-body);
}

.block-modal-content h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.block-modal-content .subtext {
  font-size: 0.95rem;
  color: var(--ink-400);
  margin-bottom: 20px;
}

.countdown-box {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--warning-300);
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.icon-buttons {
  display: flex;
  gap: 8px;
}

.icon-buttons button {
  font-size: 18px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: var(--navy-700);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.icon-buttons button:hover {
  background: var(--navy-600);
  transform: scale(1.06);
}

.icon-buttons button:active {
  transform: scale(0.95);
}


/* 1) Make the overlay fill the screen and allow scrolling if modal is taller */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* if the modal-content ends up taller than the screen, allow the page to scroll */
  overflow-y: auto;
  padding: 20px;
  /* so that very tall content doesn’t butt right up against the edges */
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 2) Don’t force a full “height: 100%” on the content—use a max-height instead */
.modal-content {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-panel);
  color: var(--ink-100);

  /* cap the height to 90% of the viewport; if it’s taller, enable an internal scrollbar */
  max-height: 90vh;
  overflow-y: auto;

  /* keep the flex‐column behavior so our Start Tracking button can still sit at the bottom */
  display: flex;
  flex-direction: column;
}

.modal-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.modal-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-100);
  margin-bottom: 8px;
}

/* 3) Button stays pinned to the bottom-right of the modal-content */
#startTrackingBtn {
  margin-top: auto;
  /* push to bottom of flex column */
  align-self: flex-end;
  /* push to right */
}



/* ───────────────────────────────────────────────────────── */
/* Quick Start Section Styles */
.quick-start-section {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.quick-start-section button#quickStartBtn {
  background-color: var(--teal-500);
  color: var(--navy-950);
  font-size: 1.02rem;
  font-weight: 600;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.quick-start-section button#quickStartBtn::before {
  content: "🚀";
  /* rocket icon to signify “quick start” */
  margin-right: 8px;
  font-size: 1.1rem;
}

.quick-start-section button#quickStartBtn:hover {
  background-color: var(--teal-400);
}

.quick-start-section small {
  display: block;
  margin-top: 10px;
  color: var(--ink-400);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Example placement for explanatory text under the button */
.quick-start-section small::before {
  content: "ℹ️";
  margin-right: 6px;
}

/* Page title block */
.ss-shell h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--ink-100);
}

.ss-shell h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-100);
}

/* The bundle injects variable-pricing rule rows with an inline
   color:#444 meant for a light background — override it here since
   we can't edit the bundle, and #444 is unreadable on navy. */
.price-rule-text {
  color: var(--ink-300) !important;
}

.price-rule {
  margin-bottom: 8px;
}

.price-rule-text input {
  margin: 0 2px;
}

#runTimer,
#processedItemsCountContainer {
  color: var(--ink-100);
}

#errorRowSummary,
#errorSummary {
  color: var(--ink-300);
}

#rawCount,
#processedCount {
  color: var(--teal-300);
  font-family: var(--font-mono);
  font-weight: 600;
}

#timerValue,
#processedItemsCount,
#errorRowCount,
#errorCount {
  font-family: var(--font-mono);
  color: var(--teal-300);
}

/* Responsive */
@media (max-width: 768px) {
  .ss-shell {
    padding: 28px 16px 48px;
  }

  .panel {
    padding: 18px;
  }

  .controls>* {
    margin-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}