/* CellPoint Pro Web — Products and Categories (pm-*): the product list, a product's screen and the category screen.
   Built on the shared tokens and pieces in app.css (card-surface, set-card, set-row, cp-empty-*). */

/* ---------- Picture or type icon ---------- */
.pm-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--type-bg, var(--cp-fill));
    color: var(--type-fg, var(--cp-text-2));
    font-size: 1.2rem;
}
.pm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--cp-surface); }
.pm-thumb-sm { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
.pm-thumb-lg { width: 96px; height: 96px; border-radius: 16px; font-size: 2.1rem; }

.pm-picture { display: flex; align-items: center; gap: 1rem; }
.pm-picture.stacked { flex-direction: column; align-items: stretch; gap: .75rem; }
.pm-picture.stacked .pm-thumb { width: 100%; height: 170px; font-size: 2.6rem; }
.pm-picture-actions { min-width: 0; }
.pm-picture-actions .set-help { margin-top: .4rem; }

/* ---------- Kind of product chips ---------- */
.pm-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; margin-bottom: .75rem; }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: .32rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cp-text);
}
.pm-chip i { color: var(--type-fg, var(--cp-primary)); }
.pm-chip:hover { border-color: var(--cp-border-strong); }
.pm-chip.active { background: var(--type-bg, var(--cp-primary-50)); border-color: var(--type-fg, var(--cp-primary)); color: var(--type-fg, var(--cp-primary-text)); }
.pm-chip-count { font-weight: 700; color: var(--cp-muted); font-size: .78rem; }
.pm-chip.active .pm-chip-count { color: inherit; opacity: .8; }

.pm-lead { color: var(--cp-muted); font-size: .92rem; margin: 0 0 1rem; max-width: 820px; }

.pm-type-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--type-bg, var(--cp-fill));
    color: var(--type-fg, var(--cp-text-2));
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.pm-type-tag.lg { font-size: .85rem; padding: .25rem .7rem; }

