/* 20260926 07:29 */
/* =============================================================================
   MAPPEDSTORE.CSS
   Unified row structure for Tasks, Products, and Store stops in The List.
   ============================================================================= */


/* =============================================================================
   MOBILE LONG-PRESS SUPPRESSION
   A tap/hold on the mic <img> (and other icons/buttons) was triggering the
   browser's native long-press menu (Save Image / Copy / Share) on mobile —
   reported as looking like a right-click. `[onclick]` catches nearly every
   custom control in this app since they're all built with inline onclick=
   strings; the named classes below are the ones without one. `button, img`
   catch everything else, including images the JS builds dynamically.
   Paired with a delegated `contextmenu` preventDefault in maininit.js
   (that part covers Android); `-webkit-touch-callout` here is specifically
   for iOS Safari's separate long-press image/text callout, which JS
   contextmenu handling doesn't fully suppress on its own. Deliberately NOT
   applied to .ms-row-text/.ms-item-name/etc — those are genuine content
   (task/item descriptions) people may legitimately want to select or copy.
   ============================================================================= */
button, img, [onclick], .ms-task-pin, .ms-task-btn, .ms-qty-btn, .ms-store-badge-available, .ms-store-badge-assigned, .ms-mode-toggle, .ms-tool-btn, .ms-ai-pill, .ms-ordered-by-btn, .ms-flag-btn, .ms-online-active-btn, .ms-online-shop-btn, .ms-online-softdone-btn, .ms-online-undo-btn, .ms-shop-sheet-close, .ms-shop-sheet-row{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}


/* =============================================================================
   UNIFIED LIST ROW — used by all three section types
   ============================================================================= */

.ms-list-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Stop/item ID badge — T1, K1, S1 */
.ms-row-id {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    background: #fff;
    color: #130076;
    border-radius: 3px;
    padding: 1px 4px;
    margin-right: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hidden ID/icon — used in column headers to align with rows */
.ms-row-icon-hidden{
    visibility: hidden;
}

/* Icon — emoji or badge, fixed width */
.ms-row-icon {
    flex-shrink: 0;
    padding: 2px 4px;
}

/* Text — takes all remaining space */
.ms-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Unit suffix — " - kg" after an item's name (ms-row-text, ms-item-name,
   ms-online-item-name). Shown for every item, including IUnit 0/each
   (e.g. "Beer - Un") — sfMSUnitSuffixHtml() (mappedstore.js) no longer
   special-cases 0. Muted/small so the name stays the primary thing
   scanned. */
.ms-unit-suffix {
    color: #888;
    font-weight: 400;
    font-size: 0.85em;
}

/* Location column — fixed width, left of name */
.ms-row-loc {
    flex: 0 0 36px;
    font-size: 0.72rem;
    color: #555;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
    text-align: right;
}

/* W and P columns — fixed width, centred */
.ms-row-w,
.ms-row-p {
    flex: 0 0 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}


/* =============================================================================
   SECTION WRAPPERS
   ============================================================================= */

.ms-section {
    margin-bottom: 12px;
}

.ms-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 8px;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
    background-color: #130076;
    color: #ff8605;
    border-radius: 4px;
}



.ms-section-title .ms-store-select {
    font-size: 0.8rem;
    background: #1a0099;
    color: #ff8605;
    border: 1px solid #ff8605;
    border-radius: 4px;
    padding: 2px 4px;
}

