/**
 * AI Product Recommender
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact leo@prestachamps.com
 *
 * @author    PrestaChamps
 * @copyright PrestaChamps
 * @license   commercial
 */

/* ==========================================================================
   psairec-insights: the Insights sections (Product pairs, Trending and
   best sellers, Recorded data; the Explorer has psairec-explorer.css) on
   top of the UI kit psairec-ui.css, whose tokens (--psairec-*) and
   components (cards, tables, tabs, product cards) they use. Every rule is
   scoped to .psairec-ui.
   ========================================================================== */

/* ---- Product thumbnails in the report tables ------------------------------ */

.psairec-ui .psairec-product {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.psairec-ui .psairec-thumb.is-empty {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px dashed var(--psairec-line-2);
    border-radius: 6px;
    background: var(--psairec-soft);
}

/* ---- Product pairs -------------------------------------------------------- */

.psairec-ui .psairec-pairs-search {
    flex-wrap: wrap;
    margin: 12px 0;
}

.psairec-ui .psairec-pairs-search input[type="search"] {
    min-width: 220px;
    max-width: 100%;
}

.psairec-ui .psairec-pairs-table td:last-child {
    white-space: nowrap;
    text-align: right;
}

.psairec-ui .psairec-hidden-pairs {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.psairec-ui .psairec-hidden-pairs li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--psairec-line);
}

.psairec-ui .psairec-hidden-pairs li:last-child {
    border-bottom: 0;
}

/* ---- Period previews (pairs and trending) --------------------------------- */

.psairec-ui .psairec-period .psairec-toolbar {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.psairec-ui .psairec-period .psairec-toolbar .psairec-help-text {
    flex: 1 0 100%;
}

.psairec-ui .psairec-period table caption {
    caption-side: top;
    padding: 0 0 8px;
    color: var(--psairec-muted);
    text-align: left;
}

.psairec-ui .psairec-period .psairec-inline-form {
    margin-top: 12px;
}

/* ---- Trending: the formula ------------------------------------------------ */

.psairec-ui .psairec-formula {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--psairec-brand-line);
    border-radius: var(--psairec-radius);
    background: var(--psairec-brand-tint);
}

:is(.psairec-ui, #psairec-ui) .psairec-formula ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.psairec-ui .psairec-formula li + li {
    margin-top: 2px;
}

/* ---- Recorded data -------------------------------------------------------- */

.psairec-ui .psairec-data-confirm > div {
    flex: 1 1 auto;
    min-width: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-data-confirm ul {
    margin: 6px 0;
    padding-left: 18px;
}

.psairec-ui .psairec-data-confirm-actions,
.psairec-ui .psairec-data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.psairec-ui .psairec-data-older .psairec-field {
    margin-bottom: 4px;
}

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 600px) {
    .psairec-ui .psairec-pairs-search input[type="search"] {
        min-width: 0;
        width: 100%;
    }

    .psairec-ui .psairec-pairs-table td:last-child {
        text-align: left;
    }
}