/* ---------- Categories ---------- */
.pm-cats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.pm-cat-card { overflow: hidden; }
.pm-cat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--cp-border); }
.pm-cat-title { font-size: 1rem; font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cat-title-sub { font-weight: 500; color: var(--cp-muted); }
.pm-cat-list { list-style: none; margin: 0; padding: 0; }
.pm-cat-row { display: flex; align-items: center; gap: .25rem; padding-right: .6rem; border-bottom: 1px solid var(--cp-divider); }
.pm-cat-row:last-child { border-bottom: 0; }
.pm-cat-row.selected { background: var(--cp-primary-50); box-shadow: inset 3px 0 0 var(--cp-primary); }
.pm-cat-pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .5rem .65rem 1rem;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
}
.pm-cat-pick:not(.static):hover .pm-cat-name { color: var(--cp-primary-text); }
.pm-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-cat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; font-size: .8rem; color: var(--cp-muted); }
.pm-cat-meta .set-badge { margin-left: 0; }
.pm-cat-chevron { color: var(--cp-muted); }
.pm-cat-row.selected .pm-cat-chevron { color: var(--cp-primary); }
.pm-cat-actions { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.pm-cat-card .cp-empty-inline { margin: 1rem; }

@media (max-width: 767.98px) {
    .pm-cats { grid-template-columns: minmax(0, 1fr); }
    .pm-cat-chevron { transform: rotate(90deg); }
}

/* ---------- Kind of product for a new product ---------- */
.pm-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pm-type-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--cp-border-strong);
    border-radius: 14px;
    background: var(--cp-surface);
    text-align: left;
    color: inherit;
}
.pm-type-card:hover { border-color: var(--type-fg, var(--cp-primary)); background: color-mix(in srgb, var(--type-bg, var(--cp-surface)) 45%, var(--cp-surface)); }
.pm-type-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--type-bg);
    color: var(--type-fg);
    font-size: 1.2rem;
}
.pm-type-card-text { display: flex; flex-direction: column; min-width: 0; }
.pm-type-card-name { font-weight: 700; }
.pm-type-card-desc { font-size: .82rem; color: var(--cp-muted); }
@media (max-width: 575.98px) {
    .pm-type-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Product list ---------- */
.pm-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.pm-search { flex: 1 1 300px; }
.pm-filter { width: auto; max-width: 240px; }

.pm-list { display: flex; flex-direction: column; gap: .45rem; }
.pm-prow {
    display: grid;
    grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.6fr) 118px 104px;
    align-items: center;
    gap: .9rem;
    padding: .5rem .9rem;
    color: inherit;
    text-decoration: none;
}
.pm-prow.with-cost { grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.6fr) 118px 96px 104px; }
a.pm-prow:hover { border-color: var(--cp-border-strong); box-shadow: var(--cp-shadow); color: inherit; }
a.pm-prow:hover .pm-prow-name { color: var(--cp-primary-text); }
.pm-prow-head {
    padding-top: 0;
    padding-bottom: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.pm-prow-main, .pm-prow-cat { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.pm-prow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-prow-sub { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .78rem; color: var(--cp-muted); }
.pm-barcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.pm-prow-path { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-prow-path i { font-size: .65rem; color: var(--cp-muted); margin: 0 .15rem; }
.pm-prow-cat .pm-type-tag { align-self: flex-start; }
.pm-prow-stock, .pm-prow-cost, .pm-prow-price { text-align: right; white-space: nowrap; }
.pm-prow-cost { color: var(--cp-muted); font-size: .88rem; }
.pm-prow-price { font-weight: 700; }
.pm-stock { font-size: .8rem; font-weight: 600; }
.pm-stock.ok { color: var(--cp-success-text); }
.pm-stock.none { color: var(--cp-danger); }

@media (max-width: 991.98px) {
    .pm-prow, .pm-prow.with-cost {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas: "thumb main price" "thumb cat stock";
        row-gap: .2rem;
        column-gap: .75rem;
    }
    .pm-prow > .pm-thumb { grid-area: thumb; }
    .pm-prow-main { grid-area: main; }
    .pm-prow-cat { grid-area: cat; flex-direction: row; align-items: center; gap: .4rem; }
    .pm-prow-price { grid-area: price; }
    .pm-prow-stock { grid-area: stock; }
    .pm-prow-cost, .pm-prow-head { display: none; }
    .pm-prow-path { font-size: .78rem; color: var(--cp-muted); }
}
@media (max-width: 575.98px) {
    .pm-filter { flex: 1 1 140px; max-width: none; }
    .pm-prow-cat .pm-type-tag { display: none; }
}

/* ---------- A product ---------- */
.pm-editor { max-width: 1140px; }
.pm-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.pm-editor-main { min-width: 0; }
.pm-editor-main > * + *, .pm-editor-main > fieldset > * + * { margin-top: 1rem; }
.pm-editor-main .set-card + .set-card { margin-top: 1rem; }
.pm-editor-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; }
.pm-editor-side .set-card + .set-card { margin-top: 0; }
@media (max-width: 991.98px) {
    .pm-editor-grid { grid-template-columns: minmax(0, 1fr); }
    .pm-editor-side { position: static; }
}

.pm-input-short { max-width: 220px; }
.pm-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 360px; padding: .55rem .8rem; border-radius: 10px; background: var(--cp-surface-2); border: 1px solid var(--cp-border); }
.pm-cost-preview { margin-top: .8rem; padding: .55rem .8rem; border-radius: 10px; background: var(--cp-primary-50); color: var(--cp-primary-text); font-size: .88rem; }

.pm-taxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
.pm-tax { margin: 0; }
@media (max-width: 575.98px) {
    .pm-taxes { grid-template-columns: minmax(0, 1fr); }
}

.pm-barcodes { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pm-barcode-item { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .25rem .2rem .6rem; border: 1px solid var(--cp-border); border-radius: 10px; background: var(--cp-surface-2); }
.pm-barcode-item > i { color: var(--cp-muted); }
.pm-barcode-item .btn-icon { width: 28px; height: 28px; }
.pm-barcode-add { max-width: 520px; }

.pm-stock-rows { display: flex; flex-direction: column; border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; }
.pm-stock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--cp-divider); }
.pm-stock-row:last-child { border-bottom: 0; }
.pm-stock-carry { margin: 0; white-space: nowrap; }
.pm-stock-alert { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.pm-stock-level { width: 84px; }
@media (max-width: 575.98px) {
    .pm-stock-row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
}

.pm-serials { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; }
.pm-serial { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; padding: .5rem .8rem; border-bottom: 1px solid var(--cp-divider); }
.pm-serial:last-child { border-bottom: 0; }
.pm-serial-meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .8rem; color: var(--cp-muted); }

.pm-facts dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem; font-size: .9rem; }
.pm-facts dt { font-weight: 500; color: var(--cp-muted); }
.pm-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pm-history { border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; font-size: .88rem; }
.pm-history-row { display: grid; grid-template-columns: 104px minmax(0, 1.3fr) minmax(0, 1fr) 64px; gap: .75rem; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--cp-divider); }
.pm-history-row.with-price { grid-template-columns: 104px minmax(0, 1.3fr) minmax(0, 1fr) 64px 88px; }
.pm-history-row:last-child { border-bottom: 0; }
.pm-history-head { background: var(--cp-surface-2); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-muted); }
.pm-history-date { color: var(--cp-muted); white-space: nowrap; }
.pm-history-qty { font-weight: 700; }
.pm-history-qty.in { color: var(--cp-success-text); }
.pm-history-qty.out { color: var(--cp-danger); }
@media (max-width: 575.98px) {
    .pm-history-row, .pm-history-row.with-price { grid-template-columns: minmax(0, 1fr) auto; row-gap: .1rem; }
    .pm-history-head { display: none; }
    .pm-history-date { grid-column: 1; font-size: .78rem; }
    .pm-history-what { grid-column: 1; }
    .pm-history-who { grid-column: 1; font-size: .78rem; color: var(--cp-muted); }
    .pm-history-qty { grid-column: 2; grid-row: 1 / span 2; }
}