.ms-trip-view {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.ms-section {
    width: 100%;
    box-sizing: border-box;
}



.ms-section-items {
    margin-top: 4px;
}


/* =============================================================================
   TASK ROWS
   ============================================================================= */

.ms-task-pin {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    user-select: none;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.ms-task-pin:hover {
    opacity: 0.7;
}

.ms-task-pin.ms-chevron-open {
    outline: 2px solid rgba(0,0,0,0.15);
}

/* Done state */
.ms-task-done .ms-row-text {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Item done state (qty picked reached qty wanted) — two selectors since
   the two item-row renderers use different name-span classes: ms-row-text
   for items inside a store card, ms-item-name for the Products section. */
.ms-item-done .ms-row-text,
.ms-item-done .ms-item-name {
    text-decoration: line-through;
    text-decoration-color: #dc3545;
    opacity: 0.6;
}

/* Task action icons — inline, next to the disk/checkmark flags */
.ms-task-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.ms-task-btn:hover        { opacity: 0.7; }
.ms-task-btn-delete       { color: #dc3545; }
.ms-task-btn-convert      { color: #0c5460; }

/* Task percent-done badge — doubles as the complete/reopen control,
   replacing the old binary .ms-task-btn-done button. Same palette as
   the Products row's qty badge (.ms-item-qty-badge) for the 0%/100%
   ends, so the two "done" signals read consistently across sections. */
.ms-task-pct-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    flex-shrink: 0;
    cursor: pointer;
}

.ms-task-pct-badge-partial {
    background: #ff8605;
    color: #000;
    border-color: #ff8605;
}

.ms-task-pct-badge-done {
    background: #130076;
    color: #ffc72c;
    border-color: #130076;
}

.ms-task-pct-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-task-pct-slider {
    flex: 1;
}

.ms-task-pct-readout {
    min-width: 34px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
}

.ms-done-badge {
    color: #155724;
    font-weight: 700;
    margin-left: 4px;
}


/* =============================================================================
   QUANTITY BUTTONS — W and P
   ============================================================================= */

.ms-qty-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 22px;
    height: 22px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ms-qty-btn:hover {
    background: #e0e0e0;
}

.ms-qty-val {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font-size: 0.85rem;
}

/* Products remove (x) — only enabled once wanted qty is 0; shown dimmed
   and disabled otherwise rather than hidden, so removal path is visible. */
.ms-item-remove-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #dc3545;
}

.ms-item-remove-btn:hover {
    opacity: 0.7;
}

.ms-item-remove-btn-disabled {
    color: #6c757d;
    cursor: not-allowed;
}

.ms-item-remove-btn-disabled:hover {
    opacity: 1;
}


/* =============================================================================
   STORE HEADER ROW
   ============================================================================= */



.ms-you-are-here {
    font-size: 0.72rem;
    background: #28a745;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    white-space: nowrap;
}


/* =============================================================================
   ITEM CARD — single horizontal row, 4 columns
   Col 1: Kx + icon + name (fixed, truncates)
   Col 2: store count badge
   Col 3: mode toggle
   Col 4: mode section (P/W or settings), switches in place
   ============================================================================= */

.ms-item-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: #fff;
}

/* Col 1 — Kx + icon + name */
.ms-item-s1 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.ms-item-name {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    cursor: pointer;
    flex: 1 1 auto;
}

/* Col 2+3 wrapper */
.ms-item-s2s3 {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Store count badge */
.ms-store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 5px;
}

/* Picked/wanted qty badge — Products row. Doubles as the complete/
   uncomplete control (previously a separate button): not complete ->
   click completes; complete -> click undoes one unit of the clicker's
   own picked share (see vfMSItemUncompleteOne). Shown only when a wanted
   quantity is actually set. */
.ms-item-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    flex-shrink: 0;
    cursor: pointer;
}

.ms-item-qty-badge-done {
    background: #130076;
    color: #ffc72c;
    border-color: #130076;
}

.ms-store-badge-pending {
    background: #130076;
    color: #ff8605;
    opacity: 0.5;
}

.ms-store-badge-none {
    background: #eee;
    color: #aaa;
}

.ms-store-badge-available {
    background: #130076;
    color: #ff8605;
    cursor: pointer;
}

.ms-store-badge-assigned {
    background: #06ac01;
    color: #fff;
    cursor: pointer;
}

/* Store badge open state — outlined to show it's active */
.ms-store-badge-open {
    outline: 2px solid #ff8605;
    outline-offset: 1px;
}

/* Col 4 — mode section, takes remaining space */
.ms-item-s4 {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 4a — store dropdown (shown below the row, full width) */


.ms-store-dropdown {
    width: 100%;
    font-size: 0.82rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 5px;
}

/* 4c — P/W edit */
.ms-item-s4-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #555;
    flex-shrink: 0;
}

.ms-item-s4-label-p {
    margin-left: 4px;
}


.ms-tool-btn {
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

/* Neutral (non-toggle) icon pill — funnel trigger. Deliberately NOT
   .ms-ai-pill-on/-off: those colors (green/red) specifically signal an
   on/off state, and the funnel isn't a toggle — it's just a button that
   opens a popup, same as it was as a bare wrench icon before. Reusing
   the toggle colors here would make it look like something is
   "off"/wrong when nothing is. */
.ms-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: #e0e0e0;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.ms-icon-pill:hover {
    background: #cfcfcf;
}

/* Store picker trigger — was a native <select>, now a pill-shaped button
   matching the funnel/AI/Voice/Hints pills (a native <select>'s open
   option list is rendered by the OS/browser, so no CSS on the closed
   control could ever make the open state match the rest of this
   toolbar — see sfMSBuildToolbar). Variable-width unlike the icon-only
   pills, since it needs to show the current selection's name — capped
   and truncated below via .ms-store-select-label, so a long store name
   can't blow out the row. */
.ms-store-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 40vw;
    font-size: 0.8rem;
    background: #eee;
    color: #333;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
}

