/* SuperBarato admin overrides — app-specific styles for the admin
   panel. Uses stupendous_admin's design tokens (--text-color-*,
   --font-size-*, etc.) so it stays consistent if the host theme
   changes. */

/* Pin the chain favicon — the upstream `.data-table td img.chain-favicon`
   rule sets 18×18, but neighbouring rules (`.data-table td img` with
   width:auto / max-height:2rem) and table auto-layout can still squash
   it when the row is dense or a sibling column is content-heavy. The
   shorthand here uses !important so the badge keeps its square shape
   regardless of cascade or container context. */
.chain-favicon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    flex-shrink: 0;
}

/* Stacked cell — small dim line below the primary value. Used for
   "sku · brand" under product names, "last seen" under counters, and
   any other compact "main + secondary" pair in admin tables. */
.cell-secondary {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-color-3, #888);
    margin-top: 2px;
}

/* Listings table — price column. Mono font so digits line up cleanly
   in the right-aligned column, regardless of width. When the listing
   carries a promo, the promo is the prominent value on top and the
   regular renders struck-through beneath it. */
.listings-table__price,
.listings-table__price-promo {
    font-family: var(--font-family-mono, ui-monospace, monospace);
}

.listings-table__price {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-color-3, #888);
    text-decoration: line-through;
    margin-top: 2px;
}

/* Full-width page content — opt-in escape hatch for pages that want
   to break out of the admin-container's 80rem max-width. The negative
   horizontal margins shift the wrapper to the viewport edges; the
   container's vertical margins and inner flex/gap are inherited from
   the surrounding `.admin-container`. */
.admin-page--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

body:has(.admin-page--full) {
    overflow-x: clip;
}

/* App-categories listings preview (column 4). Two-column row: a fixed
   48×48 thumbnail on the left and a flex body on the right. The body
   stacks the product name (internal link) over a dim secondary line
   carrying brand · price · PDP host. The mapping-listing div is *not*
   a `.data-table td`, so the upstream `.data-table__thumb` rule
   doesn't reach this thumb — we ship our own scoped style. */
.mapping-listing {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    align-items: flex-start;
    padding: var(--spacing-sm, 0.5rem) 0;
}

.mapping-listing + .mapping-listing {
    border-top: 1px solid var(--border-color, #eee);
}

.mapping-listing__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm, 4px);
}

.mapping-listing__body {
    flex: 1;
    min-width: 0;
}

/* Drag-and-drop row reorder (see assets/js/sortable.js). */
.sort-handle {
    cursor: grab;
    user-select: none;
    color: var(--text-color-3, #888);
    touch-action: none;
}
.sort-handle:active { cursor: grabbing; }

tr.is-sort-dragging { opacity: 0.4; }

.sort-ghost {
    pointer-events: none;
    opacity: 0.95;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    background: var(--background-color, #fff);
}

/* Pipeline graph — admin/crawlers/live LiveView. Two-column layout:
   left column lists every chain's stages (Scheduler → Queue → Fetcher),
   right column is the singleton PersistenceServer all chains feed
   into. Updates every 500 ms via LiveView. */
.pipeline-graph {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0;
}

.pipeline-graph__chains {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pipeline-graph__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pipeline-graph__chain {
    width: 7rem;
    flex-shrink: 0;
}

.pipeline-graph__sink {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.pipeline-stage {
    flex: 1;
    min-width: 6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color-2, #ddd);
    border-radius: 6px;
    background: var(--background-color, #fff);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.2;
}

.pipeline-stage--wide {
    min-width: 12rem;
    padding: 1rem 1.25rem;
    font-size: var(--font-size-sm, 0.875rem);
}

.pipeline-stage--idle {
    opacity: 0.45;
}

.pipeline-stage--warn {
    border-color: #d4a017;
    background: rgba(212, 160, 23, 0.08);
}

.pipeline-stage--critical {
    border-color: #c0392b;
    background: rgba(192, 57, 43, 0.08);
}

.pipeline-stage__label {
    font-size: var(--font-size-xs, 0.7rem);
    color: var(--text-color-3, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pipeline-stage__primary {
    font-weight: 600;
    font-family: var(--font-family-mono, ui-monospace, monospace);
}

.pipeline-stage__secondary {
    font-size: var(--font-size-xs, 0.7rem);
    color: var(--text-color-3, #888);
    margin-top: 1px;
}

.pipeline-arrow {
    color: var(--text-color-3, #888);
    font-size: 1.1rem;
    flex-shrink: 0;
}