/* ============================================================
   SilentSniper — Scanner x Results
   Navy / teal control-panel theme (shared system with Competitor Scanner)
   ============================================================ */

: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;

    /* 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;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
form,
fieldset,
legend,
label {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1.5;
    font-family: var(--font-body);
    color: var(--ink-100);
    background:
        radial-gradient(900px 420px at 50% -120px, rgba(45, 212, 191, 0.10), transparent 60%),
        var(--navy-950);
    min-height: 100vh;
}

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

/* Header / brand (shared with Competitor Scanner) */
.ss-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 36px;
    text-align: center;
    flex-direction: column;
}

.ss-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-400);
}

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

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

.ss-header__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

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

.page-title {
    font-family: var(--font-display);
    font-weight: 600;
    text-align: center;
    color: var(--ink-100);
    font-size: 2rem;
    letter-spacing: -0.01em;
}

/* Panels */
.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: 24px 24px 22px;
    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;
}

/* Filters grid */
.ss-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 28px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.filter-group label {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-300);
    white-space: nowrap;
}

.filter-group input[type="number"],
.filter-group select {
    flex: 1 1 120px;
    min-width: 0;
}

/* Inputs / selects */
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--navy-700);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: var(--font-mono);
    color: var(--ink-100);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

select {
    font-family: var(--font-body);
}

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

/* Buttons */
button,
.btn {
    font-family: var(--font-body);
    border: 1px solid transparent;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    background-color: var(--navy-700);
    color: var(--ink-300);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

button:hover {
    background-color: var(--navy-600);
}

button:active {
    transform: translateY(1px);
}

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

.btn--primary {
    background-color: var(--teal-500);
    color: var(--navy-950);
}

.btn--primary:hover {
    background-color: var(--teal-400);
}

.btn--ghost {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--ink-300);
}

.btn--ghost:hover {
    border-color: var(--ink-400);
    color: var(--ink-100);
    background-color: transparent;
}

.btn--ghost-accent {
    background-color: transparent;
    border-color: rgba(45, 212, 191, 0.4);
    color: var(--teal-300);
}

.btn--ghost-accent:hover {
    background-color: rgba(45, 212, 191, 0.08);
    border-color: var(--teal-400);
}

.btn--danger-outline {
    background-color: transparent;
    border-color: rgba(225, 29, 72, 0.4);
    color: var(--danger-400);
}

.btn--danger-outline:hover {
    background-color: rgba(225, 29, 72, 0.1);
    border-color: var(--danger-500);
}

.btn--success {
    background-color: var(--success-500);
    color: var(--navy-950);
}

.btn--success:hover {
    background-color: var(--success-400);
}

/* Controls rows */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ss-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ss-pagination__info {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--ink-300);
}

.ss-results {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ss-results__count {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--teal-300);
}

.ss-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

#clear_items,
#apply_filters,
#prev_page,
#next_page,
#view_results,
#import_results,
#export_results,
#copy_json,
#export_to_prod_hunter {
    white-space: nowrap;
}

/* Items list */
#items-list-container {
    margin-top: 8px;
}

#items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-panel);
    opacity: 0;
    animation: ss-itemIn 0.4s ease forwards;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.item:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -16px rgba(45, 212, 191, 0.18);
}

/* The bundle wraps the thumbnail in a bare, unclassed <a> as the
   first child of .item — target it structurally since it has no
   hook of its own. */
/* The bundle wraps the thumbnail in a bare, unclassed <a> as the
   first child of .item — target it structurally since it has no
   hook of its own. align-self:flex-start keeps it pinned to a fixed
   size instead of stretching to match .item-info's height, which is
   often much taller (price/competitors/date/seller/break-even/sold
   table all stack up) — that stretch was forcing object-fit:cover
   to crop source images down to a thin sliver. */
.item>a:first-child {
    flex: 0 0 150px;
    align-self: flex-start;
    order: 1;
}