.ms-store-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Highlighted when a store is selected as default */
.ms-store-select-active {
    background: #130076;
    color: #ff8605;
    font-weight: 600;
}

/* AI toggle pill — sits inline in toolbar, icon-only */
.ms-ai-pill {
    flex-shrink: 0;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.ms-ai-pill-on {
    background: #06ac01;
}

.ms-ai-pill-on:hover {
    background: #058a01;
}

.ms-ai-pill-off {
    background: #cc0000;
}

.ms-ai-pill-off:hover {
    background: #aa0000;
}

/* Pushes the AI/Voice/Hints/Send/Clear group to the right edge of the
   full-width .ms-trip-toolbar row, separating it visually from the
   funnel + store picker on the left (destination controls vs. input-
   behavior controls). This lived here originally, was removed when the
   pills briefly moved to a content-sized container up by Save (where
   there was no leftover space for auto-margin to push into), and is
   restored now that they're back in this full-width row. #idMSAiPill is
   always the first pill rendered (sfMSBuildToolbar) — if that ever
   changes, this needs to move with it. */
#idMSAiPill {
    margin-left: auto;
}

/* Round icon buttons — Send/Clear next to the AI pill. Same fixed-circle
   treatment as the mic button, not the AI pill's rounded-rectangle (that
   shape fits varying text width; these are single icons). Colors are
   deliberately not the AI pill's green/red — that pair specifically
   signals on/off state, and Send/Clear have no state to signal. Clear's
   gray matches the existing revert-badge convention (gClsProfPicRevertBadge
   in global.css), not a new one-off gray. */
.ms-round-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.ms-round-tool-btn:hover {
    opacity: 0.85;
}

.ms-send-btn {
    background: #06ac01;
}

.ms-clear-btn {
    background: #6c757d;
}


/* =============================================================================
   POPUP
   ============================================================================= */

.ms-section {
    position: relative;
}

.ms-popup-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.ms-popup-note {
    font-size: 0.8rem;
    color: #888;
    padding: 2px 0;
}





.ms-popup-divider {
    border-top: 1px solid #eee;
    margin: 8px 0;
}

.ms-online-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}

.ms-online-filter-enable {
    cursor: pointer;
    flex: 0 0 auto;
}

.ms-online-filter-carries {
    cursor: pointer;
    color: #555;
    font-size: 0.78rem;
    flex: 1;
}

.ms-online-filter-enable input[type="checkbox"],
.ms-online-filter-carries input[type="checkbox"] {
    margin-right: 3px;
}

/* Store picker popup rows — click-to-select-and-close, unlike the filter
   popup's stay-open checkboxes above. .ms-store-picker-popup reuses
   .ms-list-popup's box (position/background/border/shadow) via a second
   class rather than duplicating those rules — see sfMSBuildToolbar. */
.ms-store-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
}

.ms-store-picker-row:hover {
    background: #f2f2f2;
}

.ms-store-picker-row-selected {
    background: #eef0ff;
    font-weight: 600;
}

.ms-store-picker-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   TRIP TOOLBAR — sits at top of multistore view, above all sections
   ============================================================================= */

/* Wrapper provides the positioned ancestor for the popup */
.ms-trip-toolbar-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.ms-trip-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
}

.ms-list-popup {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 200px;
}

/* Store picker specifically can hold three whole groups of rows
   (Places/Stores/Online) — cap height and let it scroll rather than the
   popup growing arbitrarily tall on an account with a lot of locations. */
.ms-store-picker-popup {
    max-height: 60vh;
    overflow-y: auto;
}

/* =============================================================================
   STORE ASSIGNMENT BUTTONS — inline on ArList product rows
   ============================================================================= */









/* Assigned store button — highlighted, not re-tappable visually */




/* =============================================================================
   ORDERED BY — multi-user avatar and expand panel
   ============================================================================= */

.ms-ordered-by-btn {
    cursor: pointer;
    padding: 0 4px;
    font-size: 14px;
    user-select: none;
}

.ms-ordered-by-btn:hover {
    opacity: 0.7;
}

.ms-ordered-by-panel {
    padding: 4px 8px 4px 24px;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    margin-top: 4px;
}

