/* SON Stock: one product per row; quantities and dates stay attached to their lot. */
#view-mep-stock {
    --msc-paper: #fff;
    --msc-raised: #f2f2f7;
    --msc-ink: #1c1c1e;
    --msc-dim: #636366;
    --msc-line: #e3e3e8;
    --msc-fresh: #16814a;
    --msc-cold: #0878c3;
    --msc-empty: #bd382e;
    --msc-oldest: #95601c;
    --msc-quantities: 164px;
    color: var(--msc-ink);
}
[data-theme="dark"] #view-mep-stock {
    --msc-paper: #1c1c1e;
    --msc-raised: #2c2c2e;
    --msc-ink: #f5f5f7;
    --msc-dim: #aeaeb2;
    --msc-line: #333337;
    --msc-fresh: #5bd675;
    --msc-cold: #4fb5ff;
    --msc-empty: #ff7b72;
    --msc-oldest: #ffb340;
}
#view-mep-stock .mep-stock-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding: 10px 12px; margin-bottom: 0; }
#view-mep-stock .mep-stock-header h2 { font-size: 21px; margin: 0; }
#view-mep-stock #mep-stock-summary { font-size: 11px; margin: 3px 0 0; color: var(--msc-dim); }
#view-mep-stock .mep-stock-header > div { flex: 1; min-width: 0; }
#view-mep-stock .mep-stock-back-btn,
#view-mep-stock .mep-stock-end-service-btn { min-height: 44px; font-size: 12px; padding: 8px 10px; }
#view-mep-stock .mep-stock-controls { padding: 5px 12px 8px; }
#view-mep-stock .mep-stock-preference-bar { grid-template-columns: minmax(0, 1fr) 112px; margin-bottom: 0; gap: 7px; }
#view-mep-stock .mep-stock-search { min-height: 44px; background: var(--msc-paper); border-color: var(--msc-line); }
#view-mep-stock .mep-stock-search input { height: 42px; font-size: 16px; font-weight: 500; color: var(--msc-ink); }
#view-mep-stock .mep-stock-filter-toggle { min-height: 44px; grid-template-columns: 1fr; gap: 2px; padding: 6px 9px; background: var(--msc-paper); border-color: var(--msc-line); color: var(--msc-ink); }
#view-mep-stock .mep-stock-filter-toggle > span { font-size: 12px; font-weight: 650; }
#view-mep-stock .mep-stock-filter-toggle > small { font-size: 10px; font-weight: 400; color: var(--msc-dim); }
#view-mep-stock .mep-stock-filter-toggle[aria-expanded="true"] { border-color: #007aff; }
#view-mep-stock .mep-stock-filter-panel { padding-top: 8px; }
#view-mep-stock .mep-stock-ignore-preferences { min-height: 44px; margin-bottom: 8px; background: var(--msc-paper); color: var(--msc-ink); border-color: var(--msc-line); }
#view-mep-stock .mep-stock-ignore-preferences > span { font-size: 12px; font-weight: 500; }
#view-mep-stock .mep-stock-content { gap: 12px; padding: 0 12px 18px; }
#view-mep-stock .mep-stock-section { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#view-mep-stock .mep-stock-section-head,
#view-mep-stock .mep-stock-item-toggle { display: grid; grid-template-columns: minmax(0, 1fr) var(--msc-quantities) 12px; gap: 5px; align-items: center; padding-left: 10px; padding-right: 8px; }
#view-mep-stock .mep-stock-section-head { min-height: 30px; margin: 0; padding-top: 7px; padding-bottom: 7px; }
#view-mep-stock .mep-stock-section-head h3 { font-size: 11px; font-weight: 600; color: var(--msc-dim); margin: 0; overflow-wrap: anywhere; line-height: 1.3; }
#view-mep-stock .mep-stock-column-labels,
#view-mep-stock .mep-stock-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#view-mep-stock .mep-stock-column-labels { font-size: 11px; font-weight: 500; text-align: center; }
#view-mep-stock .mep-stock-column-labels > :first-child { color: var(--msc-fresh); }
#view-mep-stock .mep-stock-column-labels > :last-child { color: var(--msc-cold); }
#view-mep-stock .mep-stock-item-card { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--msc-line); border-radius: 0; background: var(--msc-paper); color: var(--msc-ink); box-shadow: none; gap: 0; }
#view-mep-stock .mep-stock-section-head + .mep-stock-item-card { border-radius: 10px 10px 0 0; }
#view-mep-stock .mep-stock-item-card:last-child { border-radius: 0 0 10px 10px; border-bottom: 0; }
#view-mep-stock .mep-stock-section-head + .mep-stock-item-card:last-child { border-radius: 10px; }
#view-mep-stock .mep-stock-item-toggle { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
#view-mep-stock .mep-stock-item-name { font-size: 13px; line-height: 1.25; font-weight: 600; }
#view-mep-stock .mep-stock-item-card[data-stock-level="empty"] .mep-stock-item-name { color: var(--msc-empty); }
#view-mep-stock .mep-stock-empty-hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--msc-dim); }
#view-mep-stock .mep-stock-item-chevron { font-size: 20px; color: var(--msc-dim); }
#view-mep-stock .mep-stock-item-card.expanded > .mep-stock-item-toggle { background: var(--msc-raised); }
#view-mep-stock .mep-stock-pocket-metric { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; color: var(--msc-fresh); }
#view-mep-stock .mep-stock-pocket-metric.congel { color: var(--msc-cold); }
#view-mep-stock .mep-stock-pocket-metric.is-empty .mp-pockets { opacity: .25; }
#view-mep-stock .mep-stock-item-card[data-stock-level="empty"] .mep-stock-overview .mep-stock-pocket-metric { color: var(--msc-empty); }
#view-mep-stock .mep-stock-item-card[data-stock-level="empty"] .mep-stock-overview .mp-pockets { opacity: .65; }
/* Reuse the end-service bag markup, with dimensions limited to this stock view. */
#view-mep-stock .mp-pockets { display: inline-flex; flex-shrink: 0; vertical-align: middle; }
#view-mep-stock .mp-pockets > span { display: inline-flex; align-items: center; gap: 3px; }
#view-mep-stock .mp-pockets small { font-size: 11px; font-weight: 500; line-height: 1; }
#view-mep-stock .is-empty .mp-pockets small { display: none; }
#view-mep-stock .mp-bag { position: relative; display: inline-block; width: 17px; height: 26px; flex-shrink: 0; overflow: hidden; border-radius: 2px 2px 5px 5px; background: color-mix(in srgb, currentColor 13%, var(--msc-paper)); }
#view-mep-stock .mp-bag::after { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; height: 2px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .7; }
#view-mep-stock .mp-bag > i { position: absolute; left: 2px; right: 2px; bottom: 2px; border-radius: 1px 1px 3px 3px; background: linear-gradient(110deg, color-mix(in srgb, currentColor 65%, var(--msc-paper)), currentColor); }
#view-mep-stock .mp-stack { display: inline-flex; position: relative; padding-left: 5px; }
#view-mep-stock .mp-stack::before { content: ""; position: absolute; width: 17px; height: 23px; top: 3px; left: 0; background: currentColor; opacity: .25; border-radius: 2px 2px 5px 5px; }
#view-mep-stock .mp-stack > .mp-bag { z-index: 1; }
#view-mep-stock .mep-stock-item-details { border-color: var(--msc-line); }
#view-mep-stock .mep-stock-item-details-inner { padding: 10px 12px 12px; gap: 12px; }
#view-mep-stock .mep-stock-lot-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; border-color: var(--msc-line); padding-top: 12px; }
#view-mep-stock .mep-stock-lot-main { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; }
#view-mep-stock .mep-stock-lot-main > span:first-child { font-size: 10px; color: var(--msc-dim); }
#view-mep-stock .mep-stock-lot-main .mep-stock-oldest { font-size: 11px; font-weight: 500; color: var(--msc-oldest); }
#view-mep-stock .mep-stock-producer { width: auto; max-width: 40%; margin: 0 0 0 auto; font-size: 11px; font-weight: 500; }
#view-mep-stock .mep-stock-lot-states { gap: 10px; }
#view-mep-stock .is-detailed { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 5px; }
#view-mep-stock .mep-stock-pocket-meta { display: flex; flex-wrap: wrap; gap: 2px 7px; font-size: 11px; }
#view-mep-stock .mep-stock-pocket-meta strong { font-size: 11px; font-weight: 600; }
#view-mep-stock .mep-stock-pocket-meta small { font-size: 11px; color: var(--msc-dim); }
#view-mep-stock .mep-stock-lot-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; grid-column: auto; }
#view-mep-stock .mep-stock-lot-actions button { min-height: 44px; padding: 7px; font-size: 12px; border-radius: 7px; }
#view-mep-stock .mep-stock-lot-actions .switch { width:100%; height:auto; }
#view-mep-stock .mep-stock-lot-actions .print { background: var(--msc-raised); color: #007aff; border-color: transparent; }
[data-theme="dark"] #view-mep-stock .mep-stock-lot-actions .print { color: #6bb1ff !important; background: var(--msc-raised) !important; border-color: transparent !important; }
#view-mep-stock .mep-stock-lot-actions .mep-stock-create-lot { grid-column: 1 / -1; width: 100%; }
/* Same reversible bag transfer as the dialog, kept inside the expanded lot. */
#view-mep-stock .mep-stock-inline-transfer { display:block; background:transparent !important; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-board { gap:8px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-zone { padding:8px 6px 6px; border-radius:10px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-zone>header { flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:3px 5px; padding:0 1px 6px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-zone>header>span { font-size:9px; letter-spacing:.03em; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-bags { min-height:50px; gap:2px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-bag { width:44px; min-height:50px; padding:4px 2px; gap:3px; border-radius:7px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-bag .mp-bag { width:21px; height:31px; }
#view-mep-stock .mep-stock-inline-transfer .mp-stack::before { width:21px; height:28px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-empty { min-height:50px; gap:3px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-empty .mp-bag { width:21px; height:31px; }
#view-mep-stock .mep-stock-inline-transfer .msa-zone-date { margin-top:5px; font-size:10px; }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-status { min-height:36px; color:var(--mp-orange); }
#view-mep-stock .mep-stock-inline-transfer .msa-transfer-reset { min-height:44px; padding:4px 0 4px 6px; }
#view-mep-stock .mep-stock-lot-actions .switch.is-pending { background:#ffb340 !important; color:#352000 !important; border-color:#ffb340 !important; box-shadow:0 2px 8px #ffb34030; }
#view-mep-stock .has-pending-switch .mep-stock-lot-main>strong { color:var(--msc-oldest); }
@media (max-width: 430px) {
    #view-mep-stock { --msc-quantities: 146px; }
    #view-mep-stock .mep-stock-header,
    #view-mep-stock .mep-stock-controls { padding-left: 8px; padding-right: 8px; }
    #view-mep-stock .mep-stock-content { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 360px) {
    #view-mep-stock { --msc-quantities: 126px; }
    #view-mep-stock .mep-stock-header { grid-template-columns: 49px minmax(0, 1fr) 100px; gap: 6px; }
    #view-mep-stock .mep-stock-back-btn,
    #view-mep-stock .mep-stock-end-service-btn { padding: 7px 5px; font-size: 11px; }
    #view-mep-stock .mep-stock-end-service-btn { gap: 4px; }
    #view-mep-stock #mep-stock-summary { font-size: 10px; }
    #view-mep-stock .mep-stock-item-toggle,
    #view-mep-stock .mep-stock-section-head { gap: 3px; padding-left: 8px; padding-right: 6px; }
    #view-mep-stock .mep-stock-item-name { font-size: 12px; }
    #view-mep-stock .mep-stock-column-labels,
    #view-mep-stock .mep-stock-overview { gap: 4px; }
    #view-mep-stock .mp-bag { width: 14px; height: 24px; }
    #view-mep-stock .mp-stack::before { width: 14px; height: 21px; }
    #view-mep-stock .mp-pockets > span { gap: 2px; }
    #view-mep-stock .mp-stack { padding-left: 4px; }
    #view-mep-stock .mep-stock-preference-bar { grid-template-columns: minmax(0, 1fr) 94px; }
}