/* ==== inline-block-1 (extracted from inventory.php inline <style>) ==== */
:root{
    --inv-dark:#0f172a;
    --inv-blue:#2563eb;
    --inv-purple:#7c3aed;
    --inv-green:#16a34a;
    --inv-orange:#f97316;
    --inv-line:#e5e7eb;
    --inv-muted:#64748b;
    --inv-soft:#f8fafc;
}
body{background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%)}
.inventory-shell{padding:18px 0 90px}
.inventory-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.inventory-brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:inherit;
    text-decoration:none;
}
.inventory-logo,.inventory-fallback{
    width:70px;
    height:70px;
    border-radius:20px;
    object-fit:cover;
    background:#fff;
    border:1px solid var(--inv-line);
    box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.inventory-fallback{
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:1000;
    background:linear-gradient(135deg,var(--inv-dark),var(--inv-blue),var(--inv-purple));
}
.inventory-title h1{margin:0;font-size:30px;letter-spacing:-.03em}
.inventory-title p{margin:5px 0 0;color:var(--inv-muted);font-weight:800}

.inv-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.inv-card{
    background:#fff;
    border:1px solid var(--inv-line);
    border-radius:24px;
    padding:18px;
    box-shadow:0 14px 36px rgba(15,23,42,.07);
}
.inv-side{position:sticky;top:14px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.section-title h3{margin:0;font-size:20px}
.category-list{display:grid;gap:10px}
.category-btn{
    width:100%;
    border:0;
    border-radius:16px;
    padding:14px 16px;
    text-align:left;
    font:inherit;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.25px;
    cursor:pointer;
    background:#f3f4f6;
    color:#111827;
}
.category-btn:nth-child(6n+1){background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#9a3412}
.category-btn:nth-child(6n+2){background:linear-gradient(135deg,#ecfeff,#cffafe);color:#155e75}
.category-btn:nth-child(6n+3){background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#166534}
.category-btn:nth-child(6n+4){background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#5b21b6}
.category-btn:nth-child(6n+5){background:linear-gradient(135deg,#fdf2f8,#fce7f3);color:#9d174d}
.category-btn:nth-child(6n+6){background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8}
.category-btn.active{
    color:#fff!important;
    background:linear-gradient(135deg,var(--inv-dark),var(--inv-blue),var(--inv-purple))!important;
    box-shadow:0 14px 28px rgba(37,99,235,.22);
}
.mobile-category-bar{display:none;position:sticky;top:0;z-index:30;margin-bottom:12px}
.mobile-category-trigger{
    width:100%;
    border:0;
    border-radius:22px;
    min-height:58px;
    padding:0 15px;
    color:#fff;
    background:linear-gradient(135deg,var(--inv-dark),var(--inv-blue),var(--inv-purple));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-weight:1000;
    box-shadow:0 16px 34px rgba(37,99,235,.26);
}
.mobile-category-menu{
    display:none;
    margin-top:9px;
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:20px;
    padding:9px;
    box-shadow:0 20px 45px rgba(15,23,42,.14);
    max-height:350px;
    overflow:auto;
}
.mobile-category-menu.open{display:grid;gap:8px}
.mobile-category-option{
    border:1px solid #e5e7eb;
    border-radius:15px;
    background:#f8fafc;
    padding:13px;
    text-align:left;
    font-weight:1000;
    text-transform:uppercase;
}
.mobile-category-option.active{background:#111827;color:#fff}
.search-wrap{margin-bottom:14px}
.search-input{
    width:100%;
    min-height:48px;
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:0 14px;
    font:inherit;
    font-weight:800;
}
.inventory-list{display:grid;gap:14px}
.inv-item-card{
    border:1px solid var(--inv-line);
    border-radius:22px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.inv-item-summary{
    width:100%;
    border:0;
    background:linear-gradient(135deg,#fff,#f8fbff);
    padding:14px;
    display:grid;
    grid-template-columns:74px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    text-align:left;
    cursor:pointer;
}
.inv-thumb{
    width:74px;
    height:74px;
    border-radius:18px;
    object-fit:cover;
    background:#f3f4f6;
    border:1px solid var(--inv-line);
}
.inv-thumb-fallback{
    width:74px;
    height:74px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:#f1f5f9;
    color:#94a3b8;
    font-weight:1000;
    border:1px solid var(--inv-line);
}
.inv-name{margin:0 0 5px;font-size:18px;color:#0f172a}
.inv-desc{margin:0;color:var(--inv-muted);font-size:13px;line-height:1.35}
.inv-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(92px,1fr));
    gap:7px;
    margin-top:9px;
}
.inv-mini{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:13px;
    padding:7px 8px;
    font-size:11px;
    font-weight:900;
    color:#475569;
}
.inv-mini b{display:block;color:#0f172a;font-size:13px;margin-top:3px}
.inv-open-pill{
    border-radius:999px;
    background:#111827;
    color:#fff;
    padding:8px 11px;
    font-size:12px;
    font-weight:1000;
}
.inv-item-body{
    display:none;
    border-top:1px solid var(--inv-line);
    background:#fff;
    padding:14px;
}
.inv-item-card.open .inv-item-body{display:block}
.inv-edit-grid{display:grid;gap:12px}
.inv-edit-row{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(120px,.75fr)) auto;
    gap:9px;
    align-items:end;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:12px;
}
.inv-edit-title strong{display:block;color:#0f172a;font-size:15px}
.inv-edit-title small{display:block;color:var(--inv-muted);font-weight:800;margin-top:3px}
.inv-field label{
    display:block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.35px;
    color:#64748b;
    font-weight:1000;
    margin-bottom:5px;
}
.inv-input-wrap{
    display:flex;
    align-items:center;
    gap:6px;
}
.inv-field input{
    width:100%;
    min-height:42px;
    border:1px solid #cbd5e1;
    border-radius:13px;
    padding:0 10px;
    font-weight:900;
    background:#fff;
}
.inv-qty-btn{
    border:0;
    min-width:36px;
    height:36px;
    border-radius:12px;
    color:#fff;
    background:#0f172a;
    font-weight:1000;
    cursor:pointer;
}
.inv-readonly{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border-radius:13px;
    border:1px solid #dbeafe;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:1000;
}
.inv-profit.positive{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.inv-profit.negative{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.inv-save{
    border:0;
    min-height:42px;
    border-radius:14px;
    padding:0 13px;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    font-weight:1000;
    cursor:pointer;
}
.inv-note{
    margin-top:12px;
    border:1px solid #dbeafe;
    background:#eff6ff;
    color:#1e40af;
    border-radius:16px;
    padding:11px 12px;
    font-size:13px;
    font-weight:800;
}
.toast{
    position:fixed;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    z-index:200;
    border-radius:999px;
    background:#111827;
    color:#fff;
    padding:11px 15px;
    font-weight:1000;
    box-shadow:0 18px 40px rgba(15,23,42,.28);
    display:none;
}
.toast.show{display:block}
.empty-box{
    padding:24px;
    text-align:center;
    border:1px dashed #cbd5e1;
    background:#fff;
    border-radius:20px;
    color:#64748b;
    font-weight:850;
}
@media(max-width:980px){
    .inv-layout{grid-template-columns:1fr}
    .inv-side{display:none}
    .mobile-category-bar{display:block}
    .inv-edit-row{grid-template-columns:1fr 1fr}
    .inv-save{grid-column:1/-1}
}
@media(max-width:640px){
    .inventory-shell{padding:12px 0 80px}
    .inventory-head{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-bottom:12px;
    }
    .inventory-brand{
        background:linear-gradient(135deg,#0f172a,#2563eb,#7c3aed);
        color:#fff;
        border-radius:22px;
        padding:12px;
        box-shadow:0 16px 34px rgba(37,99,235,.22);
    }
    .inventory-logo,.inventory-fallback{width:56px;height:56px;border-radius:17px}
    .inventory-title h1{font-size:23px;color:#fff}
    .inventory-title p{font-size:12px;color:rgba(255,255,255,.82)}
    
    .inv-card{border-radius:20px;padding:13px}
    .inv-item-summary{
        grid-template-columns:60px minmax(0,1fr);
        align-items:start;
        padding:12px;
    }
    .inv-thumb,.inv-thumb-fallback{width:60px;height:60px;border-radius:16px}
    .inv-open-pill{grid-column:1/-1;width:100%;text-align:center}
    .inv-mini-grid{grid-template-columns:1fr 1fr}
    .inv-edit-row{grid-template-columns:1fr;padding:11px;border-radius:16px}
    .inv-input-wrap{display:grid;grid-template-columns:36px 1fr 36px}
    .inv-field input{text-align:center}
}


.inv-simple-note{
    margin-top:10px;
    border:1px solid #dbeafe;
    background:#eff6ff;
    color:#1d4ed8;
    border-radius:14px;
    padding:10px 12px;
    font-size:12px;
    font-weight:850;
    line-height:1.4;
}


/* v96 inventory input/button fix */
.inv-input-wrap input{
    pointer-events:auto!important;
    user-select:auto!important;
    -webkit-user-select:auto!important;
}
.inv-qty-btn{
    pointer-events:auto!important;
    touch-action:manipulation;
}
.inv-edit-row{
    align-items:end;
}


.low-stock-backdrop{
    position:fixed;
    inset:0;
    z-index:260;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.60);
    backdrop-filter:blur(8px);
}
.low-stock-backdrop.open{display:flex}
.low-stock-card{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:26px;
    border:1px solid #fed7aa;
    box-shadow:0 28px 80px rgba(15,23,42,.32);
    overflow:hidden;
    animation:lowStockPop .18s ease-out;
}
@keyframes lowStockPop{
    from{transform:translateY(12px) scale(.97);opacity:.2}
    to{transform:translateY(0) scale(1);opacity:1}
}
.low-stock-top{
    padding:18px;
    color:#fff;
    background:
        radial-gradient(circle at top left,rgba(250,204,21,.35),transparent 38%),
        linear-gradient(135deg,#991b1b,#f97316);
}
.low-stock-top strong{
    display:block;
    font-size:22px;
    line-height:1.1;
}
.low-stock-top small{
    display:block;
    margin-top:5px;
    font-weight:850;
    color:rgba(255,255,255,.88);
}
.low-stock-body{padding:18px}
.low-stock-item{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#7c2d12;
    border-radius:18px;
    padding:13px;
    margin-bottom:12px;
}
.low-stock-item b{
    display:block;
    color:#111827;
    font-size:18px;
    margin-bottom:3px;
}
.low-stock-item span{
    font-weight:900;
}
.low-stock-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
}
.low-stock-actions button{
    min-height:46px;
    border-radius:16px;
    border:0;
    cursor:pointer;
    font-weight:1000;
    box-shadow:0 12px 24px rgba(15,23,42,.10);
}
.low-stock-update{
    background:linear-gradient(135deg,#111827,#2563eb);
    color:#fff;
}
.low-stock-later{
    background:#f3f4f6;
    color:#111827;
}
.low-stock-actions button:active{transform:scale(.97)}
@media(max-width:680px){
    .low-stock-card{border-radius:22px}
    .low-stock-actions{grid-template-columns:1fr}
}


.low-stock-list{
    display:grid;
    gap:10px;
    max-height:320px;
    overflow:auto;
    padding-right:4px;
    margin:12px 0;
}
.low-stock-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:18px;
    padding:12px;
}
.low-stock-row b{
    display:block;
    color:#111827;
    font-size:15px;
    line-height:1.25;
}
.low-stock-row small{
    display:block;
    color:#9a3412;
    font-weight:900;
    margin-top:4px;
}
.low-stock-row button{
    min-height:38px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#111827,#2563eb);
    color:#fff;
    font-weight:1000;
    padding:0 12px;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(37,99,235,.20);
}
.low-stock-summary{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    border-radius:999px;
    background:#fef3c7;
    color:#92400e;
    padding:0 10px;
    font-size:12px;
    font-weight:1000;
    margin-top:8px;
}
@media(max-width:680px){
    .low-stock-list{max-height:360px}
    .low-stock-row{grid-template-columns:1fr}
    .low-stock-row button{width:100%}
}


.demo-preview-notice{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    border-radius:16px;
    padding:10px 12px;
    font-weight:900;
    margin:0 0 14px;
}


.empty-state{
    padding:22px;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#f8fafc;
    color:#64748b;
    font-weight:900;
    text-align:center;
}

/* v130 desktop inventory layout fix */
@media (min-width:981px){
    .mobile-category-bar{display:none!important}
    .inv-layout{
        display:grid!important;
        grid-template-columns:280px minmax(0,1fr)!important;
        gap:18px!important;
        align-items:start!important;
    }
    .inv-side{
        display:block!important;
        position:sticky!important;
        top:14px!important;
        max-height:calc(100vh - 28px);
        overflow:auto;
    }
    .category-list{
        display:grid!important;
        gap:10px!important;
    }
    .category-btn{
        display:block!important;
        width:100%!important;
        min-height:48px;
    }
    .category-panel{
        min-height:120px;
    }
}



/* v132 desktop single-category-sidebar fix */
@media (min-width:701px){
    .mobile-category-bar{display:none!important}
    .inv-side{
        display:block!important;
        visibility:visible!important;
        opacity:1!important;
    }
    .inv-side .category-list{
        display:grid!important;
        visibility:visible!important;
        opacity:1!important;
    }
    .inv-side .category-btn{
        display:block!important;
        visibility:visible!important;
        opacity:1!important;
    }
}


.inv-top-actions{display:flex;justify-content:flex-end;margin-bottom:12px}
.plus-add-btn{width:46px;height:46px;border:0;border-radius:17px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:28px;line-height:1;font-weight:1000;box-shadow:0 14px 30px rgba(34,197,94,.25);cursor:pointer}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);display:none;align-items:center;justify-content:center;z-index:280;padding:18px;backdrop-filter:blur(8px)}
.modal-backdrop.open{display:flex}
.modal-card{background:#fff;border-radius:28px;width:100%;max-width:980px;max-height:92vh;overflow:auto;box-shadow:0 28px 80px rgba(15,23,42,.32)}
.floating-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;color:#fff;background:linear-gradient(135deg,#111827,#2563eb,#7c3aed)}
.floating-modal-head h3{margin:0;font-size:22px}.floating-modal-body{padding:20px;background:linear-gradient(180deg,#fff,#f8fbff)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-row.full{grid-column:1/-1}.label{display:block;margin-bottom:6px;font-size:12px;font-weight:1000;color:#475569;text-transform:uppercase;letter-spacing:.3px}
.input{width:100%;min-height:46px;border:1px solid #cbd5e1;border-radius:14px;padding:0 12px;font:inherit;font-weight:850;background:#fff}
textarea.input{padding:12px;min-height:82px}.inline-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ghost-btn,.solid-btn{border:0;border-radius:14px;min-height:44px;padding:0 15px;font-weight:1000;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ghost-btn{background:#f1f5f9;color:#0f172a}.solid-btn{background:linear-gradient(135deg,#111827,#2563eb);color:#fff}
.variation-box{border:1px solid #e5e7eb;border-radius:18px;padding:14px;background:#f9fafb;margin-bottom:12px}
.variation-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr .9fr auto;gap:12px;align-items:end}
.deal-grid{display:grid;grid-template-columns:1.7fr 1fr auto;gap:12px;align-items:end}
.variation-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 12px;gap:10px}
.variation-title{font-size:14px;font-weight:1000;color:#374151}
.inventory-notice{margin:0 0 12px;border-radius:16px;padding:11px 12px;font-weight:900}
.inventory-notice.success{background:#ecfdf5;border:1px solid #bbf7d0;color:#166534}
.inventory-notice.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
@media(max-width:780px){.form-grid,.variation-grid,.deal-grid{grid-template-columns:1fr}.modal-backdrop{align-items:flex-start}.modal-card{border-radius:22px}}


/* v152 beautiful low-stock later button */
.low-stock-actions{
    margin-top:16px!important;
}
.low-stock-later{
    position:relative;
    min-height:52px!important;
    border-radius:18px!important;
    border:1px solid #fed7aa!important;
    color:#7c2d12!important;
    background:
        radial-gradient(circle at top left,rgba(251,191,36,.38),transparent 36%),
        linear-gradient(135deg,#fff7ed,#fed7aa,#fdba74)!important;
    box-shadow:0 14px 30px rgba(249,115,22,.18)!important;
    font-size:14px!important;
    letter-spacing:.1px;
    overflow:hidden;
}
.low-stock-later::before{
    content:"⏰";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:999px;
    margin-right:8px;
    background:#fff;
    color:#ea580c;
    box-shadow:0 8px 18px rgba(124,45,18,.12);
    vertical-align:middle;
}
.low-stock-later:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px rgba(249,115,22,.24)!important;
}
.low-stock-later:active{
    transform:scale(.98)!important;
}
@media(max-width:680px){
    .low-stock-later{
        min-height:54px!important;
        font-size:13px!important;
    }
}


/* v153 inventory Add New Item card same behavior as Admin */
#addInventoryItemModal .modal-card{
    max-width:980px!important;
    max-height:92vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
    border-radius:28px!important;
}
#addInventoryItemModal .floating-modal-body{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    max-height:calc(92vh - 74px)!important;
}
#addInventoryItemModal .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#addInventoryItemModal #variationSectionInvAdd,
#addInventoryItemModal #dealSectionInvAdd{
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
#addInventoryItemModal .variation-head:first-child{
    margin-top:0!important;
}
@media(max-width:780px){
    #addInventoryItemModal .form-grid,
    #addInventoryItemModal .variation-grid,
    #addInventoryItemModal .deal-grid{
        grid-template-columns:1fr!important;
    }
    #addInventoryItemModal .modal-card{
        max-height:94vh!important;
        border-radius:22px!important;
    }
    #addInventoryItemModal .floating-modal-body{
        max-height:calc(94vh - 72px)!important;
        padding:14px!important;
    }
}


/* v154 inventory action buttons */
.inventory-title-actions{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.plus-add-btn.add-item-pill,
.add-category-pill{
    width:auto!important;
    min-width:126px!important;
    height:46px!important;
    padding:0 15px!important;
    border-radius:17px!important;
    font-size:14px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
}
.add-category-pill{
    border:0;
    background:linear-gradient(135deg,#111827,#2563eb,#7c3aed);
    color:#fff;
    font-weight:1000;
    box-shadow:0 14px 30px rgba(37,99,235,.22);
    cursor:pointer;
}
#addInventoryCategoryModal .modal-card{
    max-width:560px!important;
    padding:0!important;
    overflow:hidden!important;
}
.bulk-ingredient-pill{
    width:auto!important;
    min-width:126px!important;
    height:46px!important;
    padding:0 15px!important;
    border-radius:17px!important;
    font-size:14px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    border:0;
    background:linear-gradient(135deg,#9a3412,#ea580c,#f59e0b);
    color:#fff;
    font-weight:1000;
    box-shadow:0 14px 30px rgba(234,88,12,.24);
    cursor:pointer;
}
@media(max-width:640px){
    /* The active category is already shown clearly at the top (the category
       dropdown bar) and in the Categories list, so this repeated title just
       crowds the action buttons on narrow screens -- hide it here only. */
    #activeCategoryTitle{
        display:none;
    }
    .inventory-title-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .plus-add-btn.add-item-pill,
    .add-category-pill,
    .bulk-ingredient-pill{
        min-width:0!important;
        width:100%!important;
        height:42px!important;
        font-size:13px!important;
        padding:0 10px!important;
    }
}


/* Desktop category scrolling: use natural height up to 14 categories. */
@media (min-width:981px){
    .inv-side{
        max-height:none!important;
        overflow:visible!important;
    }
    .inv-side.category-scroll-enabled{
        max-height:calc(100vh - 28px)!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        scrollbar-gutter:stable;
    }
}


/* ===== RECIPE_V1: recipe / ingredients editor inside the floating card ===== */
.inv-recipe{
    grid-column:1/-1;
    margin-top:6px;
    border:1px solid #e2e8f0;
    border-radius:18px;
    background:#fff;
    padding:13px;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.inv-recipe-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.inv-recipe-title{
    font-size:14px;
    font-weight:1000;
    color:#0f172a;
}
.inv-monitor-wrap{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
}
.inv-monitor-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.35px;
    font-weight:1000;
    color:#64748b;
}
.inv-switch{
    position:relative;
    display:inline-block;
    width:46px;
    height:26px;
    flex-shrink:0;
}
.inv-switch input{
    opacity:0;
    width:0;
    height:0;
    position:absolute;
}
.inv-switch-slider{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#e2e8f0;
    transition:background .18s ease;
}
.inv-switch-slider::before{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 2px 6px rgba(15,23,42,.25);
    transition:transform .18s ease;
}
.inv-switch input:checked + .inv-switch-slider{
    background:linear-gradient(135deg,#16a34a,#22c55e);
}
.inv-switch input:checked + .inv-switch-slider::before{
    transform:translateX(20px);
}
.inv-recipe-cols{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(72px,.55fr) 18px minmax(0,.65fr) 34px 20px;
    gap:7px;
    align-items:center;
    padding:0 2px 6px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-weight:1000;
    color:#94a3b8;
}
.inv-recipe-cols span:nth-child(3),
.inv-recipe-cols span:nth-child(5){text-align:center}
/* Scroller so long ingredient lists stay clean */
.inv-recipe-rows{
    display:grid;
    gap:8px;
    max-height:228px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 4px 2px 2px;
    scrollbar-gutter:stable;
}
.inv-recipe-row{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(72px,.55fr) 18px minmax(0,.65fr) 34px 20px;
    gap:7px;
    align-items:center;
}
.inv-recipe-row select.inv-recipe-unit{
    width:100%;
    min-height:40px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:0 6px;
    font:inherit;
    font-size:13px;
    font-weight:900;
    background:#f8fafc;
    cursor:pointer;
}
.inv-recipe-row select.inv-recipe-unit:focus{outline:0;border-color:#2563eb;background:#fff}
.inv-recipe-row input{
    width:100%;
    min-height:40px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:0 10px;
    font:inherit;
    font-weight:850;
    background:#f8fafc;
}
.inv-recipe-row input:focus{
    outline:0;
    border-color:#2563eb;
    background:#fff;
}
.inv-recipe-sym{
    text-align:center;
    font-weight:1000;
    color:#64748b;
}
.inv-recipe-remove{
    width:34px;
    height:34px;
    border:0;
    border-radius:11px;
    background:#fee2e2;
    color:#b91c1c;
    font-size:17px;
    font-weight:1000;
    cursor:pointer;
    display:grid;
    place-items:center;
}
.inv-recipe-remove:hover{background:#fecaca}
.inv-recipe-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:11px;
}
.inv-recipe-add{
    border:1px dashed #94a3b8;
    border-radius:13px;
    min-height:40px;
    padding:0 13px;
    background:#f8fafc;
    color:#0f172a;
    font-weight:1000;
    cursor:pointer;
}
.inv-recipe-add:hover{background:#eef2ff;border-color:#2563eb;color:#1d4ed8}
.inv-recipe-preview{
    font-size:12px;
    font-weight:900;
    color:#475569;
}
.inv-recipe-preview b{
    color:#166534;
    font-size:15px;
}
.inv-recipe-save{
    border:0;
    min-height:40px;
    border-radius:13px;
    padding:0 15px;
    background:linear-gradient(135deg,#111827,#2563eb);
    color:#fff;
    font-weight:1000;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(37,99,235,.20);
}
.low-stock-row.out-of-stock{
    background:#fef2f2;
    border-color:#fecaca;
}
.low-stock-row.out-of-stock small{color:#b91c1c}


/* ===== RECIPE_V2: green saved state — one auto quantity box ===== */
.inv-recipe.is-saved{
    border-color:#86efac;
    background:linear-gradient(180deg,#f0fdf4,#ecfdf5);
    box-shadow:0 8px 22px rgba(22,163,74,.12);
}
.inv-recipe-chip{
    display:none;
    margin-left:8px;
    padding:3px 9px;
    border-radius:999px;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    font-size:10px;
    letter-spacing:.3px;
    vertical-align:middle;
}
.inv-recipe.is-saved .inv-recipe-chip{display:inline-block}

/* Saved -> only the green box shows. Editing -> the editor shows again. */
.inv-recipe-savedbox{display:none}
.inv-recipe.is-saved:not(.is-editing) .inv-recipe-savedbox{
    display:grid;
    gap:11px;
}
.inv-recipe.is-saved:not(.is-editing) .inv-recipe-editor{display:none}

.inv-recipe-savedmsg{
    font-size:14px;
    font-weight:1000;
    color:#166534;
    line-height:1.3;
}
.inv-recipe-savedmsg small{
    display:block;
    margin-top:3px;
    font-size:11px;
    font-weight:900;
    color:#15803d;
    opacity:.85;
}
/* V3: ingredient availability list in the saved (green) state */
.inv-avail-cols{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px;
    gap:8px;
    padding:0 4px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-weight:1000;
    color:#15803d;
    opacity:.8;
}
.inv-avail-rows{
    display:grid;
    gap:8px;
    max-height:236px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 4px 2px 2px;
    scrollbar-gutter:stable;
}
.inv-avail-row{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px;
    gap:8px;
    align-items:center;
    border:1px solid #bbf7d0;
    border-radius:14px;
    background:#fff;
    padding:9px 10px;
}
.inv-avail-name{
    font-size:13px;
    font-weight:1000;
    color:#0f172a;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
}
.inv-avail-name small{
    display:block;
    margin-top:2px;
    font-size:10px;
    font-weight:900;
    color:#64748b;
}
.inv-avail-inwrap{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
}
.inv-avail-unit{
    font-size:11px;
    font-weight:1000;
    color:#15803d;
    white-space:nowrap;
    flex-shrink:0;
}
.inv-avail-input{
    flex:1;
    width:100%;
    min-width:0;
    min-height:38px;
    border:1px solid #86efac;
    border-radius:11px;
    padding:0 10px;
    font:inherit;
    font-weight:1000;
    color:#166534;
    background:#f0fdf4;
    text-align:center;
}
.inv-avail-input:focus{outline:0;border-color:#16a34a;background:#fff}
.inv-avail-can{
    font-size:13px;
    font-weight:1000;
    color:#166534;
    text-align:right;
    white-space:nowrap;
}
.inv-avail-can b{font-size:15px}
.inv-avail-total{
    border:1px solid #bbf7d0;
    border-radius:14px;
    background:#dcfce7;
    padding:10px 13px;
    font-size:13px;
    font-weight:1000;
    color:#166534;
}
.inv-avail-total b{font-size:17px;margin-left:4px}
.inv-recipe-savedbtns{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}
.inv-recipe-editbtn{
    flex:1;
    min-height:40px;
    border:1px solid #bbf7d0;
    border-radius:13px;
    background:#fff;
    color:#166534;
    font-weight:1000;
    cursor:pointer;
}
.inv-recipe-editbtn:hover{background:#f0fdf4}
.inv-recipe-deletebtn{
    min-height:40px;
    padding:0 15px;
    border:1px solid #fecaca;
    border-radius:13px;
    background:#fef2f2;
    color:#b91c1c;
    font-weight:1000;
    cursor:pointer;
}
.inv-recipe-deletebtn:hover{background:#fee2e2}

/* Item's own quantity while a recipe controls it: read-only AUTO look.
   BUGFIX: the disabled - / + buttons used to squeeze the input so narrow the
   number was clipped and only the browser's spinner arrows showed (looked
   like ":"). In AUTO mode the buttons are hidden entirely so the number gets
   the full width, centered, with no spinners. */
.inv-field input.inv-qty-auto{
    background:#f0fdf4!important;
    border-color:#86efac!important;
    color:#166534!important;
    text-align:center!important;
    -moz-appearance:textfield;
    appearance:textfield;
}
.inv-field input.inv-qty-auto::-webkit-outer-spin-button,
.inv-field input.inv-qty-auto::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.inv-qty-btn.inv-qty-btn-off{
    display:none!important;
}
.inv-auto-chip{
    display:inline-block;
    margin-left:6px;
    padding:2px 7px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:9px;
    letter-spacing:.3px;
}
@media (max-width:640px){
    .inv-avail-cols{display:none}
    .inv-avail-row{
        grid-template-columns:1fr;
        gap:7px;
        text-align:left;
    }
    .inv-avail-can{text-align:left}
    .inv-avail-rows{max-height:270px}
    .inv-recipe-savedbtns{display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
    .inv-recipe{padding:11px;border-radius:16px}
    .inv-recipe-cols{display:none}
    .inv-recipe-row{
        grid-template-columns:minmax(0,1fr) 34px;
        grid-template-areas:
            "name remove"
            "unit unit"
            "qty qty"
            "owner owner";
        gap:6px;
        border:1px solid #e2e8f0;
        border-radius:14px;
        padding:8px;
        background:#fff;
    }
    .inv-recipe-row .inv-recipe-name{grid-area:name}
    .inv-recipe-row select.inv-recipe-unit{grid-area:unit}
    .inv-recipe-row .inv-recipe-qty{grid-area:qty}
    .inv-recipe-row .inv-recipe-arrow{display:none}
    .inv-recipe-row .inv-recipe-remove{grid-area:remove;justify-self:end}
    .inv-recipe-sym{display:none}
    .inv-recipe-row input{text-align:left}
    .inv-recipe-rows{max-height:260px}
    .inv-recipe-foot{flex-direction:column;align-items:stretch}
    .inv-recipe-save,.inv-recipe-add{width:100%}
    .inv-recipe-preview{text-align:center}
}

/* ==== qd-all-page-item-image-contain-fix (extracted from inventory.php inline <style>) ==== */
/* Fixed responsive image frames: preserve the full natural image without cropping or stretching. */
img.item-image,
img.inv-thumb,
.bulk-match-card img,
img.item-thumb {
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    padding: 4px !important;
    box-sizing: border-box !important;
}
@media (max-width: 640px) {
    img.item-image,
    img.inv-thumb,
    .bulk-match-card img,
    img.item-thumb {
        padding: 3px !important;
    }
}

/* ==== inventory-navhead-wide-layout-v1 (extracted from inventory.php inline <style>) ==== */
/* ===== NAVHEAD: burger drawer with index.php page list (all screen sizes) ===== */
.navhead-hidden-status{display:none !important;}
.bill-navhead{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 0 12px !important;
    min-height:0 !important;
}
.navhead-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:46px;height:46px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    padding:0 12px;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:box-shadow .15s ease, transform .15s ease;
}
.navhead-burger:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-1px);}
.navhead-burger span{display:block;height:2.5px;width:100%;border-radius:3px;background:#0f172a;}
.navhead-page-title{
    font-size:16px;
    font-weight:1000;
    color:#0f172a;
    letter-spacing:-.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.navhead-lead{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
@media(max-width:640px){
    .navhead-page-title{font-size:14px;}
    .navhead-lead{gap:9px;}
}
/* create-posts.php puts the burger on a dark gradient hero, so the dark
   default would be unreadable there. */
.cp-hero .navhead-page-title{color:#fff;}
@media print{.navhead-page-title,.navhead-lead{display:none !important;}}

/* Drawer: identical behaviour on desktop and mobile */
.navhead-links{
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(300px,86vw);
    background:#fff;
    border-right:1px solid var(--line);
    box-shadow:0 0 60px rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:4px;
    padding:18px 12px;
    overflow-y:auto;
    z-index:99998;
    transform:translateX(-102%);
    transition:transform .22s ease;
}
.navhead-links.open{transform:translateX(0);}
.navhead-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border-radius:12px;
    text-decoration:none;
    color:#334155;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.navhead-link:hover{background:#f1f5f9;color:#0f172a;}
.navhead-link.active{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;}
.navhead-ico{font-size:17px;line-height:1;}
.navhead-backdrop{
    position:fixed;inset:0;
    background:rgba(15,23,42,.5);
    z-index:99997;
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
}
.navhead-backdrop.open{opacity:1;pointer-events:auto;}


/* Page title beside the burger (inventory has no other page heading) */
@media (max-width:520px){
}

/* ===== WIDE LAYOUT: use the full width, narrower category rail =====
   Inventory shows its sidebar from 701px up (see the v132 rule), so match that. */
@media (min-width: 701px){
    .container.inventory-shell{
        max-width:100% !important;
        width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .inv-layout{
        grid-template-columns:196px minmax(0,1fr) !important;
        gap:16px !important;
    }

    .inv-side{
        padding:14px !important;
        position:sticky !important;
        top:16px !important;
    }
    .inv-side .section-title h3{font-size:16px !important;}
    .inv-side .category-btn{
        padding:10px 12px !important;
        font-size:13px !important;
        border-radius:12px !important;
    }
}

/* Two inventory cards per row once there is room. These cards are data-dense
   (thumb + name + 3 stat tiles + an expanding edit form), so they stay in a
   list rather than the 4-up image grid used on the menu pages. */
@media (min-width: 1250px){
    .inventory-list{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        align-items:start !important;
    }
}

/* ===== FLOATING EDIT CARD =====
   The edit form stays inside .inv-item-card in the DOM (save/qty handlers walk
   up with .closest('.inv-item-card')), and is only lifted into a centered
   overlay with CSS when the card is open. */
.inv-edit-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(8px);
    z-index:270;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}
body.inv-edit-open .inv-edit-backdrop{
    opacity:1;
    pointer-events:auto;
}
body.inv-edit-open{overflow:hidden;}

/* .inv-item-card sets overflow:hidden, which would clip a position:fixed child */
.inv-item-card.open{overflow:visible !important;}

/* An open card must never carry a transform/filter: either one makes the
   position:fixed body resolve against the CARD instead of the viewport. */
.inv-item-card.open,
.inv-item-card.open:hover{
    transform:none !important;
    filter:none !important;
    perspective:none !important;
}

.inv-item-card.open .inv-item-body{
    display:block;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(760px, calc(100vw - 28px));
    max-height:88vh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:280;
    border:1px solid var(--inv-line);
    border-radius:26px;
    box-shadow:0 30px 90px rgba(15,23,42,.42);
    padding:16px;
}

/* Sticky header inside the floating editor */
.inv-edit-float-head{
    display:none;
    position:sticky;
    top:-16px;
    z-index:2;
    margin:-16px -16px 14px;
    padding:14px 16px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#fff;
    background:linear-gradient(135deg,#111827,#2563eb,#7c3aed);
    border-radius:26px 26px 0 0;
}
.inv-item-card.open .inv-edit-float-head{display:flex;}
.inv-edit-float-head strong{
    font-size:16px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.inv-edit-float-close{
    width:38px;
    height:38px;
    min-width:38px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:20px;
    font-weight:1000;
    cursor:pointer;
    display:grid;
    place-items:center;
}
.inv-edit-float-close:hover{background:rgba(255,255,255,.3);}

@media (max-width:640px){
    .inv-item-card.open .inv-item-body{
        width:calc(100vw - 16px);
        max-height:92vh;
        border-radius:22px;
        padding:12px;
    }
    .inv-edit-float-head{
        top:-12px;
        margin:-12px -12px 12px;
        padding:12px;
        border-radius:22px 22px 0 0;
    }
    .inv-edit-float-head strong{font-size:14px;}
}

/* ==== inventory-no-scroller-v320 (extracted from inventory.php inline <style>) ==== */
/* v320: no inner scroller on the inventory category sidebar.
   The sidebar shows at full natural height. If the category list is taller
   than the screen, the sidebar simply stops being sticky (JS toggle below),
   so the normal page scroll reveals every category — nothing is hidden and
   there is no second scrollbar. */
@media (min-width:701px){
    .inv-side,
    .inv-side.category-scroll-enabled{
        max-height:none !important;
        overflow:visible !important;
    }
    .inv-side.rail-no-sticky{
        position:static !important;
        top:auto !important;
    }
}


/* ===== INVENTORY_INPUT_V1: "Inventory Input" floating card =====
   One flat list of every saved recipe ingredient, across every item and
   category, grouped by ingredient name so the same ingredient used in many
   items sits together — each occurrence tagged with the item it belongs to. */
.inv-input-pill{
    width:auto!important;
    min-width:126px!important;
    height:46px!important;
    padding:0 15px!important;
    border-radius:17px!important;
    font-size:14px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    border:0;
    background:linear-gradient(135deg,#166534,#16a34a,#22c55e);
    color:#fff;
    font-weight:1000;
    box-shadow:0 14px 30px rgba(22,163,74,.24);
    cursor:pointer;
}
@media(max-width:640px){
    .inv-input-pill{
        min-width:0!important;
        width:100%!important;
        height:42px!important;
        font-size:13px!important;
        padding:0 10px!important;
    }
}

#inventoryInputModal .modal-card.inv-input-card{
    max-width:1060px!important;
}
.inv-input-search{
    width:100%;
    margin-bottom:14px;
}
.inv-input-loading,
.inv-input-empty{
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#64748b;
    padding:26px 10px;
}
.inv-input-groups{
    display:grid;
    gap:9px;
    max-height:60vh;
    overflow-y:auto;
    padding-right:2px;
}

/* ---- one compact row per ingredient ---- */
.inv-input-group{
    display:grid;
    grid-template-columns:minmax(0,1fr) 215px 150px;
    gap:12px;
    align-items:center;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
    padding:10px 12px;
}
.inv-input-group.is-dirty{
    border-color:#16a34a;
    background:#f0fdf4;
}
.inv-input-open{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    border:0;
    background:transparent;
    padding:4px 2px;
    text-align:left;
    cursor:pointer;
    font:inherit;
}
.inv-input-open:hover .inv-input-group-name{text-decoration:underline}
.inv-input-group-name{
    font-size:14.5px;
    font-weight:1000;
    color:#0f172a;
    text-transform:capitalize;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.inv-input-group-count{
    flex:0 0 auto;
    font-size:10.5px;
    font-weight:900;
    color:#166534;
    background:#dcfce7;
    border-radius:999px;
    padding:3px 9px;
    white-space:nowrap;
}
.inv-input-total-wrap{
    display:flex;
    align-items:center;
    gap:7px;
}
.inv-input-total{
    width:120px;
    min-width:0;
    min-height:42px;
    border:1px solid #86efac;
    border-radius:12px;
    padding:0 8px;
    font:inherit;
    font-weight:1000;
    color:#166534;
    background:#f0fdf4;
    text-align:center;
    -moz-appearance:textfield;
    appearance:textfield;
}
.inv-input-total::-webkit-outer-spin-button,
.inv-input-total::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-input-total:focus{outline:0;border-color:#16a34a;background:#fff}
.inv-input-total-unit{
    font-size:11.5px;
    font-weight:1000;
    color:#15803d;
    white-space:nowrap;
}
.inv-input-each{
    font-size:11.5px;
    font-weight:800;
    color:#64748b;
    text-align:left;
    white-space:nowrap;
}
.inv-input-each b{color:#166534;font-size:13px}
.inv-input-warn{
    display:block;
    margin-top:2px;
    color:#b45309;
    font-weight:900;
}
/* SALE_DEMAND_V1 fix: invInputFilter() uses toggleAttribute(), which writes
   data-nomatch="" — never "1" — so the old [data-nomatch="1"] selector never
   matched and the Inventory Input search silently hid nothing. */
.inv-input-group[data-nomatch]{display:none!important}

/* ---- floating card for one ingredient's connected items ---- */
#inventoryIngredientModal{z-index:300}
#inventoryIngredientModal .modal-card.inv-ing-card{max-width:620px!important}
.inv-ing-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.inv-ing-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.35px;
    font-weight:1000;
    color:#64748b;
}
.inv-ing-split{
    margin:12px 0 10px;
    font-size:12.5px;
    font-weight:800;
    color:#475569;
    line-height:1.45;
}
.inv-ing-split b{color:#166534}
.inv-input-rows{
    display:grid;
    gap:8px;
    max-height:46vh;
    overflow-y:auto;
    padding-top:10px;
    border-top:1px dashed #e2e8f0;
}
.inv-input-row{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) 64px;
    gap:8px;
    align-items:center;
    border:1px solid #bbf7d0;
    border-radius:14px;
    background:#f0fdf4;
    padding:9px 10px;
}
.inv-input-item-label{
    font-size:12.5px;
    font-weight:900;
    color:#166534;
    overflow:hidden;
    text-overflow:ellipsis;
}
.inv-input-item-label small{
    display:block;
    margin-top:2px;
    font-size:10px;
    font-weight:800;
    color:#64748b;
}
.inv-input-row-share{
    font-size:12px;
    font-weight:900;
    color:#0f172a;
    text-align:center;
    white-space:nowrap;
}
.inv-input-row-share b{font-size:13.5px}
.inv-input-row-can{
    font-size:13px;
    font-weight:1000;
    color:#166534;
    text-align:right;
    white-space:nowrap;
}
.inv-input-footbar{
    margin-top:16px!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:sticky;
    bottom:0;
    background:linear-gradient(180deg,rgba(248,251,255,0),#f8fbff 30%);
    padding-top:10px;
}
.inv-input-count{
    font-size:12px;
    font-weight:900;
    color:#64748b;
}
@media(max-width:900px){
    .inv-input-group{
        grid-template-columns:minmax(0,1fr) 215px;
    }
    .inv-input-each{grid-column:1/-1;text-align:left}
}
@media(max-width:640px){
    .inv-input-group{grid-template-columns:1fr;gap:8px}
    .inv-input-total-wrap{width:100%}
    .inv-input-total{flex:1;width:auto}
    .inv-input-row{grid-template-columns:1fr auto;gap:6px}
    .inv-input-item-label{grid-column:1/-1}
    .inv-input-row-share{text-align:left}
    .inv-input-groups{max-height:62vh}
}


/* ===== RECIPE_V4: read-only ingredient summary on the saved recipe card =====
   Replaces the old Available Quantity / Can Make / Inventory Qty (Auto) block.
   The per-item card is now only for saving and editing the ingredient list;
   quantity entry lives in the Inventory Input card. */
.inv-recipe-summary{
    display:grid;
    gap:7px;
    max-height:236px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 4px 2px 2px;
    scrollbar-gutter:stable;
}
.inv-recipe-summary-row{
    border:1px solid #bbf7d0;
    border-radius:14px;
    background:#fff;
    padding:9px 11px;
}
.inv-recipe-summary-name{
    display:block;
    font-size:13px;
    font-weight:1000;
    color:#0f172a;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (max-width:640px){
    .inv-recipe-summary{max-height:270px}
}


/* ===== RECIPE_V4.2: ingredient rows point at one item panel =====
   The "Makes (items)" column is gone. Each row says how much of that
   ingredient goes into ONE unit of the item, and every row arrows across to
   a single panel on the right showing the item's name. */
.inv-recipe-body{
    display:flex;
    align-items:stretch;
    gap:10px;
}
.inv-recipe-left{
    flex:1;
    min-width:0;
}
.inv-recipe-arrow{
    text-align:center;
    font-weight:1000;
    font-size:15px;
    color:#16a34a;
    line-height:1;
}
.inv-recipe-owner-panel{
    flex:0 0 auto;
    width:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px 12px;
    border:1px solid #bbf7d0;
    border-radius:16px;
    background:#f0fdf4;
    align-self:stretch;
    margin-bottom:2px;
}
.inv-recipe-owner-name{
    font-size:14px;
    font-weight:1000;
    color:#166534;
    line-height:1.25;
    overflow-wrap:anywhere;
}
@media (max-width:640px){
    .inv-recipe-body{flex-direction:column;gap:8px}
    .inv-recipe-owner-panel{width:100%;padding:9px 10px}
    .inv-recipe-owner-name{font-size:13px}
}


/* ===== BUGFIX: Inventory Qty number clipped by the - / + buttons =====
   .inv-input-wrap is a flex row and the input carried width:100% with the
   browser default min-width:auto, so inside a ~120px column the two 36px
   buttons + gaps left the input almost no room — the digits were clipped and
   only the number spinner arrows stayed visible. Let the input shrink to fit
   the leftover space, drop the spinners (the - / + buttons replace them) and
   trim the side padding so the value always shows. */
.inv-field .inv-input-wrap{
    gap:5px;
}
.inv-field .inv-input-wrap input{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    padding:0 4px;
    text-align:center;
    -moz-appearance:textfield;
    appearance:textfield;
}
.inv-field .inv-input-wrap input::-webkit-outer-spin-button,
.inv-field .inv-input-wrap input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.inv-field .inv-input-wrap .inv-qty-btn{
    flex:0 0 auto;
    min-width:34px;
    width:34px;
    padding:0;
}
@media(max-width:640px){
    /* Mobile keeps the 3-column grid, so give the input its full cell back. */
    .inv-field .inv-input-wrap input{
        width:100%;
        padding:0 10px;
    }
}

/* Give the three number fields a little more room on desktop so longer
   quantities/prices never reach the clipping point in the first place.
   Below 980px the row is already 2-up and below 640px it is 1-up. */
@media(min-width:981px){
    .inv-edit-row{
        grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(140px,.75fr)) auto;
    }
}

/* ===== BULK_INGREDIENT_V1 ===== */
#bulkIngredientModal .modal-card.bulk-ing-card{
    max-width:660px!important;
}
.bulk-ing-step{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f9fafb;
    margin-bottom:14px;
}
.bulk-ing-step-num{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,#9a3412,#ea580c,#f59e0b);
    color:#fff;
    font-weight:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}
.bulk-ing-step-body{flex:1 1 auto;min-width:0}
.bulk-ing-step-title{font-weight:1000;color:#0f172a;margin-bottom:10px;font-size:14.5px}
.bulk-ing-hint{
    margin-top:9px;
    font-size:12.5px;
    color:#64748b;
    font-weight:750;
    line-height:1.5;
}
.bulk-ing-hint code{
    background:#eef2f7;
    border-radius:6px;
    padding:1px 6px;
    font-size:12px;
    color:#1e293b;
}
.bulk-ing-upload{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    border-radius:14px;
    border:2px dashed #cbd5e1;
    background:#fff;
    color:#334155;
    font-weight:900;
    cursor:pointer;
    padding:0 14px;
    text-align:center;
}
.bulk-ing-upload:hover{border-color:#f59e0b;color:#9a3412}
.bulk-ing-upload input[type="file"]{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.bulk-ing-status{
    margin-top:6px;
    margin-bottom:14px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px;
    background:#fff;
    max-height:280px;
    overflow:auto;
}
.bulk-ing-status-summary{
    font-weight:1000;
    color:#0f172a;
    margin-bottom:8px;
    font-size:14px;
}
.bulk-ing-row{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:7px 0;
    border-top:1px solid #f1f5f9;
    font-size:13px;
    font-weight:800;
    color:#334155;
    line-height:1.45;
}
.bulk-ing-row:first-child{border-top:0}
.bulk-ing-row .bulk-ing-icon{flex:0 0 auto}
.bulk-ing-row.is-ok{color:#166534}
.bulk-ing-row.is-fail{color:#b91c1c}
.bulk-ing-row.is-warn{color:#92400e}
.bulk-ing-footbar{
    justify-content:space-between;
    padding-top:6px;
}
.bulk-ing-count{
    font-weight:900;
    color:#475569;
    font-size:13.5px;
}
@media(max-width:640px){
    .bulk-ing-step{flex-direction:column}
}


/* ===== SALE_DEMAND_V1: "Sale Guess" + "Inventory Demand" cards =====
   Deliberately reuses the sizing, radius and weight language of
   .inv-input-pill / .inv-input-group so the three cards read as one family. */

.sale-guess-pill,
.inv-demand-pill{
    width:auto!important;
    min-width:126px!important;
    height:46px!important;
    padding:0 15px!important;
    border-radius:17px!important;
    font-size:14px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    border:0;
    color:#fff;
    font-weight:1000;
    cursor:pointer;
}
.sale-guess-pill{
    background:linear-gradient(135deg,#1e3a8a,#2563eb,#3b82f6);
    box-shadow:0 14px 30px rgba(37,99,235,.24);
}
.inv-demand-pill{
    background:linear-gradient(135deg,#7c2d12,#c2410c,#f97316);
    box-shadow:0 14px 30px rgba(194,65,12,.22);
}
@media(max-width:640px){
    .sale-guess-pill,
    .inv-demand-pill{
        min-width:0!important;
        width:100%!important;
        height:42px!important;
        font-size:13px!important;
        padding:0 10px!important;
    }
}

/* ---- Sale Guess ---- */
#saleGuessModal .modal-card.sale-guess-card{max-width:900px!important}
.sale-guess-search{width:100%;margin-bottom:12px}

.sale-guess-head-row,
.sale-guess-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px 150px;
    gap:12px;
    align-items:center;
}
.sale-guess-head-row{
    padding:0 12px 7px;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:1000;
    color:#64748b;
}
.sale-guess-col-y,
.sale-guess-col-g{text-align:center}

.sale-guess-rows{
    display:grid;
    gap:9px;
    max-height:56vh;
    overflow-y:auto;
    padding-right:2px;
}
.sale-guess-cat{display:grid;gap:8px}
.sale-guess-cat-name{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:1000;
    color:#1d4ed8;
    padding:6px 2px 0;
}
.sale-guess-row{
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
    padding:9px 12px;
}
.sale-guess-row.is-dirty{
    border-color:#2563eb;
    background:#eff6ff;
}
.sale-guess-label{
    font-size:14px;
    font-weight:1000;
    color:#0f172a;
    text-transform:capitalize;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sale-guess-norecipe{
    display:block;
    font-size:10.5px;
    font-weight:800;
    color:#b45309;
    text-transform:none;
    margin-top:2px;
}
.sale-guess-yesterday,
.sale-guess-today{display:flex;justify-content:center}
.sale-guess-y-box,
.sale-guess-g-box{
    width:120px;
    min-width:0;
    min-height:42px;
    border-radius:12px;
    padding:0 8px;
    font:inherit;
    font-weight:1000;
    text-align:center;
    -moz-appearance:textfield;
    appearance:textfield;
}
.sale-guess-y-box{
    border:1px solid #cbd5e1;
    background:#f1f5f9;
    color:#475569;
    cursor:not-allowed;
}
.sale-guess-g-box{
    border:1px solid #93c5fd;
    background:#eff6ff;
    color:#1d4ed8;
}
.sale-guess-g-box:focus{outline:0;border-color:#2563eb;background:#fff}
.sale-guess-y-box::-webkit-outer-spin-button,
.sale-guess-y-box::-webkit-inner-spin-button,
.sale-guess-g-box::-webkit-outer-spin-button,
.sale-guess-g-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.sale-guess-row[data-nomatch],
.sale-guess-cat[data-nomatch]{display:none!important}
.sale-guess-footbar{margin-top:14px;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Inventory Demand ---- */
#inventoryDemandModal .modal-card.inv-demand-card{max-width:1000px!important}

.inv-demand-spend-note{
    margin:0 0 12px;
    padding:9px 12px;
    border-radius:10px;
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#166534;
    font-size:12.5px;
    font-weight:800;
}

.inv-demand-head-row,
.inv-demand-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 140px 130px 130px;
    gap:12px;
    align-items:center;
}
.inv-demand-head-row{
    padding:0 12px 7px;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:1000;
    color:#64748b;
}
.inv-demand-col-num{text-align:right}

.inv-demand-rows{
    display:grid;
    gap:9px;
    max-height:56vh;
    overflow-y:auto;
    padding-right:2px;
}
.inv-demand-row{
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
    padding:10px 12px;
}
.inv-demand-row.is-short{
    border-color:#fdba74;
    background:#fff7ed;
}
.inv-demand-row[data-nomatch]{display:none!important}
.inv-demand-open{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    border:0;
    background:transparent;
    padding:4px 2px;
    text-align:left;
    cursor:pointer;
    font:inherit;
}
.inv-demand-open:hover .inv-demand-name{text-decoration:underline}
.inv-demand-name{
    font-size:14.5px;
    font-weight:1000;
    color:#0f172a;
    text-transform:capitalize;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.inv-demand-count{
    flex:0 0 auto;
    font-size:10.5px;
    font-weight:900;
    color:#9a3412;
    background:#ffedd5;
    border-radius:999px;
    padding:3px 9px;
    white-space:nowrap;
}
.inv-demand-num{
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-align:right;
    white-space:nowrap;
}
.inv-demand-num b{font-size:14px}
.inv-demand-required b{color:#c2410c}
.inv-demand-short b{color:#b91c1c}
.inv-demand-ok{
    display:block;
    margin-top:2px;
    color:#15803d;
    font-weight:900;
}
.inv-demand-footbar{margin-top:14px;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Inventory Demand: per-ingredient detail card ---- */
#inventoryDemandDetailModal{z-index:300}

/* COST_ON_SAVE_V1: opens ON TOP of Inventory Input, same stacking pattern
   as inventoryDemandDetailModal above -- without this override both share
   the base .modal-backdrop z-index (280), and DOM order alone would put
   this modal BEHIND Inventory Input (which sits later in the markup)
   instead of in front of it. */
#inventoryInputCostModal{z-index:300}
.inv-demand-detail-rows{display:grid;gap:8px;margin-top:6px}
.inv-demand-detail-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 130px;
    gap:10px;
    align-items:center;
    border:1px solid #e2e8f0;
    border-radius:13px;
    background:#fff;
    padding:9px 11px;
}
.inv-demand-detail-num{
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-align:right;
    white-space:nowrap;
}
.inv-demand-detail-num b{font-size:14px;color:#c2410c}

@media(max-width:780px){
    .sale-guess-head-row,
    .inv-demand-head-row{display:none!important}
    .sale-guess-row{grid-template-columns:1fr 1fr;gap:8px}
    .sale-guess-label{grid-column:1/-1}
    .sale-guess-y-box,
    .sale-guess-g-box{width:100%}
    .sale-guess-yesterday::before{content:"Yesterday";font-size:10px}
    .inv-demand-row{grid-template-columns:1fr;gap:6px}
    .inv-demand-num{text-align:left}
    .inv-demand-required::before{content:"Required: "}
    .inv-demand-have::before{content:"In stock: "}
    .inv-demand-short::before{content:"Short by: "}
    .inv-demand-detail-row{grid-template-columns:1fr;gap:4px}
    .inv-demand-detail-num{text-align:left}
    .sale-guess-rows,
    .inv-demand-rows{max-height:60vh}
}

@media print{
    .modal-backdrop{display:none!important}
}

/* ===== SALE_DEMAND_V1: Inventory Input item/ingredient picker =====
   A suggestion list under the search box, so an item can be chosen from what
   actually exists rather than guessed at. */
.inv-input-searchwrap{position:relative;margin-bottom:14px}
.inv-input-searchwrap .inv-input-search{margin-bottom:0}

.inv-input-suggest{
    position:absolute;
    z-index:40;
    top:calc(100% + 6px);
    left:0;
    right:0;
    max-height:290px;
    overflow-y:auto;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:16px;
    box-shadow:0 20px 46px rgba(15,23,42,.18);
    padding:6px;
}
.inv-input-suggest-row{
    display:grid;
    grid-template-columns:88px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    width:100%;
    border:0;
    background:transparent;
    border-radius:11px;
    padding:9px 10px;
    text-align:left;
    cursor:pointer;
    font:inherit;
}
.inv-input-suggest-row:hover,
.inv-input-suggest-row.is-active{background:#f1f5f9}
.inv-input-suggest-kind{
    font-size:9.5px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.4px;
    text-align:center;
    border-radius:999px;
    padding:4px 0;
}
.inv-input-suggest-item{color:#1d4ed8;background:#dbeafe}
.inv-input-suggest-ingredient{color:#166534;background:#dcfce7}
.inv-input-suggest-label{
    font-size:13.5px;
    font-weight:1000;
    color:#0f172a;
    text-transform:capitalize;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.inv-input-suggest-meta{
    font-size:10.5px;
    font-weight:900;
    color:#64748b;
    white-space:nowrap;
}

/* Bar shown once an item or ingredient has been picked */
.inv-input-activepick{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    padding:9px 13px;
    border:1px solid #bfdbfe;
    background:#eff6ff;
    border-radius:14px;
}
.inv-input-activepick-text{
    font-size:12.5px;
    font-weight:800;
    color:#475569;
}
.inv-input-activepick-text b{color:#1d4ed8;text-transform:capitalize}
.inv-input-activepick-clear{
    border:0;
    background:#1d4ed8;
    color:#fff;
    font:inherit;
    font-size:11.5px;
    font-weight:1000;
    border-radius:999px;
    padding:6px 14px;
    cursor:pointer;
}

@media(max-width:640px){
    .inv-input-suggest-row{grid-template-columns:74px minmax(0,1fr);gap:8px}
    .inv-input-suggest-meta{grid-column:2;font-size:10px}
}

/* RECIPE_STOCK_V2: the "why is this item at 0" line inside the low-stock card */
.low-stock-why{
    display:block;
    margin-top:5px;
    font-size:11px;
    font-weight:800;
    line-height:1.45;
    color:#475569;
}
.low-stock-why b{color:#0f172a}
.low-stock-why-stale{color:#1d4ed8}
.low-stock-why-stale b{color:#1d4ed8}
.low-stock-why-bad{color:#b45309}
.low-stock-why-bad b{color:#92400e}

/* STOCK_REASON_V1: wraps the "Limited by X" line under an item/variant's own
   Inventory Qty field on its card (empty + no margin when the item has no
   recipe, so it takes up no visible space). */
.inv-limiter:empty{margin:0}
.inv-limiter{margin-top:6px}

.low-stock-fix{
    display:inline-block;
    margin-left:4px;
    border:0;
    background:#1d4ed8;
    color:#fff;
    font:inherit;
    font-size:10.5px;
    font-weight:1000;
    border-radius:999px;
    padding:4px 11px;
    cursor:pointer;
}
.inv-input-headbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* RECIPE_STOCK_V2: an item holding something other than the even share */
.inv-input-row.is-uneven{background:#fffbeb;border-radius:10px}
.inv-input-uneven{
    display:block;
    margin-top:2px;
    font-size:9.5px;
    font-weight:900;
    color:#b45309;
    white-space:nowrap;
}


/* Close (X) button for the Low Inventory Warning popup */
.low-stock-top{
    position:relative;
    padding-right:52px;
}
.low-stock-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:999px;
    border:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.22);
    color:#fff;
    font-size:20px;
    font-weight:1000;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
}
.low-stock-close:hover{
    background:rgba(255,255,255,.36);
    transform:scale(1.06);
}
.low-stock-close:active{
    transform:scale(.92);
}