.ms-ordered-by-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    color: var(--color-text-secondary, #666);
}

.ms-ordered-by-name {
    flex: 1;
}

.ms-ordered-by-qty {
    font-weight: 600;
    margin-left: 8px;
}


/* =============================================================================
   ITEM FLAGS — f_save (floppy) and f_active (circle-check) icon toggles
   ============================================================================= */

/* Column — fixed width, sits between name and W */
.ms-row-flags {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Individual flag button — no chrome, just the icon */
.ms-flag-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 1;
    transition: opacity 0.15s ease;
    color: #130076;
}

.ms-flag-btn:hover {
    opacity: 0.7;
}

/* Inactive state — visibly off but not invisible */
.ms-flag-btn-off {
    opacity: 0.5;
    color: #bbb;
}

/* Active circle-check — green */
.ms-flag-btn .fa-circle-check {
    color: #28a745;
}

/* Inactive circle-check — orange */
.ms-flag-btn-off .fa-circle-check {
    color: #ff8605;
}

/* Active floppy — navy */
.ms-flag-btn .fa-floppy-disk {
    color: #130076;
}

/* Inactive floppy — grey */
.ms-flag-btn-off .fa-floppy-disk {
    color: #bbb;
}

/* obv-col-flags — at-store grid column, same width as ms-row-flags */


/* Inactive row — dimmed with strikethrough on name */
.ms-row-inactive .ms-row-text{
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-color: #999;
}

.ms-row-inactive .ms-row-w, .ms-row-inactive .ms-row-p{
    opacity: 0.35;
}

.ms-row-inactive {
    background: rgba(0,0,0,0.03);
}

/* =============================================================================
   ONLINE STOP CARD
   ============================================================================= */

.ms-online-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fafafa;
    overflow: visible;
}

.ms-online-card.ms-online-active {
    border-color: #130076;
    background: #f5f3ff;
}

.ms-online-card.ms-online-softdone {
    opacity: 0.55;
}

.ms-online-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    background: #130076;
    border-radius: 6px 6px 0 0;
    color: #ff8605;
}

.ms-online-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.9rem;
}

.ms-online-active-btn {
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ff8605;
    color: #ff8605;
    background: transparent;
    line-height: 1;
}

.ms-online-active-btn-on {
    background: #ff8605;
    color: #130076;
}

.ms-online-items {
    padding: 6px 10px;
}

.ms-online-item-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
}

.ms-online-item-row:last-child {
    border-bottom: none;
}

.ms-online-item-name {
    flex: 1;
}

.ms-online-item-link {
    color: #0d6efd;
    text-decoration: none;
}

.ms-online-item-link:hover {
    text-decoration: underline;
}

.ms-online-item-qty {
    color: #888;
    font-size: 0.8rem;
    margin-left: 6px;
}