.item img,
.item-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: var(--navy-900);
    border-right: 1px solid var(--line);
    display: block;
}

.item-info {
    padding: 18px 20px;
    flex: 1 1 280px;
    min-width: 240px;
    order: 2;
}

.displayed-titles {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-100);
    margin-bottom: 10px;
    line-height: 1.4;
}

.item p {
    margin-bottom: 6px;
    font-size: 0.86rem;
    color: var(--ink-400);
}

.item p:last-child {
    margin-bottom: 0;
}

.break-even-price {
    font-size: 0.86rem;
    color: var(--teal-300);
    font-weight: 500;
    margin-bottom: 6px;
}

/* #item-buttons-div is injected by the bundle's createEcommerceSearchButtonsPanel2()
   — a full row of icon links (#main-buttons-div, #search-div) that the static HTML
   I redesigned from never showed. Force it onto its own full-width row below the
   image/info, since otherwise it'd be squeezed into a third flex column.
   These rules are deliberately low-specificity since search_marketplace_functions.css
   (loaded after this file) likely already styles .icon/.a-link-text — this is a
   navy-compatible fallback, not meant to fight whatever that file already does. */
#item-buttons-div {
    flex: 1 1 100%;
    order: 3;
    border-top: 1px solid var(--line);
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

#main-buttons-div,
#search-div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#search-div label {
    color: var(--ink-400);
    font-size: 0.82rem;
    margin-right: 2px;
}

.item .icon,
.item .a-link-text {
    display: inline-flex;
    align-items: center;
    color: var(--ink-300);
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.item .icon:hover,
.item .a-link-text:hover {
    opacity: 1;
}

.item .icon.clicked,
.item .a-link-text.clicked {
    transform: scale(0.92);
    opacity: 0.5;
}

.item .remove-seller {
    opacity: 1;
}

.item .remove-seller img {
    filter: drop-shadow(0 0 4px var(--teal-glow));
}

@keyframes ss-itemIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* Total sold table */
.total-sold-table {
    max-width: 300px;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--font-mono);
    margin: 16px 0;
}

.total-sold-table,
.total-sold-table th,
.total-sold-table td {
    border: 1px solid var(--line-subtle);
    text-align: center;
    padding: 4px 6px;
}

.total-sold-table th {
    background-color: var(--navy-600);
    color: var(--teal-300);
    font-weight: 600;
}

.total-sold-table tr:nth-child(odd) {
    background-color: var(--navy-800);
}

.total-sold-table tr:nth-child(even) {
    background-color: var(--navy-900);
}

/* The bundle injects each sold-count cell with an inline color:red,
   written for a white table. Pure red on navy-800 sits right at the
   edge of legible contrast, so override it to our existing amber
   "attention" color, which reads clearly on this background and is
   already this product's language for highlighted numbers. */
.total-sold-table td b {
    color: var(--warning-300) !important;
}

/* ============================================================
   Modals (custom-modal — legacy import dialog)
   ============================================================ */

.custom-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(7, 11, 20, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.custom-modal-content {
    background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
    margin: 12% auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    width: 50%;
    min-width: 300px;
    box-shadow: var(--shadow-panel);
}

.custom-modal-content h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink-100);
    margin-bottom: 16px;
}

.custom-modal-close {
    color: var(--ink-400);
    float: right;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.custom-modal-close:hover,
.custom-modal-close:focus {
    color: var(--danger-400);
    text-decoration: none;
    cursor: pointer;
}

#import_modal_textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 18px;
    resize: vertical;
}

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

    .page-title {
        font-size: 1.6rem;
    }

    .panel {
        padding: 20px;
    }

    .item {
        flex-direction: column;
    }

    .item img,
    .item-image {
        width: 100%;
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .controls {
        justify-content: flex-start;
    }

    .custom-modal-content {
        width: 88%;
        margin: 20% auto;
    }
}

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

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