.ms-online-footer {
    padding: 8px 10px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ms-online-shop-btn {
    background: #ff8605;
    color: #130076;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.ms-online-softdone-btn {
    background: transparent;
    color: #130076;
    border: 1px solid #130076;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ms-online-undo-btn {
    background: transparent;
    color: #888;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ms-online-disclosure {
    width: 100%;
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 4px;
}

.ms-online-empty {
    padding: 12px 10px;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

/* =============================================================================
   SHOP BOTTOM SHEET
   ============================================================================= */

.ms-shop-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 2px solid #130076;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
    z-index: 200;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ms-shop-sheet-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 8px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
}

.ms-shop-sheet-title {
    flex: 1;
    font-weight: 700;
    font-size: 1rem;
    color: #130076;
}

.ms-shop-sheet-close {
    cursor: pointer;
    font-size: 1.1rem;
    color: #888;
    padding: 2px 6px;
}

.ms-shop-sheet-note {
    font-size: 0.78rem;
    color: #888;
    padding: 6px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.ms-shop-sheet-items {
    padding: 4px 0;
}

.ms-shop-sheet-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: #130076;
    gap: 8px;
}

.ms-shop-sheet-row:hover,
.ms-shop-sheet-row:active {
    background: #f0f0ff;
}

.ms-shop-item-name {
    flex: 1;
    font-size: 0.95rem;
}

.ms-shop-item-qty {
    color: #888;
    font-size: 0.82rem;
    white-space: nowrap;
}

.ms-shop-item-chevron {
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1;
}

/* =============================================================================
   SOFT DELETE — items removed by another user while this user has IP > 0
   ============================================================================= */




/* Store logo in filter popup rows */
.ms-filter-store-pic {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 2px;
}

/* =============================================================================
   COPY TO LIST DIALOG
   ============================================================================= */

.obv-copy-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.obv-copy-picklist {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
}

.obv-copy-pick-row {
    display: block;
    padding: 3px 0 3px 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.obv-copy-picklist .ms-section {
    margin-bottom: 10px;
}

.obv-copy-picklist .ms-section:last-child {
    margin-bottom: 0;
}

.obv-copy-section-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.obv-copy-pick-row input {
    margin-right: 6px;
}

.obv-copy-dest {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.obv-copy-newname {
    margin: 2px 0 6px 22px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9rem;
}

.obv-copy-existing-sel {
    margin: 2px 0 6px 22px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9rem;
}

.obv-copy-merge-replace {
    margin-left: 22px;
    display: flex;
    gap: 16px;
}

.obv-copy-confirm-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* Label header row inside the copy picklist:
   [copy-label box + tag icon + colored label] ........ [list icon + items box] */
.obv-copy-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.obv-copy-label-copy {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    min-width: 0;
}

.obv-copy-label-copy .ms-label-header {
    margin: 3px 0;
}

/* Unassigned — no copy box; indent the chip to line up with the others */
.obv-copy-label-nocopy {
    cursor: default;
    padding-left: 18px;
}

.obv-copy-label-items {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    cursor: pointer;
}

.obv-copy-lbl-icon {
    font-size: 0.75rem;
    color: #130076;
}

.obv-copy-pick-row {
    padding-left: 22px;
}

/* Inactive (parked) items — dimmed + struck through, same cue as the grid */
.obv-copy-pick-inactive .obv-copy-pick-text {
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-color: #999;
}

.obv-copy-store-note {
    font-size: 0.8rem;
    color: #555;
    background: rgba(255,134,5,0.10);
    border-left: 3px solid #ff8605;
    padding: 4px 8px;
    border-radius: 3px;
}

/* =============================================================================
   LABELS — grouped section headers, item/task chips, reorder buttons
   ============================================================================= */

.ms-label-header {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    margin: 6px 0 3px;
    border-radius: 3px;
    display: inline-block;
}

.ms-label-chip {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 4px;
}

.ms-label-chip-select {
    font-size: 0.75rem;
    margin-left: 4px;
    max-width: 110px;
}

.ms-reorder-btns {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.7;
    margin-left: 4px;
    vertical-align: middle;
}

.ms-reorder-btn {
    font-size: 0.6rem;
    cursor: pointer;
    color: #666;
    padding: 1px 0;
}

.ms-reorder-btn:hover {
    color: #130076;
}

.ms-reorder-btn-disabled {
    color: #ddd;
    cursor: default;
    pointer-events: none;
}

/* =============================================================================
   ORGANIZE DIALOG
   ============================================================================= */

.obv-organize-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 60vh;
    overflow-y: auto;
}

.obv-organize-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.obv-organize-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.obv-organize-color {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.obv-organize-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.85rem;
}

.obv-organize-locked-spacer {
    width: 68px; /* keeps locked (Unassigned) row's text field aligned with the rest */
    display: inline-block;
}

/* =============================================================================
   ITEM / TASK DIALOG
   ============================================================================= */

.obv-item-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.obv-item-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.obv-item-dialog-field label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
}

.obv-item-dialog-value {
    font-size: 0.9rem;
    padding: 3px 0;
}

.obv-item-dialog-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.obv-item-dialog-person {
    font-size: 0.8rem;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 2px 8px;
}

/* Task notes */
.ms-note-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: -6px;
    vertical-align: top;
    position: relative;
    top: -4px;
}

.ms-notes-dialog {
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.ms-notes-empty {
    color: #777;
    font-style: italic;
}

.ms-note-card {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.ms-note-meta {
    font-size: 0.78rem;
    color: #555;
    margin-bottom: 4px;
}

.ms-note-date {
    color: #888;
}

.ms-note-text {
    font-size: 0.88rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.ms-note-edit-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 6px;
    color: #130076;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.ms-note-edit-btn:hover { text-decoration: underline; }

.ms-note-edit-textarea {
    font-size: 0.88rem;
}

.ms-note-edit-btns {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.ms-notes-limit {
    color: #dc3545;
    font-size: 0.82rem;
    margin-top: 0.75rem;
}

.ms-note-add {
    margin-top: 1rem;
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
}

.ms-note-counter {
    font-size: 0.72rem;
    color: #888;
    text-align: right;
    margin-top: 2px;
}

.ms-note-counter-over {
    color: #dc3545;
    font-weight: 700;
}