/* ==========================================
   FILE: styles.css
   VERSION: 72.6-p2.11.3b.3
   BASE: 67.0 + FINANCE/PORTAL ICON FIXES
   ========================================== */

:root {
    --primary: #222222;
    --primary-light: #555555;
    --primary-dark: #000000;
    --accent: #e74c3c;
    --bg: #f0f2f5; 
    --surface: #ffffff; 
    --text: #222222;
    --text-muted: #555555;
    --success: #1b8045;   
    --danger: #c0392b;
    --tab-bg: #e4e6eb; 
}

/* 0. CUSTOM SVG ICON SYSTEM — Line-Art (Stroke Only) */
.ui-icon {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: none;              /* CRITICAL: Line-art icons must NOT be filled */
    stroke: currentColor;    /* Stroke inherits the text color */
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

/* 1. TYPOGRAPHY & RESET */
* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
h1, h2, h3, h4, h5, h6 { font-weight: 500 !important; color: #111; letter-spacing: -0.3px; margin-top: 0; }
strong, b { font-weight: 500 !important; color: #111; }

.brand-text { font-family: 'Roboto', sans-serif !important; font-weight: 700 !important; letter-spacing: 1px !important; color: var(--primary); text-transform: uppercase; white-space: nowrap; }

/* 2. INPUTS & SELECTS */
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea {
    background: var(--tab-bg); border: 1px solid transparent; border-radius: 8px;
    padding: 12px 14px; font-size: 14px; color: #111; outline: none; transition: 0.2s ease; width: 100%;
}
input:focus, select:focus { background: #fff; border: 1px solid var(--success); box-shadow: 0 0 0 3px rgba(27,128,69,0.1); }

/* 3. BUTTONS */
button { font-weight: 500; letter-spacing: 0.2px; transition: 0.2s; outline: none; cursor: pointer; }
button:active { transform: scale(0.97); }

/* 4. CARDS & TABLES */
.card { background: var(--surface); border-radius: 12px; border: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0,0,0,0.04); padding: 20px; margin-bottom: 20px; }
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 12px 8px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid #eee; white-space: nowrap; }
td { padding: 12px 8px; color: var(--text); border-bottom: 1px solid #f5f5f5; }

/* 5. POS LAYOUT */
.pos-wrap { display: block; height: calc(100vh - 120px); }
.pos-left { width: 100%; display: flex; flex-direction: column; height: 100%; padding-bottom: 80px; }
.seg-control { display: flex; background: var(--tab-bg); border-radius: 8px; padding: 4px; width: 100%; max-width: 300px; }
.seg-btn { flex: 1; border: none; background: transparent; padding: 10px 0; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.seg-btn.active { background: var(--success) !important; color: white !important; box-shadow: 0 2px 5px rgba(27,128,69,0.3) !important; }
.cat-pill { padding: 8px 16px; border-radius: 20px; border: none; background: var(--tab-bg); color: var(--text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.cat-pill.active { background: var(--success) !important; color: white !important; box-shadow: 0 2px 5px rgba(27,128,69,0.3) !important; }
.item-card { background: var(--surface); border: 1px solid #eee; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; transition: 0.1s; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.item-card:active { transform: scale(0.95); background: #f9f9f9; }

/* 6. EXPANDING SEARCH BAR & TOP CART ICON */
.search-wrapper { position: relative; width: 100%; max-width: 250px; display: flex; justify-content: flex-end; }
.expand-search { width: 46px; border-radius: 23px !important; padding: 12px 35px 12px 15px !important; transition: all 0.3s ease; cursor: pointer; background: var(--tab-bg) !important; outline: none; border: 1px solid transparent; }
.expand-search:focus, .expand-search:not(:placeholder-shown) { width: 100%; cursor: text; background: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; border-color: var(--success); }
.search-icon-wrapper { position: absolute; right: 15px; top: 14px; color: var(--text-muted); pointer-events: none; z-index: 5; }

.top-cart-btn { position: relative; background: var(--surface); color: var(--primary); border: 1px solid #e0e0e0; width: 56px; height: 56px; border-radius: 12px; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.top-cart-btn:active { transform: scale(0.95); background: var(--tab-bg); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--danger); color: white; font-size: 13px; font-weight: bold; width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
.cart-badge.pop { transform: scale(1.3); }

/* 7. APP HEADER - UPDATED FOR MOBILE ROW & SPACING */
header { background-color: var(--surface); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e0e0; gap: 15px; }

.header-left { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px; }
.header-left img { height: 35px; width: auto; flex-shrink: 0; }
#headerControls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* 8. ALARM BELL ANIMATION */
@keyframes bell-shake { 0% { transform: rotate(0); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-15deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }
.shake-anim { animation: bell-shake 0.5s ease-in-out infinite; }

/* 9. THE SLIDING CART DRAWER */
.cart-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 8999; opacity: 0; visibility: hidden; transition: 0.3s ease; backdrop-filter: blur(2px); }
.cart-overlay.active { opacity: 1; visibility: visible; }
.pos-right-drawer { position: fixed; top: 0; right: -450px; width: 100%; max-width: 400px; height: 100vh; background: var(--surface); z-index: 9000; box-shadow: -10px 0 30px rgba(0,0,0,0.15); transition: right 0.3s cubic-bezier(0.17, 0.84, 0.44, 1); display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; }
.pos-right-drawer.open { right: 0; }

/* ==========================================
   MOBILE UI (iOS STYLE)
   ========================================== */
@media (max-width: 768px) {
    #tabsBar { 
        position: fixed; bottom: 0; left: 0; right: 0; width: 100vw; 
        background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(15px); 
        display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; 
        box-shadow: 0 -1px 10px rgba(0,0,0,0.08); z-index: 9999; 
        padding: 10px 2px env(safe-area-inset-bottom) 2px; 
        border-top: 1px solid #eaeaea; 
        overflow: hidden; 
    }
    
    .tab { 
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; justify-content: center; align-items: center; 
        padding: 6px 0; border: none !important; background: transparent !important; 
    }
    .tab span { display: none; } 
    .tab .ui-icon { width: 24px !important; height: 24px !important; color: #555 !important; transition: 0.2s ease; visibility: visible !important; opacity: 1 !important; fill: none !important; }
    .tab.active .ui-icon { color: var(--success) !important; transform: scale(1.15); }
    
    #mainAppWrapper { padding-bottom: 90px; width: 100vw; overflow-x: hidden; }
    .card { padding: 15px !important; border-radius: 12px !important; margin: 10px !important; background: var(--surface) !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; }
    .content { padding: 0; }
    .ios-row { background: var(--surface); border-bottom: 1px solid #f0f0f0; padding: 18px 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
    
    header { flex-wrap: nowrap; padding: 10px; justify-content: space-between; }
    .desktop-only-clock { display: none !important; }
    .desktop-only-text { display: none !important; }

    .expand-search { width: 42px; padding: 10px 35px 10px 15px !important; }
    .search-icon-wrapper { top: 12px; }
    
    .top-cart-btn { width: 44px; height: 44px; font-size: 18px; border-radius: 8px; }
    .cart-badge { width: 20px; height: 20px; font-size: 11px; top: -5px; right: -5px; }

    .pos-top-bar { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
    .pos-top-bar .seg-control { max-width: 100%; }
    .pos-top-bar-right { justify-content: space-between !important; width: 100%; }
    .search-wrapper { max-width: 100%; flex: 1; margin-right: 10px; }
    .expand-search:focus, .expand-search:not(:placeholder-shown) { width: 100%; }
}

@media (min-width: 769px) {
    #tabsBar { display: flex; gap: 10px; padding: 0 20px 10px 20px; border-bottom: 1px solid #e0e0e0; overflow-x: auto; background: var(--surface); }
    .tab { padding: 10px 20px; border-radius: 8px; cursor: pointer; color: var(--text-muted); font-size: 14px; transition: 0.2s; white-space: nowrap; display: flex; align-items: center; }
    .tab:hover { background: var(--tab-bg); color: #222; }
    .tab.active { background: var(--success) !important; color: white !important; }
    .tab .ui-icon { margin-right: 8px; width: 16px; height: 16px; }
    .ios-row { display: none; } 
    .content { padding: 15px 20px; }
}

#loginScreen { display: flex; justify-content: center; align-items: center; min-height: 100dvh; height: 100%; background: var(--bg); padding: 20px; box-sizing: border-box; overflow-y: auto; }
.login-box { background: var(--surface); padding: 40px 20px; border-radius: 12px; text-align: center; width: 100%; max-width: 360px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; margin: auto; }
.login-box h2 { margin-top: 0; color: #000; display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-input { width: 100%; padding: 15px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; text-align: center; background:#fafafa; outline:none; }
.auth-input:focus { border-color: var(--success); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0; }
.numpad-btn { padding: 15px; font-size: 18px; border: none; border-radius: 8px; background: var(--tab-bg); cursor: pointer; color: #000; display: flex; align-items: center; justify-content: center; }
.numpad-btn:active { background: #ddd; }

/* ==========================================
   LEGACY MOBILE COMPATIBILITY RULES
   ========================================== */

/* 1. Sync Dot — Now in tagline, no longer in headerControls */

/* 2. Fix Portal & Tab Icon Visibility (Line-Art Logic) */
.ui-icon {
    fill: none !important;           /* Line-art: no fill */
    stroke: currentColor !important; /* Stroke takes the color */
    stroke-width: 1.0;
    display: inline-block !important;
    visibility: visible !important;
}

/* 3. Mobile Portrait Visibility Fixes */
@media (max-width: 768px) {
    header {
        padding: 8px 10px !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    /* Let the brand side shrink if needed */
    .header-left {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        gap: 8px !important;
    }
    
    /* Smaller logo on mobile */
    .header-left img {
        width: 26px !important;
        height: 26px !important;
    }
    
    .brand-text {
        font-size: 16px !important;
    }

    /* Header controls: compact, allow shrink */
    #headerControls {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide ALL text in header on mobile */
    .desktop-only-clock,
    .desktop-only-text { 
        display: none !important; 
    }

    /* Logout: icon only, minimal padding */
    .mobile-logout-btn {
        padding: 5px !important;
        gap: 0 !important;
        background: transparent !important;
    }
    .mobile-logout-btn span { 
        display: none !important; 
    }

    /* Product modal: tighter padding on mobile */
    #add-product-modal > div > div {
        padding: 15px !important;
        border-radius: 8px !important;
    }

    /* Ensure Tab Icons are large enough for touch */
    .tab .ui-icon {
        width: 26px !important;
        height: 26px !important;
    }
}
/* ==========================================
   LEGACY DESIGN COMPATIBILITY RULES
   ========================================== */

/* Sub-tab controls (Staff, Accounting, Company Admin) — full width */
.seg-control-full {
    display: flex;
    background: var(--tab-bg);
    border-radius: 8px;
    padding: 4px;
    width: 100%;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
}
.seg-control-full .seg-btn {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 8px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}
.seg-control-full .seg-btn.active {
    background: var(--success) !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(27,128,69,0.3) !important;
}

/* Icon colour rules */
.icon-danger { color: var(--danger) !important; }
.icon-warning { color: #b45309 !important; }
.icon-success { color: var(--success) !important; }
.icon-pending { color: #3b82f6 !important; }
.icon-default { color: var(--text) !important; }

/* Status badge colours */
.status-danger { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.status-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.status-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }
.status-pending { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.status-neutral { background: var(--tab-bg); color: var(--text-muted); border: 1px solid #e0e0e0; }

/* Global overflow prevention */
.overflow-safe { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }

/* Card stat box */
.stat-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    padding: 15px;
    text-align: center;
}
.stat-card .stat-value { font-size: 22px; font-weight: 500; color: var(--text); }
.stat-card .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Responsive grids */
.grid-auto-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.grid-auto-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.grid-auto-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

@media (max-width: 768px) {
    .seg-control-full { max-width: 100% !important; }
    .seg-control-full .seg-btn { font-size: 11px; padding: 8px 4px; }
    .stat-card { padding: 10px; }
    .stat-card .stat-value { font-size: 18px; }
    .grid-auto-2, .grid-auto-3, .grid-auto-4 { grid-template-columns: 1fr 1fr; }
}


/* ==========================================
   P2.9.10 CONSISTENT UI / MOBILE BASELINE
   ========================================== */
body, input, select, textarea, button, table { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
button, .pm-btn, .retail-op-btn, .seg-btn { min-height: 38px; font-weight: 500 !important; line-height: 1.2; }
td, th, .card, .stat-card { font-weight: 400; }
th { font-weight: 500 !important; }
strong, b { font-weight: 500 !important; }
.card { max-width: 100%; }
.table-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content { max-width: 100%; overflow-x: hidden; }
@media (max-width: 768px) {
    #dynamic-tab-view { min-height: calc(100dvh - 130px); padding-bottom: 88px; overflow-x: hidden; }
    .content { padding: 0 !important; }
    .card { margin: 8px !important; max-width: calc(100vw - 16px); }
    h2 { font-size: 19px !important; }
    h3 { font-size: 17px !important; }
    table { font-size: 13px; }
    button { min-height: 40px; }
}

/* ==========================================
   P2.9.10.g — Universal list/grid + Main POS burger polish
   Marker C2N3
   ========================================== */
.main-pos-filter-btn,
.main-pos-crumb {
  width: 100%;
  min-height: 34px;
  border: none;
  background: transparent;
  color: #111827;
  border-radius: 8px;
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
}
.main-pos-filter-btn:hover,
.main-pos-crumb:hover { background: #fff; }
.main-pos-filter-btn.active,
.main-pos-crumb.active { background: #fff; color: #15803d; font-weight: 500; }
.main-pos-crumb { width: auto; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.main-pos-card { min-height: 220px; }
@media (max-width: 768px) {
  .main-pos-shell { padding: 10px !important; padding-bottom: 92px !important; }
  .main-pos-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .main-pos-card { min-height: 205px; }
  #mainCategoryMenu { max-height: calc(100vh - 170px) !important; }
  #dynamic-tab-view { padding-bottom: 86px; }
}

/* ==========================================
   P2.9.10.h — LOCKED DESIGN FOUNDATION BASE
   Use docs/Phase-2/P2.9.10-h-Universal-Design-Policy-LOCKED.md as the reference.
   Any change to this base must be logged in the policy markdown.
   ========================================== */
:root {
    --pm-black: #111827;
    --pm-white: #ffffff;
    --pm-grey-50: #f8fafc;
    --pm-grey-100: #f3f4f6;
    --pm-grey-200: #e5e7eb;
    --pm-grey-500: #64748b;
    --pm-green: #15803d;
    --pm-green-bg: #ecfdf5;
    --pm-red: #b91c1c;
    --pm-red-bg: #fef2f2;
}

body, button, input, select, textarea, table {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-size: 13px; }

.ui-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
}

.pm-icon-btn, .retail-icon-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--pm-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pm-icon-btn:hover, .retail-icon-btn:hover { background: var(--pm-grey-100); }
.pm-icon-btn.active, .retail-icon-btn.active { color: var(--pm-green); background: var(--pm-green-bg); }
.pm-icon-btn.danger, .retail-icon-btn.danger { color: var(--pm-red); }
.pm-icon-btn.danger:hover, .retail-icon-btn.danger:hover { background: var(--pm-red-bg); }

.pm-policy-note {
    font-size: 12px;
    color: var(--pm-grey-500);
    background: var(--pm-grey-50);
    border-radius: 10px;
    padding: 10px 12px;
}

@media (max-width: 768px) {
    body { font-size: 13px; }
    .ui-icon { width: 22px; height: 22px; }
    .pm-icon-btn, .retail-icon-btn { width: 42px; height: 42px; }
}

/* ==========================================
   PEPPERMALL CENTRAL DESIGN SYSTEM
   VERSION: P2.10.8.b
   OWNER: /styles.css + /js/app-design-system.js + /js/app-ui-shell.js + /js/app-list-renderer.js

   Design rules:
   - One font stack: Roboto/System.
   - All action/control hit areas: 40px minimum.
   - Button/list visual icons: 30px.
   - Body text: 16px. UI/list text: 15px.
   - Font weight: light/thin by default, medium only for active/important labels.
   - Central list/table pages use .pm-central-list-* and .pm-list-* only.
   - Module files must not inject their own design CSS.
   ========================================== */

:root {
  --pm-font-family: "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --pm-bg: #eef1f4;
  --pm-surface: #ffffff;
  --pm-surface-soft: #f8fafc;
  --pm-text: #111827;
  --pm-muted: #64748b;
  --pm-border: #e5e7eb;
  --pm-border-soft: #eef2f7;
  --pm-control-bg: #e2e6eb;
  --pm-table-head: #eef2f6;
  --pm-green: #15803d;
  --pm-red: #9f1239;
  --pm-purple: #4f46e5;
  --pm-dark: #111827;
  --pm-warning: #f59e0b;
  --pm-control-height: 40px;
  --pm-icon-target: 40px;
  --pm-icon-size: 30px;
  --pm-row-height: 58px;
  --pm-radius: 10px;
  --pm-radius-sm: 8px;
  --pm-font-body: 16px;
  --pm-font-ui: 15px;
  --pm-font-small: 13px;
  --pm-weight-light: 300;
  --pm-weight-normal: 350;
  --pm-weight-medium: 400;
  --pm-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html,
body,
button,
input,
select,
textarea,
table,
td,
th,
label,
small,
span,
div,
p,
a {
  font-family: var(--pm-font-family) !important;
}

body {
  background: var(--pm-bg) !important;
  color: var(--pm-text) !important;
  font-size: var(--pm-font-body) !important;
  font-weight: var(--pm-weight-light) !important;
  line-height: 1.45 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong,
b,
h1,
h2,
h3,
h4,
h5,
h6,
.brand-text,
.pm-strong {
  font-weight: var(--pm-weight-medium) !important;
}

.ui-icon {
  display: inline-block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
}

/* Header */
header {
  min-height: 64px !important;
  padding: 10px 18px !important;
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.header-left { display:flex !important; align-items:center !important; gap:12px !important; min-width:0 !important; }
.header-left img { height:38px !important; width:auto !important; }
.brand-text { font-size:22px !important; letter-spacing:1px !important; text-transform:uppercase !important; white-space:nowrap !important; }
#headerControls, .header-right-zone, .pm-header-controls-inner, .pm-header-status { display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; }
.pm-header-search-wrap {
  height: var(--pm-control-height) !important;
  min-height: var(--pm-control-height) !important;
  width: min(360px, 30vw) !important;
  min-width: 260px !important;
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:0 12px !important;
  border:0 !important; border-radius:var(--pm-radius-sm) !important;
  background:var(--pm-control-bg) !important; color:var(--pm-muted) !important;
}
.pm-header-search-wrap .ui-icon { width:22px !important; height:22px !important; }
.pm-header-search-input { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; border:0 !important; outline:0 !important; background:transparent !important; padding:0 !important; }
.pm-header-icon-btn { width:var(--pm-icon-target) !important; min-width:var(--pm-icon-target) !important; height:var(--pm-icon-target) !important; min-height:var(--pm-icon-target) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:transparent !important; color:var(--pm-text) !important; }
.pm-header-icon-btn .ui-icon, #headerTaskIcon { width:24px !important; height:24px !important; }
.pm-header-logout, .mobile-logout-btn.pm-header-logout {
  height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important;
  padding:0 14px !important; border:0 !important; border-radius:var(--pm-radius-sm) !important;
  background:var(--pm-dark) !important; color:#fff !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important;
  box-shadow:var(--pm-shadow-soft) !important;
}
.pm-header-logout .ui-icon { width:22px !important; height:22px !important; color:#fff !important; }

/* App menu */
#tabsBar.tabs-container, #tabsBar {
  display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  width:100% !important; min-height:52px !important; padding:6px 18px !important;
  background:var(--pm-surface) !important; border-bottom:1px solid var(--pm-border) !important;
  overflow-x:auto !important; overflow-y:hidden !important; position:relative !important; z-index:50 !important;
}
#tabsBar .tab {
  height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important;
  min-width:104px !important; padding:0 14px !important; border:0 !important; border-radius:var(--pm-radius-sm) !important;
  background:transparent !important; color:var(--pm-text) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; white-space:nowrap !important;
}
#tabsBar .tab:hover { background:#f3f4f6 !important; }
#tabsBar .tab.active { background:var(--pm-green) !important; color:#fff !important; font-weight:var(--pm-weight-medium) !important; }
#tabsBar .tab .ui-icon { width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; margin:0 !important; }

/* P2.11.3.a — Browser button reset
   Required before Universal buttons / controls so native browser button boxes
   do not leak through icon-only/action buttons. */
button {
  -webkit-appearance: none;
  appearance:        none;
  border:            none;
  outline:           none;
  box-shadow:        none;
  background:        none;
  padding:           0;
  margin:            0;
  cursor:            pointer;
  font-family:       var(--pm-font-family);
}

/* Universal buttons / controls */
button, .pm-btn, .pm-list-btn, .retail-op-btn, .retail-section-tab, .seg-btn {
  min-height:var(--pm-control-height) !important;
  font-size:var(--pm-font-ui) !important;
  font-weight:var(--pm-weight-light) !important;
}
.pm-btn, .pm-list-btn, .retail-op-btn {
  height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important;
  border:0 !important; border-radius:var(--pm-radius-sm) !important;
  padding:0 14px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  background:var(--pm-surface) !important; color:var(--pm-text) !important; box-shadow:var(--pm-shadow-soft) !important;
}
.pm-btn.primary, .pm-list-btn-primary, .retail-op-btn-primary { background:var(--pm-dark) !important; color:#fff !important; }
.pm-btn.success, .pm-list-btn-success, .retail-op-btn-success { background:var(--pm-green) !important; color:#fff !important; }
.pm-btn.danger, .pm-list-btn-danger, .retail-op-btn-danger { background:var(--pm-red) !important; color:#fff !important; }
.pm-btn .ui-icon, .pm-list-btn .ui-icon, .retail-op-btn .ui-icon, .pm-list-btn svg, .pm-btn svg { width:var(--pm-icon-size) !important; height:var(--pm-icon-size) !important; min-width:var(--pm-icon-size) !important; min-height:var(--pm-icon-size) !important; }

/* ================================================
   P2.11.3.a — BUTTON COLOUR MODIFIERS
   Colour only — all sizing, radius, weight and shadow remain locked.
   ================================================ */
.pm-btn-primary, .pm-list-btn-primary, .retail-op-btn-primary {
  background: var(--pm-green) !important;
  color:      #fff             !important;
}
.pm-btn-secondary, .pm-list-btn-secondary, .retail-op-btn-secondary {
  background: var(--pm-control-bg) !important;
  color:      var(--pm-text)       !important;
}
.pm-btn-ghost, .pm-list-btn-ghost, .retail-op-btn-ghost {
  background: transparent !important;
  color:      var(--pm-muted) !important;
  box-shadow: none          !important;
}
.pm-btn-danger, .pm-list-btn-danger, .retail-op-btn-danger {
  background: var(--pm-red) !important;
  color:      #fff          !important;
}
.pm-btn-danger-ghost, .pm-list-btn-danger-ghost {
  background: transparent !important;
  color:      var(--pm-red) !important;
  box-shadow: none          !important;
}

/* P2.11.3.a — Icon-only buttons: naked at rest */
.pm-btn-icon,
.pm-list-row-actions .pm-list-btn {
  width:         30px        !important;
  height:        30px        !important;
  min-width:     30px        !important;
  min-height:    30px        !important;
  padding:       0           !important;
  border:        none        !important;
  background:    transparent !important;
  box-shadow:    none        !important;
  color:         var(--pm-muted);
  border-radius: 4px         !important;
}
.pm-btn-icon:hover,
.pm-list-row-actions .pm-list-btn:hover {
  color: var(--pm-text) !important;
}
.pm-btn-icon .ui-icon,
.pm-list-row-actions .pm-list-btn .ui-icon {
  width:  20px !important;
  height: 20px !important;
}

/* P2.11.3.a — 30px small variant (table row actions only) */
.pm-btn-sm, .pm-list-btn-sm, .retail-op-btn-sm {
  height:        30px !important;
  min-height:    30px !important;
  padding:       0 10px !important;
  font-size:     12px  !important;
  border-radius: 6px   !important;
  gap:           5px   !important;
}

/* P2.11.3.a — Button label spans; desktop visible, mobile icon-only. */
.pm-btn .pm-btn-text,
.pm-list-btn .pm-btn-text,
.retail-op-btn .pm-btn-text {
  display: inline;
}

/* P2.11.3.a — Sub-view tabs: underline style, no fill. */
.pm-tab-nav-item {
  height:        var(--pm-control-height);
  padding:       0 14px;
  border:        none;
  border-bottom: 2px solid transparent;
  background:    transparent;
  color:         var(--pm-muted);
  font-size:     var(--pm-font-ui);
  font-weight:   var(--pm-weight-light);
  cursor:        pointer;
}
.pm-tab-nav-item.active {
  color:         var(--pm-green);
  border-bottom: 2px solid var(--pm-green);
  font-weight:   var(--pm-weight-medium);
}

/* P2.11.3.a — Table display helpers. */
.pm-list-stock-low { color: #BA7517 !important; font-weight: var(--pm-weight-medium) !important; }
.pm-status-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  margin-right:  6px;
  vertical-align: middle;
}
.pm-status-dot.online  { background: var(--pm-green); }
.pm-status-dot.offline { background: var(--pm-muted); }

input, select, textarea, .pm-search, .pm-list-search {
  min-height:var(--pm-control-height) !important;
  border:0 !important; border-radius:var(--pm-radius-sm) !important;
  background:var(--pm-control-bg) !important; color:var(--pm-text) !important;
  font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important;
}

/* Central list/table renderer */
.pm-central-list-page { width:100% !important; max-width:none !important; margin:0 !important; padding:18px 20px 100px !important; color:var(--pm-text) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; }
.pm-list-title-row { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; margin-bottom:14px !important; }
.pm-list-title-row h2 { margin:0 !important; display:inline-flex !important; align-items:center !important; gap:10px !important; font-size:24px !important; line-height:1.2 !important; font-weight:var(--pm-weight-medium) !important; letter-spacing:-0.015em !important; }
.pm-list-title-row h2 .ui-icon { width:30px !important; height:30px !important; }
.pm-list-tabs { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex-wrap:wrap !important; }
.pm-list-tab { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:var(--pm-surface) !important; color:var(--pm-text) !important; padding:0 15px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; box-shadow:var(--pm-shadow-soft) !important; }
.pm-list-tab.active { background:var(--pm-dark) !important; color:#fff !important; font-weight:var(--pm-weight-medium) !important; }
.pm-list-tab .ui-icon { width:24px !important; height:24px !important; }
.pm-central-list-layout { display:grid !important; grid-template-columns:225px minmax(0,1fr) !important; gap:14px !important; align-items:start !important; width:100% !important; }
.pm-central-list-main { min-width:0 !important; width:100% !important; }
.pm-list-filter-rail { width:225px !important; max-width:225px !important; background:var(--pm-surface) !important; border:0 !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow:hidden !important; position:sticky !important; top:8px !important; }
.pm-list-filter-rail summary { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; padding:0 13px !important; border-bottom:1px solid var(--pm-border-soft) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; list-style:none !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-medium) !important; cursor:pointer !important; }
.pm-list-filter-rail summary::-webkit-details-marker { display:none !important; }
.pm-list-filter-rail summary .ui-icon { width:22px !important; height:22px !important; }
.pm-list-filter-section { padding:11px 13px !important; border-bottom:1px solid var(--pm-border-soft) !important; }
.pm-list-filter-title { color:var(--pm-muted) !important; font-size:var(--pm-font-small) !important; font-weight:var(--pm-weight-light) !important; margin:0 0 7px !important; }
.pm-list-filter-items { display:flex !important; flex-direction:column !important; gap:3px !important; }
.pm-list-filter-chip { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; padding:0 10px !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:transparent !important; color:var(--pm-text) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; }
.pm-list-filter-chip:hover { background:#f3f4f6 !important; }
.pm-list-filter-chip.active { background:#ecfdf5 !important; color:var(--pm-green) !important; font-weight:var(--pm-weight-medium) !important; }
/* Track 1.4: chip summary shown in the filter-rail summary bar while collapsed */
.pm-list-filter-summary { display:flex !important; align-items:center !important; gap:4px !important; flex-wrap:wrap !important; min-width:0 !important; overflow:hidden !important; }
.pm-list-filter-chip-mini { height:20px !important; padding:0 8px !important; border-radius:999px !important; background:#ecfdf5 !important; color:var(--pm-green) !important; font-size:var(--pm-font-small) !important; font-weight:var(--pm-weight-medium) !important; white-space:nowrap !important; display:inline-flex !important; align-items:center !important; }
.pm-list-toolbar { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; flex-wrap:wrap !important; margin:0 0 10px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
.pm-list-toolbar-left, .pm-list-toolbar-actions { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
.pm-list-toolbar-left { flex:0 1 300px !important; }
.pm-list-toolbar-actions { flex:1 1 auto !important; }
.pm-list-search { width:280px !important; height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; display:inline-flex !important; align-items:center !important; gap:10px !important; padding:0 12px !important; }
.pm-list-search .ui-icon { width:24px !important; height:24px !important; }
.pm-list-search input { width:100% !important; min-width:0 !important; height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; border:0 !important; outline:0 !important; background:transparent !important; padding:0 !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; }
.pm-list-table-wrap { width:100% !important; margin-top:4px !important; background:var(--pm-surface) !important; border:0 !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow-x:auto !important; }
.pm-list-table { width:100% !important; min-width:980px !important; border-collapse:collapse !important; background:var(--pm-surface) !important; font-size:var(--pm-font-ui) !important; }
.pm-list-table th { height:48px !important; background:var(--pm-table-head) !important; color:#334155 !important; border-bottom:1px solid #d9dde2 !important; padding:11px 13px !important; text-align:left !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; white-space:nowrap !important; }
.pm-list-table td { height:var(--pm-row-height) !important; padding:11px 13px !important; background:var(--pm-surface) !important; color:var(--pm-text) !important; border-bottom:1px solid var(--pm-border-soft) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; vertical-align:middle !important; }
.pm-list-table td strong { font-size:16px !important; font-weight:var(--pm-weight-medium) !important; }
.pm-list-table tbody tr:hover td { background:var(--pm-surface-soft) !important; }
.pm-list-row-actions { display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; gap:5px !important; flex-wrap:nowrap !important; }
.pm-list-row-actions .pm-list-btn { width:var(--pm-icon-target) !important; min-width:var(--pm-icon-target) !important; height:var(--pm-icon-target) !important; min-height:var(--pm-icon-target) !important; padding:0 !important; }
.pm-list-row-actions .pm-list-btn-text { display:none !important; }
.pm-list-thumb { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; border-radius:var(--pm-radius-sm) !important; object-fit:cover !important; background:#eef2f7 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.pm-list-thumb .ui-icon, .pm-list-thumb svg { width:30px !important; height:30px !important; }
.pm-list-chip, .pm-status { min-height:28px !important; padding:4px 10px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; font-size:13px !important; font-weight:var(--pm-weight-light) !important; background:#f3f4f6 !important; color:#334155 !important; }
.pm-list-chip.success, .pm-status.success { background:#ecfdf5 !important; color:var(--pm-green) !important; }
.pm-list-chip.danger, .pm-status.danger { background:#fef2f2 !important; color:var(--pm-red) !important; }
.pm-list-chip.warning, .pm-status.warning { background:#fff7ed !important; color:#9a3412 !important; }
.pm-list-empty, .pm-empty { padding:32px 14px !important; color:var(--pm-muted) !important; text-align:center !important; font-size:var(--pm-font-ui) !important; }

/* ================================================
   Track 1.7 — CARD-MODE RENDERER (mobile card list)
   Desktop unchanged: .pm-list-card-mode is display:none by default, and the
   <table> stays visible. At the mobile breakpoint the two swap — the table
   this renderer already builds is hidden and the parallel card markup
   (already present in the same DOM, built by cardList() in
   app-list-renderer.js) takes over. No JS viewport branching; the renderer
   always emits both, CSS alone decides which one paints — a "renderer
   branch," per the spec's own wording, not a second design.
   ================================================ */
.pm-list-card-mode { display: none; }

@media (max-width: 768px) {
  .pm-list-table-wrap > table { display: none !important; }
  .pm-list-card-mode {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .pm-list-card {
    display: flex !important;
    gap: 10px !important;
    background: var(--pm-surface) !important;
    border: 1px solid var(--pm-border-soft) !important;
    border-radius: var(--pm-radius-sm) !important;
    padding: 12px !important;
  }
  .pm-list-card-media { flex: 0 0 auto !important; }
  .pm-list-card-body { flex: 1 1 auto !important; min-width: 0 !important; }
  .pm-list-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; }
  .pm-list-card-title { font-size: 16px !important; font-weight: var(--pm-weight-medium) !important; color: var(--pm-text) !important; min-width: 0 !important; }
  .pm-list-card-primary { font-size: var(--pm-font-ui) !important; font-weight: var(--pm-weight-medium) !important; color: var(--pm-text) !important; margin-top: 4px !important; }
  .pm-list-card-secondary { display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important; margin-top: 4px !important; }
  .pm-list-card-secondary-item { font-size: 13px !important; font-weight: var(--pm-weight-light) !important; color: var(--pm-muted) !important; }
  .pm-list-card-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 8px !important; }
  .pm-list-card-detail-body { margin-top: 8px !important; border-top: 1px solid var(--pm-border-soft) !important; padding-top: 8px !important; }
}

/* ================================================
   Track 1.7b — Receipts card-list (Accounting)
   Receipts reuses the Track 1.7 cardList() mechanism directly (read-only
   rows, no live form inputs, same renderer-branch pattern as above) — this
   rule only needs to hide Receipts' own bespoke <table> at the mobile
   breakpoint; .pm-list-card-mode's show/hide rule above already applies
   globally to any cardList() output, Receipts' included.
   ================================================ */
@media (max-width: 768px) {
  .pm-receipts-table-wrap > table { display: none !important; }
}

/* ================================================
   Track 1.7b — Staff Directory card-list
   Same reasoning as Receipts above: read-only rows, reuses cardList()
   directly, this rule just hides Staff Directory's own <table>.
   ================================================ */
@media (max-width: 768px) {
  .pm-staffdir-table-wrap > table { display: none !important; }
}

/* ================================================
   Track 1.7b — Stock Take responsive table (Retail)
   Stock Take's rows contain live <input> elements read by id
   (stCount_N / stVar_N) from several functions (updateStockTakeVariance,
   updateStockTakeSummary, submitStockTake, applyStockCorrections). Unlike
   the read-only lists above, duplicating those inputs into a second
   cardList()-style DOM block would create duplicate ids — getElementById
   would then always resolve to the same (first) input regardless of which
   copy is visually active, silently breaking count entry on mobile. So
   Stock Take instead gets a CSS-only responsive-table reflow: same single
   set of inputs, just restacked into a card-like layout ≤768px via
   data-label attributes (added directly on the <td> elements in
   openStockTake(), retail-stocktake.js) — no DOM duplication, no id risk.
   ================================================ */
@media (max-width: 768px) {
  #stock-take-modal .pm-retail-modal-table thead { display: none; }
  #stock-take-modal .pm-retail-modal-table,
  #stock-take-modal .pm-retail-modal-table tbody,
  #stock-take-modal .pm-retail-modal-table tr,
  #stock-take-modal .pm-retail-modal-table td {
    display: block;
    width: 100%;
  }
  #stock-take-modal .pm-retail-modal-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--pm-border-soft, #e2e8f0);
    border-radius: var(--pm-radius-sm, 10px);
    padding: 8px 12px;
  }
  #stock-take-modal .pm-retail-modal-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border: none;
    text-align: right;
  }
  #stock-take-modal .pm-retail-modal-table td::before {
    content: attr(data-label);
    font-weight: var(--pm-weight-medium, 500);
    color: var(--pm-muted, #64748b);
    text-align: left;
    flex: 0 0 auto;
  }
}

/* App UI Shell aliases */
.pm-page { width:100% !important; max-width:none !important; margin:0 !important; padding:18px 20px 100px !important; }
.pm-section-header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; margin-bottom:14px !important; }
.pm-section-title { display:inline-flex !important; align-items:center !important; gap:10px !important; font-size:24px !important; font-weight:var(--pm-weight-medium) !important; margin:0 !important; }
.pm-section-title .ui-icon { width:30px !important; height:30px !important; }
.pm-workspace { display:grid !important; grid-template-columns:225px minmax(0,1fr) !important; gap:14px !important; }
.pm-main-panel { min-width:0 !important; }
.pm-filter-rail { background:var(--pm-surface) !important; border:0 !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow:hidden !important; }
.pm-filter-title { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; padding:0 13px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; border-bottom:1px solid var(--pm-border-soft) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-medium) !important; }
.pm-filter-section { padding:11px 13px !important; border-bottom:1px solid var(--pm-border-soft) !important; }
.pm-filter-label { color:var(--pm-muted) !important; font-size:var(--pm-font-small) !important; font-weight:var(--pm-weight-light) !important; margin-bottom:7px !important; display:block !important; }
.pm-filter-list { display:flex !important; flex-direction:column !important; gap:3px !important; }
.pm-filter-btn { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; padding:0 10px !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:transparent !important; text-align:left !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; }
.pm-filter-btn.active { background:#ecfdf5 !important; color:var(--pm-green) !important; font-weight:var(--pm-weight-medium) !important; }
.pm-toolbar { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; margin:0 0 10px !important; }
.pm-table-shell { background:var(--pm-surface) !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow-x:auto !important; }
.pm-icon-btn { width:var(--pm-icon-target) !important; min-width:var(--pm-icon-target) !important; height:var(--pm-icon-target) !important; min-height:var(--pm-icon-target) !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:var(--pm-surface) !important; color:var(--pm-text) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-shadow:var(--pm-shadow-soft) !important; }
.pm-icon-btn .ui-icon { width:var(--pm-icon-size) !important; height:var(--pm-icon-size) !important; }

/* Main POS centralized surface */
.main-pos-workstation-shell { display:grid !important; grid-template-columns:225px minmax(0,1fr) 360px !important; gap:14px !important; padding:18px 20px 100px !important; }
.main-pos-left-rail, .main-pos-cart-docked { background:var(--pm-surface) !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow:hidden !important; }
.main-pos-rail-title, .main-pos-cart-header { min-height:var(--pm-control-height) !important; padding:0 13px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-medium) !important; border-bottom:1px solid var(--pm-border-soft) !important; }
.main-pos-center-panel { min-width:0 !important; }
.main-pos-topbar { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin-bottom:10px !important; }
.main-pos-search { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; border:0 !important; border-radius:var(--pm-radius-sm) !important; background:var(--pm-control-bg) !important; padding:0 12px !important; font-size:var(--pm-font-ui) !important; }
.main-pos-item-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important; gap:12px !important; }
.main-pos-card { background:var(--pm-surface) !important; border:0 !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; overflow:hidden !important; min-height:230px !important; }
.main-pos-card-name { font-size:16px !important; font-weight:var(--pm-weight-medium) !important; }
.main-pos-card-brand, .main-pos-card-meta, .main-pos-card-stock { font-size:13px !important; font-weight:var(--pm-weight-light) !important; color:var(--pm-muted) !important; }
.main-pos-card-price { font-size:16px !important; font-weight:var(--pm-weight-medium) !important; }
.main-pos-filter-btn { min-height:var(--pm-control-height) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; border-radius:var(--pm-radius-sm) !important; }
.main-pos-filter-btn.active { background:#ecfdf5 !important; color:var(--pm-green) !important; font-weight:var(--pm-weight-medium) !important; }
.main-pos-cart-button, .main-pos-new-customer, .main-pos-variant-submit { height:var(--pm-control-height) !important; min-height:var(--pm-control-height) !important; border-radius:var(--pm-radius-sm) !important; font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-medium) !important; }

/* Legacy tables and cards follow central sizing */
.card { border:0 !important; border-radius:var(--pm-radius) !important; box-shadow:var(--pm-shadow-soft) !important; }
table { font-size:var(--pm-font-ui) !important; }
th { font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; height:48px !important; background:var(--pm-table-head) !important; color:#334155 !important; }
td { font-size:var(--pm-font-ui) !important; font-weight:var(--pm-weight-light) !important; min-height:var(--pm-row-height) !important; }

@media (max-width: 1100px) {
  .main-pos-workstation-shell { grid-template-columns:1fr !important; padding:14px 12px 100px !important; }
  .main-pos-left-rail { display:none !important; }
  .main-pos-cart-docked { display:none !important; }
  .main-pos-mobile-only { display:inline-flex !important; }
}

@media (max-width: 900px) {
  .pm-central-list-page, .pm-page { padding:14px 12px 100px !important; }
  .pm-central-list-layout, .pm-workspace { display:block !important; }
  .pm-list-filter-rail, .pm-filter-rail { width:100% !important; max-width:100% !important; position:static !important; margin-bottom:10px !important; }
  .pm-list-tabs { width:100% !important; justify-content:flex-start !important; flex-wrap:nowrap !important; overflow-x:auto !important; }
  .pm-list-title-row, .pm-section-header { align-items:flex-start !important; flex-direction:column !important; }
  .pm-list-toolbar-left, .pm-list-search { width:100% !important; flex:1 1 100% !important; }
  .pm-mobile-icon-only { width:var(--pm-icon-target) !important; min-width:var(--pm-icon-target) !important; height:var(--pm-icon-target) !important; min-height:var(--pm-icon-target) !important; padding:0 !important; }
  .pm-mobile-icon-only .pm-list-btn-text { display:none !important; }
  .pm-mobile-icon-only:not(.is-active):not(.active) .pm-btn-text { display:none !important; }
  .pm-sub-tab.pm-mobile-icon-only.is-active,
  .pm-sub-tab.pm-mobile-icon-only.active { width:auto !important; min-width:auto !important; padding:0 10px !important; }
}

@media (max-width: 768px) {
  /* FIX (2026-08-17, Bobin's report: "padding in top header... is bit bigger
     than needed"): trimmed from 58px/8px. NOTE: `.pm-shell-header` (further
     down this file, a class selector, so higher specificity than this plain
     `header` type selector) sets its OWN min-height/padding-top/padding-
     bottom -- those values win for vertical sizing. This rule's min-height
     is effectively superseded there; only padding-left/right (10px) from
     here actually apply. Left as-is rather than removed, so this rule still
     does something sensible standalone if `.pm-shell-header` is ever
     removed from the header element for any reason. */
  header { min-height:50px !important; padding:6px 10px !important; }
  .header-left img { height:30px !important; }
  .brand-text { font-size:17px !important; }
  .pm-header-search-wrap { min-width:160px !important; width:min(240px,44vw) !important; }
  .pm-header-logout { width:var(--pm-icon-target) !important; min-width:var(--pm-icon-target) !important; padding:0 !important; }
  .pm-header-logout .desktop-only-text { display:none !important; }
  /* FIX (2026-08-17, Bobin's report — Add Product save button, and
     suspected all modals, render under the bottom nav bar on mobile):
     z-index was 9999 -- higher than nearly every modal in the app (legacy
     inline modals run 9000-10010 inconsistently per file, the standard
     .pm-modal-overlay is 9100). A fixed bottom bar has no business sitting
     above an open modal; modals are meant to be the topmost interactive
     layer whenever one is open. Lowered to 500 -- comfortably below the
     LOWEST modal z-index anywhere in the app (9000) so #tabsBar can never
     again cover a modal's footer/buttons, while staying above ordinary
     page content (max z-index seen outside modals/tabsBar/cart-drawer is
     50). Also fixes a pre-existing inconsistency: js/app-config.js had its
     own duplicate #tabsBar rule hardcoding z-index:9000 (no !important) --
     harmless before since this !important rule always won regardless, but
     now unified to the same 500 there too so there's one real value, not
     two disagreeing ones. */
  /* FIX (2026-08-17, Bobin's report: "padding... in bottom menu bar is bit
     bigger than needed"): trimmed padding-top and the tab row's own height
     -- min-height:44px keeps the tap target at the accepted accessible
     minimum (was 48px), just tighter than before. safe-area-inset-bottom is
     left untouched since that's real device chrome, not our padding. */
  #tabsBar.tabs-container, #tabsBar { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; top:auto !important; width:100vw !important; min-height:50px !important; background:rgba(255,255,255,.96) !important; backdrop-filter:blur(15px) !important; border-top:1px solid var(--pm-border) !important; border-bottom:0 !important; box-shadow:0 -1px 10px rgba(0,0,0,.08) !important; padding:4px 2px env(safe-area-inset-bottom) 2px !important; justify-content:space-evenly !important; gap:0 !important; z-index:500 !important; }
  #tabsBar .tab { min-width:0 !important; flex:1 1 0 !important; height:44px !important; min-height:44px !important; padding:0 !important; background:transparent !important; color:#555 !important; flex-direction:column !important; }
  #tabsBar .tab span, #tabsBar .tab .tab-label { display:none !important; }
  #tabsBar .tab .ui-icon { width:26px !important; height:26px !important; }
  #tabsBar .tab.active { color:var(--pm-green) !important; background:transparent !important; }
}


/* ==========================================
   P2.10.8.b.5 — BULK SELECTION + MAIN POS LAYOUT STANDARD
   Centralized, not module-specific patching.
   ========================================== */

/* Central checkbox standard */
.pm-list-check {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  accent-color: #111827 !important;
  cursor: pointer !important;
}

.pm-list-select-col {
  width: 46px !important;
  text-align: center !important;
}

.pm-list-select-col input {
  display: inline-block !important;
  vertical-align: middle !important;
}

.pm-list-bulk-status {
  min-width: auto !important;
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

.pm-list-bulk-status.is-active {
  background: #ecfdf5 !important;
  color: #15803d !important;
}

/* Main POS layout reset: prevents stretched cards and huge image columns. */
.main-pos-workstation-shell {
  display: grid !important;
  grid-template-columns: 225px minmax(0, 1fr) 340px !important;
  gap: 14px !important;
  align-items: start !important;
  min-height: calc(100vh - 124px) !important;
  padding: 18px 20px 100px !important;
  background: #eef1f4 !important;
}

.main-pos-left-rail,
.main-pos-cart-docked {
  align-self: start !important;
  max-height: calc(100vh - 146px) !important;
  overflow: auto !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}

.main-pos-center-panel {
  min-width: 0 !important;
  align-self: start !important;
}

.main-pos-topbar.workstation,
.main-pos-topbar {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.main-pos-item-grid,
#mainPosGrid.main-pos-item-grid,
#mainPosGrid.workstation-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
}

.main-pos-card {
  height: 244px !important;
  min-height: 244px !important;
  max-height: 244px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  cursor: pointer !important;
}

.main-pos-card-media {
  position: relative !important;
  flex: 0 0 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  min-height: 132px !important;
  overflow: hidden !important;
  background: #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.main-pos-card-media img {
  width: 100% !important;
  height: 132px !important;
  max-height: 132px !important;
  object-fit: cover !important;
  display: block !important;
}

.main-pos-card-placeholder {
  width: 100% !important;
  height: 132px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
}

.main-pos-card-placeholder .ui-icon,
.main-pos-card-placeholder svg {
  width: 32px !important;
  height: 32px !important;
}

.main-pos-card-chip,
.main-pos-card-out {
  position: absolute !important;
  z-index: 2 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
}

.main-pos-card-chip {
  right: 8px !important;
  bottom: 8px !important;
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
}

.main-pos-card-out {
  left: 8px !important;
  top: 8px !important;
  background: #b91c1c !important;
  color: #fff !important;
}

.main-pos-card-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 10px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

.main-pos-card-brand,
.main-pos-card-meta,
.main-pos-card-stock {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.main-pos-card-name {
  font-size: 15px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
  color: #111827 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.main-pos-card-price {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111827 !important;
}

.main-pos-card-footer {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

/* Cart stays open on desktop and does not stretch product grid. */
.main-pos-cart-docked {
  position: sticky !important;
  top: 12px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 520px !important;
}

.main-pos-cart-panel.main-pos-cart-docked {
  transform: none !important;
}

/* Mobile keeps collapsible cart/categories. */
@media (max-width: 1100px) {
  .main-pos-workstation-shell {
    display: block !important;
    padding: 14px 12px 100px !important;
  }

  .main-pos-left-rail,
  .main-pos-cart-docked {
    display: none !important;
  }

  .main-pos-mobile-only {
    display: inline-flex !important;
  }

  .main-pos-item-grid,
  #mainPosGrid.main-pos-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }

  .main-pos-card {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
  }

  .main-pos-card-media,
  .main-pos-card-media img,
  .main-pos-card-placeholder {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
}


/* ==========================================
   P2.10.8.b.7 — MAIN POS CART STANDARD
   Fixes cart drawer/docked cart layout.
   Central cart rules:
   - readable spacing
   - totals use two-column flex rows
   - promo row does not break totals
   - payment buttons standard height
   - mobile/resized drawer is usable
   - desktop docked cart remains clean
   ========================================== */

.main-pos-cart-panel {
  background: #ffffff !important;
  color: #111827 !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: var(--pm-font-family, "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

.main-pos-cart-docked {
  position: sticky !important;
  top: 12px !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: calc(100vh - 148px) !important;
  min-height: 540px !important;
  max-height: calc(100vh - 148px) !important;
}

.main-pos-cart-header {
  flex: 0 0 52px !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.main-pos-cart-title {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #111827 !important;
}

.main-pos-cart-title .ui-icon,
.main-pos-cart-title svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.main-pos-cart-header .pm-icon-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #111827 !important;
}

.main-pos-cart-header .pm-icon-btn .ui-icon,
.main-pos-cart-header .pm-icon-btn svg {
  width: 30px !important;
  height: 30px !important;
}

.main-pos-cart-customer {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: #f8fafc !important;
}

.main-pos-cart-select,
.main-pos-promo-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #e2e6eb !important;
  color: #111827 !important;
  padding: 0 12px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  box-shadow: none !important;
}

.main-pos-new-customer {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

.main-pos-cart-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
}

.main-pos-cart-items:empty::before {
  content: "Cart is empty";
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 15px;
  font-weight: 300;
}

.main-pos-promo-row {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-top: 1px solid #eef2f7 !important;
  background: #ffffff !important;
}

.main-pos-promo-row .pm-btn,
.main-pos-promo-row button {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
}

.main-pos-promo-feedback {
  grid-column: 1 / -1 !important;
  min-height: 16px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #64748b !important;
}

.main-pos-cart-footer {
  flex: 0 0 auto !important;
  padding: 12px 14px 14px !important;
  border-top: 1px solid #eef2f7 !important;
  background: #f8fafc !important;
}

.main-pos-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 28px !important;
  margin: 0 !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
}

.main-pos-total-row span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.main-pos-total-row span:last-child {
  flex: 0 0 auto !important;
  min-width: 86px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.main-pos-total-row.success {
  color: #15803d !important;
}

.main-pos-total-row.muted {
  color: #64748b !important;
  font-size: 13px !important;
}

.main-pos-total-row.grand {
  min-height: 38px !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e5e7eb !important;
  color: #111827 !important;
  font-size: 19px !important;
  font-weight: 400 !important;
}

.main-pos-total-row.grand span {
  font-weight: 400 !important;
}

.main-pos-payment-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.main-pos-payment-grid .pm-btn,
.main-pos-payment-grid button,
.main-pos-void-btn {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

.main-pos-payment-grid .pm-btn .ui-icon,
.main-pos-payment-grid button .ui-icon,
.main-pos-void-btn .ui-icon,
.main-pos-payment-grid .pm-btn svg,
.main-pos-payment-grid button svg,
.main-pos-void-btn svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}

.main-pos-void-btn {
  width: 100% !important;
  margin-top: 8px !important;
  justify-content: center !important;
  background: #9f1239 !important;
  color: #ffffff !important;
}

/* Cart overlay is only used when the cart becomes a drawer. */
.main-pos-cart-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .24) !important;
  z-index: 9998 !important;
  backdrop-filter: blur(1px) !important;
}

/* Resized/tablet drawer mode. This fixes the screenshot layout. */
@media (max-width: 1100px) {
  .main-pos-cart-panel.main-pos-cart-docked,
  .main-pos-cart-panel {
    display: flex !important;
    position: fixed !important;
    top: 84px !important;
    right: -430px !important;
    width: min(420px, calc(100vw - 28px)) !important;
    height: calc(100dvh - 104px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 104px) !important;
    z-index: 9999 !important;
    border-radius: 10px !important;
    transition: right .22s ease !important;
  }

  .main-pos-cart-panel.main-pos-cart-docked.main-pos-cart-open {
    right: 0 !important;
  }

  .main-pos-cart-header .main-pos-mobile-only,
  .main-pos-cart-button.main-pos-mobile-only {
    display: inline-flex !important;
  }
}

/* Small mobile: make the drawer almost full-width and keep totals readable. */
@media (max-width: 520px) {
  .main-pos-cart-panel.main-pos-cart-docked,
  .main-pos-cart-panel {
    top: 72px !important;
    right: -100vw !important;
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
    border-radius: 10px !important;
  }

  .main-pos-cart-panel.main-pos-cart-docked.main-pos-cart-open {
    right: 0 !important;
  }

  .main-pos-promo-row {
    grid-template-columns: 1fr !important;
  }

  .main-pos-payment-grid {
    grid-template-columns: 1fr !important;
  }

  .main-pos-total-row {
    font-size: 14px !important;
  }

  .main-pos-total-row.grand {
    font-size: 18px !important;
  }
}

/* Desktop: hide mobile cart open/close controls and keep cart docked. */
@media (min-width: 1101px) {
  .main-pos-cart-docked {
    display: flex !important;
  }

  .main-pos-cart-header .main-pos-mobile-only,
  .main-pos-cart-button.main-pos-mobile-only {
    display: none !important;
  }

  .main-pos-cart-overlay {
    display: none !important;
  }
}


/* ==========================================
   P2.10.8.b.8 — MAIN POS CATEGORY HIERARCHY STANDARD
   Makes categories and subcategories visually different.
   ========================================== */

.main-pos-category-menu,
.main-pos-category-menu-docked {
  padding: 10px !important;
}

.main-pos-menu-title {
  min-height: 44px !important;
  padding: 0 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #111827 !important;
  border-bottom: 1px solid #eef2f7 !important;
  margin-bottom: 8px !important;
}

.main-pos-menu-title span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.main-pos-menu-title .ui-icon {
  width: 22px !important;
  height: 22px !important;
}

.main-pos-menu-reset {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #15803d !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 300 !important;
}

.main-pos-filter-divider {
  height: 1px !important;
  margin: 8px 0 !important;
  background: #eef2f7 !important;
}

.main-pos-filter-node {
  position: relative !important;
  margin: 1px 0 !important;
}

.main-pos-filter-btn {
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #111827 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.main-pos-filter-btn:hover {
  background: #f8fafc !important;
}

.main-pos-filter-btn.active {
  background: #ecfdf5 !important;
  color: #15803d !important;
}

.main-pos-filter-label {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.main-pos-filter-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

.main-pos-filter-count {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.main-pos-filter-btn.active .main-pos-filter-count {
  background: #dcfce7 !important;
  color: #15803d !important;
}

/* Root quick filter */
.main-pos-filter-root {
  margin-bottom: 4px !important;
  background: #f8fafc !important;
}

.main-pos-filter-root.active {
  background: #ecfdf5 !important;
}

.main-pos-filter-root .main-pos-filter-name,
.main-pos-filter-root > span:first-child {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Level 0 = category */
.main-pos-filter-level-0 {
  margin-top: 3px !important;
}

.main-pos-filter-level-0 .main-pos-filter-name {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #111827 !important;
}

.main-pos-filter-level-0 .main-pos-filter-rail-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  opacity: .75 !important;
}

.main-pos-filter-level-0.active .main-pos-filter-rail-dot {
  background: #15803d !important;
  opacity: 1 !important;
}

/* Children container creates a clear hierarchy line. */
.main-pos-filter-children {
  margin: 1px 0 5px 12px !important;
  padding-left: 11px !important;
  border-left: 1px solid #dbe3ec !important;
}

/* Level 1 = subcategory */
.main-pos-filter-level-1 {
  min-height: 36px !important;
  padding: 7px 8px !important;
}

.main-pos-filter-level-1 .main-pos-filter-name {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #475569 !important;
}

.main-pos-filter-level-1 .main-pos-filter-rail-dot {
  width: 7px !important;
  height: 1px !important;
  min-width: 7px !important;
  min-height: 1px !important;
  background: #94a3b8 !important;
  border-radius: 0 !important;
}

.main-pos-filter-level-1.active .main-pos-filter-name {
  color: #15803d !important;
  font-weight: 400 !important;
}

.main-pos-filter-level-1.active .main-pos-filter-rail-dot {
  background: #15803d !important;
  height: 2px !important;
}

/* Level 2+ = deeper grouping */
.main-pos-filter-level-2,
.main-pos-filter-level-3 {
  min-height: 34px !important;
  padding: 6px 8px !important;
}

.main-pos-filter-level-2 .main-pos-filter-name,
.main-pos-filter-level-3 .main-pos-filter-name {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #64748b !important;
}

.main-pos-filter-level-2 .main-pos-filter-rail-dot,
.main-pos-filter-level-3 .main-pos-filter-rail-dot {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
}

/* Mobile/resized drawer: keep hierarchy readable without wasting width. */
@media (max-width: 760px) {
  .main-pos-category-menu,
  .main-pos-category-menu-docked {
    padding: 9px !important;
  }

  .main-pos-filter-level-0 .main-pos-filter-name {
    font-size: 15px !important;
  }

  .main-pos-filter-level-1 .main-pos-filter-name {
    font-size: 14px !important;
  }

  .main-pos-filter-children {
    margin-left: 10px !important;
    padding-left: 9px !important;
  }
}


/* ==========================================
   P2.10.8.b.9 — MAIN POS DUPLICATE BROWSE GUARD
   Screenshot showed both:
   - desktop left Categories rail
   - mobile Browse categories drawer
   at the same time.
   Rule:
   - desktop/tablet workstation >= 761px: show left rail only, hide Browse.
   - mobile <= 760px: hide left rail, show Browse.
   ========================================== */

/* Safe default: mobile-only controls are hidden unless a mobile breakpoint enables them.
   Cart open/close controls excluded here on purpose - they're governed solely by the
   1100px-boundary pair below (max-width:1100px show / min-width:1101px hide) so there's
   only one breakpoint to maintain for them, not two disagreeing ones. */
.main-pos-mobile-only,
details.main-pos-burger.main-pos-mobile-only {
  display: none !important;
}

/* Desktop/tablet workstation mode. */
@media (min-width: 761px) {
  .main-pos-workstation-shell {
    display: grid !important;
    grid-template-columns: 225px minmax(0, 1fr) 340px !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .main-pos-left-rail {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .main-pos-center-panel {
    min-width: 0 !important;
  }

  .main-pos-center-panel .main-pos-nav-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  details#mainCategoryBurger,
  details#mainCategoryBurger.main-pos-burger,
  details#mainCategoryBurger.main-pos-mobile-only,
  #mainCategoryBurger,
  #mainCategoryMobileMenu {
    display: none !important;
    visibility: hidden !important;
  }

  /* Cart open/close buttons removed from this 761px-boundary block on purpose -
     they're governed solely by the max-width:1100px / min-width:1101px pair
     elsewhere in this file, so this stale rule no longer fights that one. */

  .main-pos-cart-docked {
    display: flex !important;
    visibility: visible !important;
  }
}

/* True mobile mode. */
@media (max-width: 760px) {
  .main-pos-workstation-shell {
    display: block !important;
    padding: 14px 12px 100px !important;
  }

  .main-pos-left-rail {
    display: none !important;
    visibility: hidden !important;
  }

  details#mainCategoryBurger.main-pos-burger.main-pos-mobile-only,
  details#mainCategoryBurger {
    display: block !important;
    visibility: visible !important;
  }

  .main-pos-burger-summary {
    display: inline-flex !important;
    align-items: center !important;
  }

  .main-pos-cart-button.main-pos-mobile-only,
  .main-pos-cart-header .main-pos-mobile-only {
    display: inline-flex !important;
  }
}


/* ==========================================
   P2.10.9.c — CENTRAL RETAIL MODAL RENDERER
   One Retail modal shell before Vite migration.
   ========================================== */

.pm-retail-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(3px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: auto !important;
  padding: 22px !important;
}

.pm-retail-modal-card {
  width: 100% !important;
  max-width: var(--pm-retail-modal-width, 760px) !important;
  margin: auto !important;
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 44px) !important;
  font-family: var(--pm-font-family, "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

.pm-retail-modal-header {
  min-height: 62px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #eef2f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #ffffff !important;
}

.pm-retail-modal-heading {
  min-width: 0 !important;
}

.pm-retail-modal-heading h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

.pm-retail-modal-heading p {
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 300 !important;
}

.pm-retail-modal-close {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  cursor: pointer !important;
}

.pm-retail-modal-close:hover {
  background: #eef2f7 !important;
}

.pm-retail-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px !important;
  background: #ffffff !important;
}

.pm-retail-modal-footer {
  flex: 0 0 auto !important;
  padding: 14px 18px !important;
  border-top: 1px solid #eef2f7 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.pm-retail-modal-btn {
  height: 40px !important;
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.pm-retail-modal-btn-primary,
.pm-retail-modal-btn-dark,
.pm-retail-modal-btn-indigo,
.pm-retail-modal-btn-purple {
  background: #111827 !important;
  color: #ffffff !important;
}

.pm-retail-modal-btn-success,
.pm-retail-modal-btn-green {
  background: #15803d !important;
  color: #ffffff !important;
}

.pm-retail-modal-btn-danger,
.pm-retail-modal-btn-red {
  background: #9f1239 !important;
  color: #ffffff !important;
}

.pm-retail-modal-btn-teal {
  background: #0f766e !important;
  color: #ffffff !important;
}

.pm-retail-modal-fields {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.pm-retail-modal-field {
  background: #f8fafc !important;
  border-radius: 8px !important;
  padding: 10px 11px !important;
}

.pm-retail-modal-field label {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  margin-bottom: 4px !important;
}

.pm-retail-modal-field div {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
}

.pm-retail-modal-note {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
}

.pm-retail-modal-note-info {
  background: #f0f9ff !important;
  color: #0c4a6e !important;
  border: 1px solid #bae6fd !important;
}

.pm-retail-modal-note-danger {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  border: 1px solid #fecdd3 !important;
}

.pm-retail-modal-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.pm-retail-modal-form-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.pm-retail-modal-form-row > * {
  min-width: 0 !important;
}

.pm-retail-modal-body input,
.pm-retail-modal-body select,
.pm-retail-modal-body textarea {
  height: 40px !important;
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #e2e6eb !important;
  color: #111827 !important;
  padding: 0 12px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

.pm-retail-modal-table-wrap {
  width: 100% !important;
  max-height: 58dvh !important;
  overflow: auto !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

.pm-retail-modal-table {
  width: 100% !important;
  min-width: 650px !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}

.pm-retail-modal-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  height: 42px !important;
  background: #eef2f6 !important;
  color: #334155 !important;
  padding: 9px 11px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  text-align: left !important;
}

.pm-retail-modal-table td {
  height: 48px !important;
  border-bottom: 1px solid #eef2f7 !important;
  padding: 9px 11px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}

.pm-retail-modal-table td input[type="number"] {
  width: 90px !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .pm-retail-modal-overlay {
    padding: 10px !important;
  }

  .pm-retail-modal-card {
    max-height: calc(100dvh - 20px) !important;
  }

  .pm-retail-modal-header,
  .pm-retail-modal-body,
  .pm-retail-modal-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pm-retail-modal-footer {
    justify-content: stretch !important;
  }

  .pm-retail-modal-footer .pm-retail-modal-btn {
    flex: 1 1 auto !important;
  }

  .pm-retail-modal-table {
    min-width: 560px !important;
  }
}




/* ================================================
   P2.11.3b — UNIVERSAL MODAL SHELL FOUNDATION
   Desktop: centred overlay. Mobile: full-screen sheet.
   Added from Design Brief Addendum Section 10b.
   ================================================ */
.pm-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9100 !important;
  overflow: hidden !important;
  padding: 22px !important;
}

.pm-modal {
  background: var(--pm-surface) !important;
  border-radius: var(--pm-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(720px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  color: var(--pm-text) !important;
  font-family: var(--pm-font-family) !important;
}

.pm-modal-header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--pm-border-soft) !important;
  background: var(--pm-surface) !important;
  flex-shrink: 0 !important;
}

.pm-modal-body {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--pm-surface) !important;
}

.pm-modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--pm-border-soft) !important;
  background: var(--pm-surface) !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* Bridge existing Retail modal renderer to the universal modal shell. */
.pm-retail-modal-overlay.pm-modal-overlay {
  z-index: 10050 !important;
}

.pm-retail-modal-card.pm-modal {
  width: min(var(--pm-retail-modal-width, 760px), 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
}

.pm-retail-modal-header.pm-modal-header {
  min-height: unset !important;
  padding: 20px 24px 16px !important;
}

.pm-retail-modal-body.pm-modal-body {
  padding: 20px 24px !important;
}

.pm-retail-modal-footer.pm-modal-footer {
  padding: 16px 24px !important;
  background: var(--pm-surface) !important;
}

@media (max-width: 768px) {
  .pm-modal-overlay,
  .pm-retail-modal-overlay.pm-modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .pm-modal,
  .pm-retail-modal-card.pm-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .pm-modal-header,
  .pm-retail-modal-header.pm-modal-header {
    position: sticky !important;
    top: 0 !important;
    background: var(--pm-surface) !important;
    z-index: 10 !important;
    padding: 16px 18px 12px !important;
  }

  .pm-modal-body,
  .pm-retail-modal-body.pm-modal-body {
    padding: 16px 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pm-modal-footer,
  .pm-retail-modal-footer.pm-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--pm-surface) !important;
    padding: 12px 18px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    flex-wrap: nowrap !important;
  }

  .pm-modal-footer .pm-btn,
  .pm-modal-footer .pm-list-btn,
  .pm-retail-modal-footer.pm-modal-footer .pm-retail-modal-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .pm-modal .pm-tab-nav-item { white-space: nowrap !important; }
  .pm-modal .pm-list-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
}

/* ================================================
   Track 1.3b — UNIVERSAL PANEL CONTRACT (P2.11.7o)
   The sticky-header / scrollable-middle / sticky-footer shape above
   (P2.11.3b) is locked for OVERLAY modals only (.pm-modal). Non-modal
   panels that need the identical internal shape — inline/docked
   components that are never an overlay, e.g. the Main POS cart panel —
   had no shared contract, so each one reimplemented the shape bespoke.
   That's the structural gap behind the A2c class of bug: a patch to
   one bespoke panel can silently break a sibling with no shared code
   path to catch it. This contract factors out ONLY the internal shape
   (header/body/footer flex arrangement + the min-height:0/overflow-y:auto
   discipline that lets the body actually compress and scroll instead of
   overflowing its parent) — positioning/sizing (docked vs. inline vs.
   sidebar, width, height) stays the consumer's own concern, same as how
   .pm-modal itself leaves overlay positioning to .pm-modal-overlay.
   Named pm-panel-shell (not pm-panel) deliberately — .pm-panel already
   exists project-wide as a simple bordered card alias (peppermall-
   universal.css, aliased with .pm-card/.pm-box/.card) and would have
   collided with different, incompatible semantics if reused here.
   ================================================ */
.pm-panel-shell {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.pm-panel-shell-head {
  flex: 0 0 auto !important;
}

.pm-panel-shell-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.pm-panel-shell-foot {
  flex: 0 0 auto !important;
}

@media (max-width: 768px) {
  .pm-panel-shell-foot {
    padding-bottom: calc(env(safe-area-inset-bottom)) !important;
  }
}

/* First adopter (Track 1.3b): main-pos-cart-panel. Purely additive —
   every existing main-pos-cart-* rule is untouched byte-for-byte; these
   classes mark the cart panel as governed by the shared contract so a
   future audit can grep .pm-panel-shell-body to find every component
   that must preserve this shape, and so the NEXT new panel can adopt
   pm-panel-shell directly instead of writing bespoke CSS again. */
.main-pos-cart-panel.pm-panel-shell { }
.main-pos-cart-header.pm-panel-shell-head { }
.main-pos-cart-items.pm-panel-shell-body { }
.main-pos-cart-footer.pm-panel-shell-foot { }


/* ==========================================
   P2.10.9.c.1 — RETAIL TOOLBAR ACTION VISIBILITY FIX
   Fixes blank square action buttons in Retail Inventory.
   Cause:
   - central action registry buttons were marked icon-only too early
   - in resized/zoomed widths, labels were hidden before the toolbar had a
     reliable icon/text fallback
   Rule:
   - Retail toolbar action buttons keep labels from tablet/desktop widths
   - icon-only is allowed only on true small mobile widths
   ========================================== */

.pm-list-toolbar {
  align-items: flex-start !important;
}

.pm-list-toolbar-actions {
  min-width: 0 !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
}

.pm-list-toolbar-actions .pm-retail-action-btn {
  width: auto !important;
  min-width: var(--pm-control-height, 40px) !important;
  height: var(--pm-control-height, 40px) !important;
  min-height: var(--pm-control-height, 40px) !important;
  padding: 0 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.pm-list-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.pm-list-toolbar-actions .pm-retail-action-btn .ui-icon,
.pm-list-toolbar-actions .pm-retail-action-btn svg {
  display: inline-block !important;
  width: var(--pm-icon-size, 30px) !important;
  height: var(--pm-icon-size, 30px) !important;
  min-width: var(--pm-icon-size, 30px) !important;
  min-height: var(--pm-icon-size, 30px) !important;
  color: currentColor !important;
}

/* True mobile only: icons become the primary label. */
@media (max-width: 640px) {
  .pm-list-toolbar-actions .pm-retail-action-btn {
    width: var(--pm-icon-target, 40px) !important;
    min-width: var(--pm-icon-target, 40px) !important;
    padding: 0 !important;
  }

  .pm-list-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
    display: none !important;
  }
}


/* ==========================================
   P2.10.9.c.2 — CENTRAL BUTTON MOBILE ICON GUARD
   The central list renderer no longer marks every icon button as mobile-icon-only.
   Toolbar buttons keep labels on desktop/tablet/resized windows.
   ========================================== */

.pm-list-toolbar-actions > .pm-list-btn {
  width: auto !important;
  min-width: var(--pm-control-height, 40px) !important;
  height: var(--pm-control-height, 40px) !important;
  min-height: var(--pm-control-height, 40px) !important;
  padding: 0 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.pm-list-toolbar-actions > .pm-list-btn .pm-list-btn-text {
  display: inline-flex !important;
  align-items: center !important;
}

.pm-list-toolbar-actions > .pm-list-btn .ui-icon,
.pm-list-toolbar-actions > .pm-list-btn svg {
  display: inline-block !important;
  width: var(--pm-icon-size, 30px) !important;
  height: var(--pm-icon-size, 30px) !important;
  min-width: var(--pm-icon-size, 30px) !important;
  min-height: var(--pm-icon-size, 30px) !important;
}

/* Only buttons explicitly marked icon-only may hide text on true small mobile. */
@media (max-width: 640px) {
  .pm-list-toolbar-actions > .pm-list-btn.pm-mobile-icon-only {
    width: var(--pm-icon-target, 40px) !important;
    min-width: var(--pm-icon-target, 40px) !important;
    padding: 0 !important;
  }

  .pm-list-toolbar-actions > .pm-list-btn.pm-mobile-icon-only .pm-list-btn-text {
    display: none !important;
  }
}


/* ==========================================
   P2.10.9.c.3 — RETAIL EXPLICIT ACTION BUTTONS
   Guarantees central Retail action buttons are visible even if older cached
   CSS or renderer behaviour is still present.
   ========================================== */

.pm-list-toolbar-actions .pm-retail-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: var(--pm-control-height, 40px) !important;
  height: var(--pm-control-height, 40px) !important;
  min-height: var(--pm-control-height, 40px) !important;
  padding: 0 14px !important;
  color: inherit !important;
  font-size: var(--pm-font-size-base, 15px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.pm-list-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
  display: inline-flex !important;
  align-items: center !important;
  color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

.pm-list-toolbar-actions .pm-retail-action-btn svg,
.pm-list-toolbar-actions .pm-retail-action-btn .ui-icon {
  display: inline-block !important;
  width: var(--pm-icon-size, 30px) !important;
  height: var(--pm-icon-size, 30px) !important;
  min-width: var(--pm-icon-size, 30px) !important;
  min-height: var(--pm-icon-size, 30px) !important;
}


/* ==========================================
   P2.10.9.c.4 — RETAIL INVENTORY TOOLBAR REBASE
   Includes Retail Inventory renderer in the upload so the visible toolbar
   actually uses central retailActionButton() output.
   ========================================== */

.pm-list-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==========================================
   P2.10.9.c.5 — RETAIL INVENTORY TOOLBAR FORCED MOUNT
   The Inventory toolbar action buttons are mounted after PMListUI.render().
   ========================================== */

.pm-retail-mounted-toolbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.pm-retail-mounted-toolbar-actions .pm-retail-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: var(--pm-control-height, 40px) !important;
  height: var(--pm-control-height, 40px) !important;
  min-height: var(--pm-control-height, 40px) !important;
  padding: 0 14px !important;
}

.pm-retail-mounted-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: currentColor !important;
}


/* ==========================================
   P2.10.9.c.6 — RETAIL TOOLBAR HELPER RESTORE
   Ensures mounted Retail action buttons are visible.
   ========================================== */

.pm-retail-mounted-toolbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.pm-retail-mounted-toolbar-actions .pm-retail-action-btn,
.pm-list-toolbar-actions .pm-retail-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: var(--pm-control-height, 40px) !important;
  height: var(--pm-control-height, 40px) !important;
  min-height: var(--pm-control-height, 40px) !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

.pm-retail-mounted-toolbar-actions .pm-retail-action-btn .pm-list-btn-text,
.pm-list-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==========================================
   P2.10.9.c.7 — RETAIL TOOLBAR BUTTON CONTRAST
   Add Product is a dark (green) action button, so its text/icon must be white.
   ========================================== */

/* P2.10.9.c.9 — WASTAGE BLANK-BUTTON FIX (2026-07-05)
   Wastage was originally a dark/red button (hence the white-text rule below
   once including it), but CDBT19 2C9I-A (peppermall-design-system.css) later
   redesigned it as a neutral white button ("a navigation/stock-management
   entry point, not an irreversible destructive button"). That redesign set
   .pm-retail-action-logWastage's icon/text color back to --pm-ink-1, but this
   file's white-forcing rule was never updated to drop logWastage from its
   selector list. Because this file's selectors include the extra
   .pm-retail-mounted-toolbar-actions ancestor class, they are MORE SPECIFIC
   than design-system.css's fix and won on cascade — forcing white icon/text
   onto Wastage's now-white background, i.e. an invisible (blank-looking)
   button. Confirmed live: Retail Inventory toolbar, 4th button, iPhone 12
   mini and desktop Safari alike (not a mobile-only bug).
   Fix: logWastage removed from all four selector groups below; addProduct
   (genuinely green) is unaffected. */

.pm-list-toolbar-actions .pm-retail-action-addProduct,
.pm-retail-mounted-toolbar-actions .pm-retail-action-addProduct {
  color: #ffffff !important;
}

.pm-list-toolbar-actions .pm-retail-action-addProduct .pm-list-btn-text,
.pm-retail-mounted-toolbar-actions .pm-retail-action-addProduct .pm-list-btn-text {
  color: #ffffff !important;
}

.pm-list-toolbar-actions .pm-retail-action-addProduct svg,
.pm-retail-mounted-toolbar-actions .pm-retail-action-addProduct svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.pm-list-toolbar-actions .pm-retail-action-addProduct *,
.pm-retail-mounted-toolbar-actions .pm-retail-action-addProduct * {
  color: #ffffff !important;
}


/* ==========================================
   P2.10.9.c.8 — MOBILE FIX: mounted Retail toolbar icon-only collapse
   Root cause: retailCentralMountInventoryToolbarActions() (retail-inventory.js)
   injects action buttons into .pm-retail-mounted-toolbar-actions, a separate
   wrapper from .pm-list-toolbar-actions. The existing @media(max-width:640px)
   icon-only rule (P2.10.9.c.1, above) only targets .pm-list-toolbar-actions,
   so mounted buttons never collapsed on small phones — full-text buttons
   ("Add Product", "Purchase Orders", "Stock Take", "Recall / Hold", "Backup",
   "Import", "CSV Import"...) stayed full-width and overlapped at ≤390px
   (confirmed live on iPhone 12 mini, 375px viewport, 2026-07-05).
   Fix: extend the same icon-only collapse to the mounted wrapper. Placed
   after c.5/c.6 (unconditional mount rules) in source order so this media
   query wins the cascade at matching specificity.
   Scope: .pm-retail-mounted-toolbar-actions only. No change to desktop/tablet.
   ========================================== */
@media (max-width: 640px) {
  .pm-retail-mounted-toolbar-actions .pm-retail-action-btn {
    width: var(--pm-icon-target, 40px) !important;
    min-width: var(--pm-icon-target, 40px) !important;
    padding: 0 !important;
  }

  .pm-retail-mounted-toolbar-actions .pm-retail-action-btn .pm-list-btn-text {
    display: none !important;
  }
}



/* P2.11.2.a — correction polish: Main POS search and options chip */
.main-pos-search-corrected {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 12px;
    min-height: 42px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.main-pos-search-corrected input {
    min-height: 40px;
    font-size: 14px;
}
.main-pos-options-chip {
    position: absolute;
    right: 8px;
    bottom: 8px;
    border: 1px solid #111827;
    background: rgba(255,255,255,0.95);
    color: #111827;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    text-transform: none;
}
.main-pos-options-chip:hover,
.main-pos-options-chip:focus {
    background: #111827;
    color: #fff;
}
.pm-list-bulk-status.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}
.pm-list-bulk-status.is-active .pm-list-btn-text,
.pm-list-bulk-status.is-active .ui-icon {
    color: #fff;
}

/* P2.11.2.b — Corrections 2 design fixes */
.main-pos-topbar.workstation {
    align-items: stretch !important;
}
.main-pos-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.main-pos-search-corrected,
label.pm-search.main-pos-search.main-pos-search-corrected {
    width: min(420px, 42vw) !important;
    height: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}
.main-pos-search-corrected .ui-icon,
.main-pos-search-corrected svg {
    width: 20px !important;
    height: 20px !important;
    color: #475569 !important;
    stroke: currentColor !important;
}
.main-pos-search-corrected input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 14px !important;
}
.main-pos-options-chip,
button.main-pos-options-chip {
    min-height: 30px !important;
    height: 30px !important;
    border: 1px solid #111827 !important;
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 6px 16px rgba(15,23,42,.10) !important;
    pointer-events: auto !important;
}
.main-pos-options-chip:hover,
.main-pos-options-chip:focus {
    background: #111827 !important;
    color: #ffffff !important;
}
.pm-list-btn-danger,
.pm-list-row-actions .pm-list-btn-danger,
button.pm-list-btn-danger {
    background: #ffffff !important;
    color: var(--pm-red, #b91c1c) !important;
    border: 1px solid rgba(185, 28, 28, 0.35) !important;
}
.pm-list-btn-danger .ui-icon,
.pm-list-row-actions .pm-list-btn-danger .ui-icon,
button.pm-list-btn-danger svg {
    color: var(--pm-red, #b91c1c) !important;
    stroke: currentColor !important;
}
.pm-list-btn-danger:hover,
.pm-list-row-actions .pm-list-btn-danger:hover {
    background: #fef2f2 !important;
    color: var(--pm-red, #b91c1c) !important;
}
.pm-sortable-th {
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
}
.pm-sortable-th:hover {
    background: #eef2f7 !important;
}
.pm-sort-indicator {
    margin-left: 6px !important;
    color: #64748b !important;
    font-size: 12px !important;
}
.pm-retail-variant-note {
    color: #7c3aed !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}
.marketing-one-shop-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}
.marketing-one-shop-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-width: 0 !important;
}
.marketing-trigger-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}
@media (max-width: 900px) {
    .main-pos-search-corrected,
    label.pm-search.main-pos-search.main-pos-search-corrected {
        width: 100% !important;
    }
    .marketing-one-shop-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================
   P2.11.2.c — Corrections 3
   Universal option/variant modal + action colour rules.
   ========================================== */
.main-pos-options-chip,
button.main-pos-options-chip,
.pm-option-btn {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid #111827 !important;
  border-radius: var(--pm-radius-sm, 8px) !important;
  background: #ffffff !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: var(--pm-weight-medium, 500) !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.main-pos-options-chip:hover,
.main-pos-options-chip:focus,
.pm-option-btn:hover,
.pm-option-btn:focus {
  background: #111827 !important;
  color: #ffffff !important;
}
.main-pos-options-chip .ui-icon,
.main-pos-options-chip svg,
.pm-option-btn .ui-icon,
.pm-option-btn svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}
.main-pos-modal-layer,
.main-pos-options-modal-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  background: rgba(15,23,42,.34) !important;
  backdrop-filter: blur(2px) !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 78px 16px 24px !important;
  overflow-y: auto !important;
}
.main-pos-variant-modal,
.pm-universal-modal,
.pm-variant-options-modal {
  width: min(720px, calc(100vw - 32px)) !important;
  max-height: min(76vh, 760px) !important;
  overflow: auto !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.28) !important;
  padding: 18px !important;
}
.main-pos-variant-close,
.pm-universal-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.main-pos-variant-close .ui-icon,
.pm-universal-modal-close .ui-icon { width: 22px !important; height: 22px !important; }
.main-pos-variant-title { padding-right: 48px !important; font-size: 18px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.main-pos-variant-subtitle { color: #64748b !important; font-size: 13px !important; margin-bottom: 14px !important; }
.main-pos-variant-header,
.main-pos-variant-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) 100px 150px !important;
  align-items: center !important;
  gap: 12px !important;
}
.main-pos-variant-header { padding: 8px 0 !important; border-bottom: 1px solid #e5e7eb !important; color: #64748b !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.main-pos-variant-row { padding: 12px 0 !important; border-bottom: 1px solid #f1f5f9 !important; }
.main-pos-variant-name { font-weight: 600 !important; }
.main-pos-variant-meta { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; color: #64748b !important; font-size: 12px !important; margin-top: 3px !important; }
.main-pos-variant-price { font-weight: 600 !important; text-align: right !important; }
.main-pos-variant-stepper { display: grid !important; grid-template-columns: 38px 1fr 38px !important; gap: 6px !important; align-items: center !important; }
.main-pos-variant-stepper button { height: 38px !important; min-height: 38px !important; border-radius: 8px !important; border: 1px solid #d1d5db !important; background: #ffffff !important; color: #111827 !important; box-shadow: none !important; }
.main-pos-variant-stepper input { height: 38px !important; min-height: 38px !important; text-align: center !important; border-radius: 8px !important; background: #f8fafc !important; }
.main-pos-variant-note { margin: 12px 0 !important; color: #64748b !important; font-size: 12px !important; }
.main-pos-variant-submit { width: 100% !important; background: #111827 !important; color: #ffffff !important; }
@media (max-width: 760px) {
  .main-pos-modal-layer,
  .main-pos-options-modal-layer { align-items: flex-end !important; padding: 16px !important; }
  .main-pos-variant-modal,
  .pm-variant-options-modal { width: 100% !important; max-height: 86vh !important; border-radius: 16px 16px 10px 10px !important; }
  .main-pos-variant-header { display: none !important; }
  .main-pos-variant-row { grid-template-columns: 1fr !important; align-items: stretch !important; gap: 8px !important; }
  .main-pos-variant-price { text-align: left !important; }
}
/* Retail action colour rule: waste/destructive stock actions red, row delete buttons white/red. */
#dynamic-tab-view .pmr-btn.red,
button[onclick*="openWastageModal"],
button[onclick*="processWastage"],
button[onclick*="addWastageItem"] {
  background: var(--pm-red, #9f1239) !important;
  color: #ffffff !important;
  border: 1px solid var(--pm-red, #9f1239) !important;
}
#dynamic-tab-view .pmr-btn.red .ui-icon,
button[onclick*="openWastageModal"] .ui-icon,
button[onclick*="processWastage"] .ui-icon,
button[onclick*="addWastageItem"] .ui-icon {
  color: #ffffff !important;
  stroke: currentColor !important;
}
#dynamic-tab-view .pmr-row-btn.red,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn,
.pm-list-row-actions .pm-list-btn-danger,
button.pm-list-btn-danger {
  background: #ffffff !important;
  color: var(--pm-red, #9f1239) !important;
  border: 1px solid rgba(159,18,57,.42) !important;
}
#dynamic-tab-view .pmr-row-btn.red .ui-icon,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn .ui-icon,
.pm-list-row-actions .pm-list-btn-danger .ui-icon,
button.pm-list-btn-danger .ui-icon {
  color: var(--pm-red, #9f1239) !important;
  stroke: currentColor !important;
}
#dynamic-tab-view .pmr-row-btn.red:hover,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn:hover,
.pm-list-row-actions .pm-list-btn-danger:hover,
button.pm-list-btn-danger:hover {
  background: #fef2f2 !important;
}


/* ==========================================
   P2.11.2.d — Screenshot corrections
   Variants label, soft button borders, red waste/delete actions.
   ========================================== */
.main-pos-options-chip,
button.main-pos-options-chip,
.pm-option-btn {
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10) !important;
  outline: none !important;
}
.main-pos-options-chip:hover,
.main-pos-options-chip:focus,
.pm-option-btn:hover,
.pm-option-btn:focus {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #111827 !important;
}
.main-pos-variant-modal,
.pm-universal-modal,
.pm-variant-options-modal {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}
.main-pos-card[title],
.main-pos-card-media[title],
.main-pos-options-chip[title] {
  text-decoration: none !important;
}

/* Stock-loss actions are red with white icon/text. */
.pm-retail-waste-btn,
button.pm-retail-waste-btn,
button[onclick*="openWastageModal"],
button[onclick*="processWastage"],
button[onclick*="addWastageItem"] {
  background: var(--pm-red, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.pm-retail-waste-btn .ui-icon,
.pm-retail-waste-btn svg,
button[onclick*="openWastageModal"] .ui-icon,
button[onclick*="processWastage"] .ui-icon,
button[onclick*="addWastageItem"] .ui-icon {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* Latest rule: row Delete is a red button with an X icon. */
.pm-retail-delete-x-btn,
button.pm-retail-delete-x-btn,
.pm-list-row-actions .pm-list-btn-danger,
button.pm-list-btn-danger,
#dynamic-tab-view .pmr-row-btn.red,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn {
  background: var(--pm-red, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.pm-retail-delete-x-btn .ui-icon,
.pm-retail-delete-x-btn svg,
.pm-list-row-actions .pm-list-btn-danger .ui-icon,
.pm-list-row-actions .pm-list-btn-danger svg,
button.pm-list-btn-danger .ui-icon,
button.pm-list-btn-danger svg,
#dynamic-tab-view .pmr-row-btn.red .ui-icon,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn .ui-icon {
  color: #ffffff !important;
  stroke: currentColor !important;
}
.pm-retail-delete-x-btn:hover,
button.pm-retail-delete-x-btn:hover,
.pm-list-row-actions .pm-list-btn-danger:hover,
button.pm-list-btn-danger:hover,
#dynamic-tab-view .pmr-row-btn.red:hover,
#dynamic-tab-view button[title^="Delete"].pmr-row-btn:hover {
  background: #991b1b !important;
  color: #ffffff !important;
}


/* ==========================================
   P2.11.2.f — Universal Variant Manager / Picker
   ========================================== */
.pm-variant-picker {
    display: grid;
    gap: 6px;
    width: 100%;
}
.pm-variant-picker label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pm-variant-picker select,
.pm-variant-picker input[type="search"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    color: #111827;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pm-variant-picker select:focus,
.pm-variant-picker input[type="search"]:focus {
    outline: none;
    border-color: #8aa4bf;
    box-shadow: 0 0 0 3px rgba(138, 164, 191, .18);
}
.pm-variant-empty-note {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed #dbe3ec;
    border-radius: 12px;
    color: #64748b;
    background: #f8fafc;
    font-size: 13px;
}
.pm-variant-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1f4b73;
    font-size: 11px;
    font-weight: 700;
}
.pm-po-line-variant {
    margin-top: 3px;
    color: #475569;
    font-size: 11px;
}
.pm-po-add-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.4fr) 90px 120px auto;
    gap: 8px;
    align-items: end;
}
@media (max-width: 980px) {
    .pm-po-add-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   P2.11.2.h — Universal summary row + expandable detail row
   ========================================== */
.pm-list-table-expandable .pm-list-detail-control-col {
    width: 112px;
    white-space: nowrap;
}
.pm-list-btn-detail {
    border: 1px solid #dbe3ec !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.pm-list-btn-detail.is-open {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
.pm-list-detail-row > td {
    background: #f8fafc;
    border-top: 0 !important;
    padding: 0 !important;
}
.pm-list-detail-row[hidden] { display: none !important; }
.pm-detail-panel {
    margin: 0;
    padding: 16px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-top: 1px solid #e5edf5;
    border-bottom: 1px solid #e5edf5;
}
.pm-detail-panel h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}
.pm-detail-muted { color: #64748b; font-size: 12px; }
.pm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.pm-detail-stat {
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    padding: 10px 12px;
}
.pm-detail-stat label {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.pm-detail-stat strong { font-size: 13px; color: #111827; }
.pm-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    overflow: hidden;
}
.pm-detail-table th,
.pm-detail-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    vertical-align: top;
}
.pm-detail-table th {
    background: #f1f5f9;
    color: #334155;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
}
.pm-detail-table tr:last-child td { border-bottom: 0; }
.pm-variant-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
}
.pm-variant-count-chip.has-variants {
    background: #eefbf3;
    border-color: #bbf7d0;
    color: #166534;
}
.pm-po-product-picker-row {
    display: flex;
    gap: 8px;
    align-items: end;
}
.pm-po-product-picker-row select { flex: 1; min-width: 0; }
.pm-po-add-new-product-btn {
    flex: 0 0 auto;
    min-height: 42px;
    border: 1px solid #dbe3ec !important;
    background: #fff !important;
    color: #111827 !important;
}
@media (max-width: 720px) {
    .pm-list-table-expandable .pm-list-detail-control-col { width: auto; }
    .pm-detail-panel { padding: 12px; }
    .pm-po-product-picker-row { flex-direction: column; align-items: stretch; }
}


/* ================================================
   P2.11.3b.1 — MOBILE TOOLBAR BUTTON ALIGNMENT CORRECTION
   Scope icon-only collapse to toolbar/action rows only. Do not shrink every
   .pm-list-btn in tables/lists, because that breaks Retail inventory rows.
   ================================================ */
@media (max-width: 768px) {
  .pm-toolbar .pm-btn,
  .pm-list-toolbar .pm-list-btn,
  .pm-page-toolbar .pm-btn,
  .pm-page-toolbar .pm-list-btn,
  .retail-toolbar .retail-op-btn,
  .pmr-toolbar .retail-op-btn,
  .pmr-toolbar .pm-list-btn,
  .pmr-actions .pm-list-btn,
  .pm-modal-footer .pm-btn,
  .pm-modal-footer .pm-list-btn {
    min-height: var(--pm-control-height) !important;
  }

  .pm-toolbar .pm-btn:has(.ui-icon),
  .pm-list-toolbar .pm-list-btn:has(.ui-icon),
  .pm-page-toolbar .pm-btn:has(.ui-icon),
  .pm-page-toolbar .pm-list-btn:has(.ui-icon),
  .retail-toolbar .retail-op-btn:has(.ui-icon),
  .pmr-toolbar .retail-op-btn:has(.ui-icon),
  .pmr-toolbar .pm-list-btn:has(.ui-icon),
  .pmr-actions .pm-list-btn:has(.ui-icon) {
    width:     var(--pm-control-height) !important;
    min-width: var(--pm-control-height) !important;
    padding:   0 !important;
  }

  .pm-toolbar .pm-btn:has(.ui-icon) .pm-btn-text,
  .pm-list-toolbar .pm-list-btn:has(.ui-icon) .pm-btn-text,
  .pm-page-toolbar .pm-btn:has(.ui-icon) .pm-btn-text,
  .pm-page-toolbar .pm-list-btn:has(.ui-icon) .pm-btn-text,
  .retail-toolbar .retail-op-btn:has(.ui-icon) .pm-btn-text,
  .pmr-toolbar .retail-op-btn:has(.ui-icon) .pm-btn-text,
  .pmr-toolbar .pm-list-btn:has(.ui-icon) .pm-btn-text,
  .pmr-actions .pm-list-btn:has(.ui-icon) .pm-btn-text,
  .pm-toolbar .pm-btn:has(.ui-icon) .pm-list-btn-text,
  .pm-list-toolbar .pm-list-btn:has(.ui-icon) .pm-list-btn-text,
  .pm-page-toolbar .pm-btn:has(.ui-icon) .pm-list-btn-text,
  .pm-page-toolbar .pm-list-btn:has(.ui-icon) .pm-list-btn-text,
  .retail-toolbar .retail-op-btn:has(.ui-icon) .pm-list-btn-text,
  .pmr-toolbar .retail-op-btn:has(.ui-icon) .pm-list-btn-text,
  .pmr-toolbar .pm-list-btn:has(.ui-icon) .pm-list-btn-text,
  .pmr-actions .pm-list-btn:has(.ui-icon) .pm-list-btn-text {
    display: none !important;
  }
}

/* P2.11.3b.2 — TEXT-CLASS-NAME GAP FIX (2026-07-05)
   P2.11.3b.1 above only hid ".pm-btn-text" when a toolbar button collapsed to
   icon-only at ≤768px. But the app's shared button renderer, PMListUI.button()
   (app-list-renderer.js), outputs the text label as ".pm-list-btn-text" — a
   DIFFERENT class name — and this is what virtually every module actually
   uses (Accounting, Staff, Administration, Marketing, Customers, Services,
   Tasks all build their toolbar buttons through this shared helper; only
   module-tasks.js uses ".pm-btn-text" directly). Practical effect before this
   fix: on any phone ≤768px, these toolbars' buttons correctly shrank to a
   40x40px icon-only box (the button-sizing rule above matched fine, since it
   only needs :has(.ui-icon)), but the full text label stayed rendered inside
   that now-too-small box, unhidden — clipped/overflowing text on nearly
   every module's mobile toolbar, not just Retail's. Confirmed via direct
   comparison of PMListUI.button()'s output against every selector in
   P2.11.3b.1; not yet re-verified live on device pending deploy.
   Fix: added the missing ".pm-list-btn-text" variant of every selector in
   the text-hiding block above. No change to the box-sizing rules (unaffected
   by this class-name gap), no change to desktop/tablet widths. */


/* P2.11.3b.1 — Visual correction after combined pack testing
   Restore mobile brand/header visibility and avoid experimental o-series hiding. */
@media (max-width: 768px) {
  body.pm-p2113b1-visual-correction .brand-header,
  body.pm-p2113b1-visual-correction .brand-logo,
  body.pm-p2113b1-visual-correction .desktop-brand,
  body.pm-p2113b1-visual-correction .app-brand,
  body.pm-p2113b1-visual-correction .logo-text,
  body.pm-p2113b1-visual-correction .brand-text {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 42vw !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.pm-p2113b1-visual-correction header,
  body.pm-p2113b1-visual-correction .app-header,
  body.pm-p2113b1-visual-correction .top-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  body.pm-p2113b1-visual-correction #headerControls {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* ================================================
   P2.11.3b.3 — ROOT HEADER + LIVE RETAIL CLASS FIX
   Evidence from live console showed the actual DOM uses:
   header > .header-left + #headerControls, and Retail tabs use .pm-list-tab.
   This block targets those live selectors directly instead of only helper classes.
   ================================================ */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Keep the real root header inside the viewport on every screen size. */
body.pm-p2113b3-root-live-layout-fix header,
header {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.pm-p2113b3-root-live-layout-fix .header-left,
.header-left {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
}

body.pm-p2113b3-root-live-layout-fix .header-left img,
.header-left img {
  flex: 0 0 auto !important;
}

body.pm-p2113b3-root-live-layout-fix .header-left > div,
.header-left > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.pm-p2113b3-root-live-layout-fix .brand-text,
.brand-text {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.pm-p2113b3-root-live-layout-fix #headerControls,
body.pm-p2113b3-root-live-layout-fix .header-right-zone,
#headerControls,
.header-right-zone {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.pm-p2113b3-root-live-layout-fix .pm-header-controls-inner,
.pm-header-controls-inner {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Apply P2.11.3 underline sub-view styling to the live Retail class .pm-list-tab. */
.pm-list-tabs {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.pm-list-tab {
  height: var(--pm-control-height) !important;
  min-height: var(--pm-control-height) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pm-muted) !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  font-size: var(--pm-font-ui) !important;
  font-weight: var(--pm-weight-light) !important;
  white-space: nowrap !important;
}
.pm-list-tab.active {
  background: transparent !important;
  color: var(--pm-green) !important;
  border-bottom-color: var(--pm-green) !important;
  font-weight: var(--pm-weight-medium) !important;
}
.pm-list-tab .ui-icon {
  width: 22px !important;
  height: 22px !important;
}

/* Final chosen visual line weight after testing: 1.0 is lighter than 1.25/1.5. */
.ui-icon,
.pm-btn .ui-icon,
.pm-list-btn .ui-icon,
.retail-op-btn .ui-icon,
.pm-list-tab .ui-icon,
#tabsBar .tab .ui-icon {
  stroke-width: 1.0 !important;
}

@media (max-width: 768px) {
  body.pm-p2113b3-root-live-layout-fix header,
  header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  body.pm-p2113b3-root-live-layout-fix .header-left,
  .header-left {
    flex: 1 1 42vw !important;
    max-width: 46vw !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body.pm-p2113b3-root-live-layout-fix .header-left img,
  .header-left img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  body.pm-p2113b3-root-live-layout-fix .brand-text,
  .brand-text {
    max-width: 34vw !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.pm-p2113b3-root-live-layout-fix #headerControls,
  body.pm-p2113b3-root-live-layout-fix .header-right-zone,
  #headerControls,
  .header-right-zone {
    flex: 1 1 52vw !important;
    max-width: 52vw !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.pm-p2113b3-root-live-layout-fix .pm-header-controls-inner,
  .pm-header-controls-inner {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.pm-p2113b3-root-live-layout-fix .pm-header-search-wrap,
  .pm-header-search-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.pm-p2113b3-root-live-layout-fix .pm-header-search-input,
  .pm-header-search-input {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Live Retail sub-view tabs: scrollable underline chips on mobile. */
  .pm-list-title-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .pm-list-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .pm-list-tabs::-webkit-scrollbar { display: none !important; }
  .pm-list-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 0 12px !important;
  }
}


/* ================================================
   P2.11.3b.4 — MOBILE UTILITY HEADER CORRECTION
   Backend/offline POS mobile header: logo only + utility controls.
   Desktop remains brand + search + controls.
   ================================================ */
@media (max-width: 768px) {
  body.pm-p2113b4-mobile-utility-header header,
  header {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  /* Mobile POS is utility-first: logo only, no brand wordmark/subtitle. */
  body.pm-p2113b4-mobile-utility-header .header-left,
  .header-left {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  body.pm-p2113b4-mobile-utility-header .header-left img,
  .header-left img {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: cover !important;
    display: block !important;
  }
  body.pm-p2113b4-mobile-utility-header .header-left > div,
  .header-left > div,
  body.pm-p2113b4-mobile-utility-header .brand-text,
  .brand-text {
    display: none !important;
  }

  body.pm-p2113b4-mobile-utility-header #headerControls,
  body.pm-p2113b4-mobile-utility-header .header-right-zone,
  #headerControls,
  .header-right-zone {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 58px) !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body.pm-p2113b4-mobile-utility-header .pm-header-controls-inner,
  .pm-header-controls-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  /* Search is icon-only until tapped/focused. */
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap,
  .pm-header-search-wrap {
    flex: 0 0 var(--pm-icon-target) !important;
    width: var(--pm-icon-target) !important;
    min-width: var(--pm-icon-target) !important;
    max-width: var(--pm-icon-target) !important;
    height: var(--pm-icon-target) !important;
    min-height: var(--pm-icon-target) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--pm-radius-sm) !important;
    background: var(--pm-control-bg) !important;
    overflow: hidden !important;
    transition: width .18s ease, max-width .18s ease, flex-basis .18s ease !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap .ui-icon,
  .pm-header-search-wrap .ui-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-search-input,
  .pm-header-search-input {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap:focus-within,
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap.pm-header-search-open,
  .pm-header-search-wrap:focus-within,
  .pm-header-search-wrap.pm-header-search-open {
    flex-basis: min(38vw, 190px) !important;
    width: min(38vw, 190px) !important;
    max-width: min(38vw, 190px) !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap:focus-within .pm-header-search-input,
  body.pm-p2113b4-mobile-utility-header .pm-header-search-wrap.pm-header-search-open .pm-header-search-input,
  .pm-header-search-wrap:focus-within .pm-header-search-input,
  .pm-header-search-wrap.pm-header-search-open .pm-header-search-input {
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Bring back the utility controls on mobile: time, tracker/tasks, key, logout. */
  body.pm-p2113b4-mobile-utility-header .pm-header-status,
  .pm-header-status {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.pm-p2113b4-mobile-utility-header .desktop-only-clock,
  .desktop-only-clock {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    max-width: 44px !important;
    height: var(--pm-icon-target) !important;
    font-size: 12px !important;
    font-weight: var(--pm-weight-medium) !important;
    color: var(--pm-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-icon-btn,
  body.pm-p2113b4-mobile-utility-header .pm-header-logout,
  body.pm-p2113b4-mobile-utility-header .mobile-logout-btn,
  .pm-header-icon-btn,
  .pm-header-logout,
  .mobile-logout-btn {
    flex: 0 0 var(--pm-icon-target) !important;
    width: var(--pm-icon-target) !important;
    min-width: var(--pm-icon-target) !important;
    max-width: var(--pm-icon-target) !important;
    height: var(--pm-icon-target) !important;
    min-height: var(--pm-icon-target) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.pm-p2113b4-mobile-utility-header .pm-header-logout,
  body.pm-p2113b4-mobile-utility-header .mobile-logout-btn,
  .pm-header-logout,
  .mobile-logout-btn {
    background: var(--pm-dark) !important;
    color: #fff !important;
    border-radius: var(--pm-radius-sm) !important;
  }
  body.pm-p2113b4-mobile-utility-header .desktop-only-text,
  .desktop-only-text {
    display: none !important;
  }
  body.pm-p2113b4-mobile-utility-header #headerTaskIcon,
  #headerTaskIcon,
  body.pm-p2113b4-mobile-utility-header .pm-header-icon-btn .ui-icon,
  body.pm-p2113b4-mobile-utility-header .pm-header-logout .ui-icon,
  .pm-header-icon-btn .ui-icon,
  .pm-header-logout .ui-icon {
    width: 22px !important;
    height: 22px !important;
  }
}


/* ================================================
   P2.11.3c — Retail list/product action alignment
   Scoped to Retail list screens. Keeps the P2.11.3b.4 mobile utility header intact.
   ================================================ */
.pm-list-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.pm-retail-more-menu {
  position: fixed;
  z-index: 9300;
  min-width: 210px;
  max-width: min(260px, calc(100vw - 24px));
  background: var(--pm-surface);
  border: 1px solid var(--pm-border-soft, #e5e7eb);
  border-radius: var(--pm-radius);
  box-shadow: 0 12px 32px rgba(15,23,42,0.16);
  padding: 6px;
}
.pm-retail-more-menu button {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-dark);
  font-family: var(--pm-font-family);
  font-size: var(--pm-font-small);
  font-weight: var(--pm-weight-light);
  text-align: left;
  cursor: pointer;
}
.pm-retail-more-menu button:hover {
  background: var(--pm-control-bg);
}
.pm-retail-more-menu button.danger {
  color: var(--pm-red);
}
.pm-retail-more-menu .ui-icon {
  width: 18px !important;
  height: 18px !important;
}
.pm-list-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-list-stock-qty {
  font-weight: var(--pm-weight-light);
}
.pm-list-stock-low {
  color: #BA7517 !important;
  font-weight: var(--pm-weight-medium) !important;
}
.pm-list-category-display {
  color: var(--pm-dark);
}
.pm-list-category-muted {
  color: var(--pm-muted);
}
@media (max-width: 768px) {
  .pm-retail-more-menu {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
  }
}


/* P2.11.3d.2 — Inventory online status dot as a safe list toggle */
.pm-list-status-toggle {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
  border-radius: 999px;
}
.pm-list-status-toggle:hover,
.pm-list-status-toggle:focus-visible {
  background: rgba(21,128,61,0.10);
  outline: none;
}
.pm-product-header-actions .pm-btn,
.pm-product-header-actions .retail-op-btn {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
}
@media (max-width: 768px) {
  .pm-product-header-actions .pm-btn .pm-btn-text,
  .pm-product-header-actions .retail-op-btn .pm-btn-text { display: none !important; }
  .pm-product-header-actions .pm-btn,
  .pm-product-header-actions .retail-op-btn {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }
}


/* P2.11.3d.3 — Product page online/offline status toggle beside title */
.pm-product-title-status-toggle,
.pm-product-online-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: none !important;
  background: rgba(21, 128, 61, 0.10) !important;
  color: var(--pm-green) !important;
  font-size: 12px !important;
  font-weight: var(--pm-weight-medium) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}
.pm-product-title-status-toggle.offline,
.pm-product-online-toggle.offline {
  background: rgba(100, 116, 139, 0.12) !important;
  color: var(--pm-muted) !important;
}
.pm-product-title-status-toggle .ui-icon,
.pm-product-online-toggle .ui-icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1px !important;
  flex: 0 0 auto !important;
}
.pm-product-title-status-toggle:hover,
.pm-product-online-toggle:hover {
  filter: brightness(0.96);
}
@media (max-width: 768px) {
  .pm-product-title-status-toggle,
  .pm-product-online-toggle {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
  }
}


/* P2.11.3d.4 — rendered product title online/offline smart toggle */
.pm-product-title-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.pm-product-title-line h1 {
  margin-right: 2px !important;
}
.pm-product-title-status-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: var(--pm-weight-medium) !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.pm-product-title-status-toggle.online {
  background: rgba(21, 128, 61, 0.10) !important;
  color: var(--pm-green) !important;
}
.pm-product-title-status-toggle.offline {
  background: rgba(100, 116, 139, 0.12) !important;
  color: var(--pm-muted) !important;
}
.pm-product-title-status-toggle .ui-icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1px !important;
  flex: 0 0 auto !important;
}
.pm-product-title-status-toggle:hover {
  filter: brightness(0.96);
}
@media (max-width: 768px) {
  .pm-product-title-status-toggle {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
  }
  .pm-product-title-status-toggle .pm-btn-text {
    display: inline !important;
  }
}


/* P2.11.3d.5 — visible online/offline toggle with robust icon/text */
.pm-product-title-status-toggle .pm-btn-text,
.pm-list-online-toggle .pm-btn-text {
  display: inline !important;
}
.pm-list-online-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: none !important;
  background: rgba(21, 128, 61, 0.08) !important;
  color: var(--pm-green) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: var(--pm-weight-medium) !important;
  white-space: nowrap !important;
}
.pm-list-online-toggle.offline {
  background: rgba(100, 116, 139, 0.12) !important;
  color: var(--pm-muted) !important;
}
.pm-list-online-toggle .ui-icon,
.pm-product-title-status-toggle .ui-icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1px !important;
  flex: 0 0 auto !important;
}
.pm-list-online-toggle:hover,
.pm-product-title-status-toggle:hover {
  filter: brightness(0.96);
}


/* P2.11.3d.9 — inventory online/offline inline icon fallback */
.pm-list-online-toggle .pm-inline-toggle-icon {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  stroke-width: 1px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.pm-list-online-toggle.online .pm-inline-toggle-icon {
  color: var(--pm-green) !important;
}
.pm-list-online-toggle.offline .pm-inline-toggle-icon {
  color: var(--pm-muted) !important;
}


/* P2.11.3d.10 — mandatory Inventory Online/Offline icon + colour clarity */
.pm-list-online-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: var(--pm-weight-medium) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.pm-list-online-toggle.online {
  background: rgba(21, 128, 61, 0.13) !important;
  border-color: rgba(21, 128, 61, 0.22) !important;
  color: var(--pm-green) !important;
}
.pm-list-online-toggle.offline {
  background: rgba(100, 116, 139, 0.14) !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
  color: var(--pm-muted) !important;
}
.pm-list-online-toggle .pm-inline-toggle-icon {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.25px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
}
.pm-list-online-toggle .pm-btn-text {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
}
.pm-list-online-toggle:hover {
  filter: brightness(0.96);
}
@media (max-width: 768px) {
  .pm-list-online-toggle {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
  }
  .pm-list-online-toggle .pm-inline-toggle-icon {
    width: 18px !important;
    height: 18px !important;
  }
}


/* P2.11.3f — Modal Migration Stage 1: Retail shared modal shell hardening */
.pm-modal-overlay[data-p2113f-modal-stage="retail-shared-stage-1"],
.pm-modal-overlay.p2113f-retail-modal-stage-1 {
  z-index: 9100 !important;
}
.pm-modal[data-p2113f-modal-stage="retail-shared-stage-1"],
.pm-modal.p2113f-retail-modal-stage-1 {
  display: flex !important;
  flex-direction: column !important;
}
.pm-modal[data-p2113f-modal-stage="retail-shared-stage-1"] .pm-modal-header,
.pm-modal.p2113f-retail-modal-stage-1 .pm-modal-header {
  flex-shrink: 0 !important;
}
.pm-modal[data-p2113f-modal-stage="retail-shared-stage-1"] .pm-modal-body,
.pm-modal.p2113f-retail-modal-stage-1 .pm-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}
.pm-modal[data-p2113f-modal-stage="retail-shared-stage-1"] .pm-modal-footer,
.pm-modal.p2113f-retail-modal-stage-1 .pm-modal-footer {
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .pm-modal-overlay[data-p2113f-modal-stage="retail-shared-stage-1"],
  .pm-modal-overlay.p2113f-retail-modal-stage-1 {
    align-items: flex-start !important;
  }
  .pm-modal[data-p2113f-modal-stage="retail-shared-stage-1"],
  .pm-modal.p2113f-retail-modal-stage-1 {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* P2.11.3g — Modal Migration Stage 2: Retail action/legacy modal family */
.pm-modal-overlay[data-p2113g-modal-stage="retail-action-stage-2"],
.pm-modal-overlay.p2113g-retail-action-modal-stage-2 {
  z-index: 9120 !important;
}
.pm-modal[data-p2113g-modal-stage="retail-action-stage-2"],
.pm-modal.p2113g-retail-action-modal-stage-2 {
  display: flex !important;
  flex-direction: column !important;
}
.pm-modal[data-p2113g-modal-stage="retail-action-stage-2"] .pm-modal-header,
.pm-modal.p2113g-retail-action-modal-stage-2 .pm-modal-header,
.pm-modal[data-p2113g-modal-stage="retail-action-stage-2"] .pm-modal-footer,
.pm-modal.p2113g-retail-action-modal-stage-2 .pm-modal-footer {
  flex-shrink: 0 !important;
}
.pm-modal[data-p2113g-modal-stage="retail-action-stage-2"] .pm-modal-body,
.pm-modal.p2113g-retail-action-modal-stage-2 .pm-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}
.pm-modal[data-p2113g-modal-stage="retail-action-stage-2"] .pm-form-row,
.pm-modal.p2113g-retail-action-modal-stage-2 .pm-form-row {
  max-width: 100% !important;
}
@media (max-width: 768px) {
  .pm-modal-overlay[data-p2113g-modal-stage="retail-action-stage-2"],
  .pm-modal-overlay.p2113g-retail-action-modal-stage-2 {
    align-items: flex-start !important;
  }
  .pm-modal[data-p2113g-modal-stage="retail-action-stage-2"],
  .pm-modal.p2113g-retail-action-modal-stage-2 {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* CDBT17 2c.7b cleanup: failed 2c.5a universal design guard block removed. */

/* ==========================================
   P2.11.3h.1 — SUBTAB STRIP HORIZONTAL SCROLL (2026-07-06)
   Accounting (Dashboard/Ledger/Payroll/Till/Expenses/Receipts/...) and
   Administration (Dash/Duties/Calendar/Payslips/Maintenance/Training/
   SEPA/Activity) subtab strips render via .seg-control-full > .seg-btn —
   an older pattern, NOT the CLAUDE.md Rule 2 mandated .pm-sub-tab-bar /
   .pm-sub-tab pair. Migrating these two modules to pm-sub-tab-bar is
   deferred to a separate follow-on sprint; this is a scoped mobile fix
   for the existing .seg-* markup only.
   Root cause: the base .seg-control-full rule (LEGACY DESIGN
   COMPATIBILITY RULES, above) already sets overflow-x:auto, but .seg-btn
   uses flex:1 with min-width:0 — flexbox shrinks every tab to fit the
   row width instead of ever truly overflowing, so overflow-x:auto never
   actually triggers. Combined with .seg-btn's own white-space:nowrap and
   no overflow:hidden, shrunk labels spill past their own button box and
   visually collide with the next tab — the reported "overlap". Fix:
   force each tab to keep its natural width (flex:0 0 auto) so the row
   genuinely overflows and scrolls instead of compressing.
   ========================================== */
@media (max-width: 640px) {
  .seg-control-full {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .seg-control-full::-webkit-scrollbar {
    display: none !important;
  }
  .seg-control-full .seg-btn {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
}

/* ==========================================
   P2.11.3b.5 — TASKS CONTROL CENTRE CONTAINER GAP FIX (2026-07-06)
   Tasks Control Centre action buttons (+New Task/+New Form/Task Library/
   Form Library, cdbt25Button() in module-tasks.js) already use fully
   compliant classes (.pm-btn, mobile-icon-only variant, .pm-btn-text) but
   render inside .pm-section-actions — a container not present in the
   P2.11.3b.1 selector list above, so neither the icon-only width collapse
   nor the text-hide rule ever applied to this toolbar on mobile.
   Fix: add .pm-section-actions as an equal container option alongside
   .pm-toolbar/.pm-list-toolbar/.pm-page-toolbar, same :has(.ui-icon)
   pattern, same breakpoint. No change to button/text-span classes —
   they were already correct.
   ========================================== */
@media (max-width: 768px) {
  .pm-section-actions .pm-btn:has(.ui-icon) {
    width:     var(--pm-control-height) !important;
    min-width: var(--pm-control-height) !important;
    padding:   0 !important;
  }
  .pm-section-actions .pm-btn:has(.ui-icon) .pm-btn-text,
  .pm-section-actions .pm-btn:has(.ui-icon) .pm-list-btn-text {
    display: none !important;
  }
}

/* ==========================================
   P2.11.3h.2 — MAIN POS TOPBAR MOBILE WRAP + BREADCRUMB CONTAINMENT (2026-07-06)
   Conservative fix for the checkout screen (highest-traffic in the app).
   Root cause: .main-pos-topbar is display:flex, nowrap, with
   .main-pos-nav-row (Browse burger + breadcrumb trail) and
   .main-pos-action-row (search box fixed to width:min(420px,42vw) + cart
   button) as its two flex children — neither wraps nor shrinks
   predictably on a narrow phone, and .main-pos-breadcrumbs has zero CSS
   of its own (unstyled div), so a multi-level category breadcrumb trail
   has no contained scroll behaviour and crowds/overlaps the rest of the
   row. Scoped to the same <=760px breakpoint the codebase already uses
   for its mobile/desktop workstation switch (P2.10.8.b.9).
   Approach: wrap, don't restructure. .main-pos-topbar is allowed to wrap
   onto two lines if nav-row + action-row don't both fit; breadcrumbs get
   their own horizontal-scroll containment instead of expanding the row;
   the search box's viewport-relative width is relaxed to fill whatever
   space it actually has. No DOM/JS change.
   ========================================== */
@media (max-width: 760px) {
  .main-pos-topbar {
    flex-wrap: wrap !important;
  }

  .main-pos-center-panel .main-pos-nav-row,
  .main-pos-topbar .main-pos-nav-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .main-pos-topbar .main-pos-action-row {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .main-pos-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }
  .main-pos-breadcrumbs::-webkit-scrollbar {
    display: none !important;
  }
  .main-pos-breadcrumbs .main-pos-crumb,
  .main-pos-crumb-sep {
    flex: 0 0 auto !important;
  }

  .main-pos-search-corrected,
  label.pm-search.main-pos-search.main-pos-search-corrected {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* ==========================================
   P2.11.3h.4 — iOS SAFE-AREA HEADER PADDING (2026-07-06)
   App header (.pm-shell-header) and top-of-page content render flush to
   y=0 on an installed iOS PWA because apple-mobile-web-app-status-bar-
   style is "black-translucent" (index.html), which draws web content
   underneath the status bar/notch. Adds env(safe-area-inset-top) as
   extra top padding so the header clears the status bar/notch on
   notched iPhones. min-height is increased by the same amount to
   compensate for the global box-sizing:border-box reset (line 36),
   which would otherwise let the inset eat into the header's content
   height instead of adding to it.
   DEPENDENCY note (2026-07-06, now resolved): this rule needed
   viewport-fit=cover on the viewport meta tag to make env(safe-area-inset-*)
   resolve to anything other than 0. Confirmed present in index.html as of
   2026-08-17 (`viewport-fit=cover` is in the live meta tag) — this rule is
   active, not inert.

   FIX (2026-08-17, Bobin's report — "header is scrolling up with other
   contents", a bug he says has recurred multiple times before): confirmed
   by direct code search that `.pm-shell-header` has NEVER actually had
   `position:sticky`/`fixed` set anywhere in this app's CSS — every prior
   "fix" in project history (P2.11.3h.4, the mobile redesign roadmap) only
   ever added safe-area padding, which silently assumes stickiness already
   exists. It never did. Bobin's "fixed this before" memory traces to a
   genuinely different codebase — shop-01.peppermall.com's header
   (FILE_CHANGE_REGISTRY.md 2026-08-06), a separate Vanilla-JS site, not
   this POS app. Added `position:sticky; top:0; z-index:400` here — sticky
   rather than fixed so no compensating padding-top is needed on `<main>`
   (sticky reserves its own space in normal flow; fixed would have required
   a matching content offset, a second change with more blast radius for
   no benefit). z-index:400 is deliberately far below every real modal in
   the app (lowest in use is 9000) and below the bottom tab bar (`#tabsBar`,
   now 500 — see the z-index fix below) so header and tabsBar never
   conflict with anything that should render above them.

   FIX 2 (2026-08-17, same day, Bobin's follow-up report — "it starts
   somewhere in the page, not from the top, and the header is not visible"
   on app open): `position:sticky` only pins once normal document scroll
   passes the header's natural position -- on this device it was loading
   with a non-zero initial scroll offset and the header wasn't reliably
   showing pinned from the very first frame (a known class of WebView/PWA
   quirk where sticky's stuck-state isn't always recomputed before the
   first paint/scroll event). Switched to `position:fixed`, which is pinned
   to the viewport from frame one regardless of any scroll offset history --
   strictly more robust, at the cost of needing a compensating padding-top
   on the content below (added via JS, see pmSyncMobileHeaderOffset() in
   app-config.js, since the header's real height varies with safe-area-
   inset-top and isn't safe to hardcode). Also trims the header shorter per
   Bobin's same-message padding complaint -- min-height 52px -> 44px,
   vertical padding 8px -> 6px top / 6px bottom, still comfortably tappable.
   ========================================== */
@media (max-width: 768px) {
  .pm-shell-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 400 !important;
    padding-top: calc(6px + env(safe-area-inset-top)) !important;
    padding-bottom: 6px !important;
    min-height: calc(44px + env(safe-area-inset-top)) !important;
  }

  /* Compensates for the header now being taken out of normal flow by
     position:fixed. pmSyncMobileHeaderOffset() (app-config.js) keeps this
     custom property in sync with the header's REAL measured height, so it
     stays correct even if the header's content wraps to an extra line. The
     hardcoded fallback value (before JS runs) matches the CSS above. */
  #mainAppWrapper {
    padding-top: var(--pm-mobile-header-h, calc(56px + env(safe-area-inset-top))) !important;
  }
}

/* ==========================================
   P2.11.3h.5 — CLAIM-APPROVAL BUTTON INTENT MODIFIERS (2026-07-08)
   .pm-btn--positive/--danger/--warning/--task/--edit are used live by the
   entire T8 claim-approval action set in module-portal.js (Approve,
   Reject, Claim task, Complete task, Add evidence, Submit missed reason,
   modal Confirm) but were only ever defined in peppermall-universal.css,
   which is not linked in index.html — so every one of those buttons has
   been rendering with no color treatment at all, just bare .pm-btn.
   Ported verbatim from peppermall-universal.css (not imported — that file
   stays unlinked). All token names (--pm-white/green/red/black/orange/
   yellow) already exist in this file's own :root block or in
   peppermall-design-system.css, both already in the active cascade, so
   no token renaming was needed.
   ========================================== */

/* Positive: OK / go ahead / add / right */
.pm-btn--positive,
.pm-list-btn--positive,
.pm-modal-btn--positive {
  background: var(--pm-white);
  color: var(--pm-green);
  border-color: rgba(21, 128, 61, .22);
}

.pm-btn--positive:hover,
.pm-btn--positive:active,
.pm-list-btn--positive:hover,
.pm-list-btn--positive:active,
.pm-modal-btn--positive:hover,
.pm-modal-btn--positive:active {
  background: var(--pm-green);
  color: var(--pm-white);
  border-color: var(--pm-green);
}

/* Danger: not OK / delete / destructive */
.pm-btn--danger,
.pm-list-btn--danger,
.pm-modal-btn--danger {
  background: var(--pm-white);
  color: var(--pm-red);
  border-color: rgba(185, 28, 28, .22);
}

.pm-btn--danger:hover,
.pm-btn--danger:active,
.pm-list-btn--danger:hover,
.pm-list-btn--danger:active,
.pm-modal-btn--danger:hover,
.pm-modal-btn--danger:active {
  background: var(--pm-red);
  color: var(--pm-white);
  border-color: var(--pm-red);
}

/* Warning: caution / risk / escalation */
.pm-btn--warning,
.pm-list-btn--warning,
.pm-modal-btn--warning {
  background: var(--pm-black);
  color: var(--pm-orange);
  border-color: var(--pm-black);
}

.pm-btn--warning:hover,
.pm-btn--warning:active,
.pm-list-btn--warning:hover,
.pm-list-btn--warning:active,
.pm-modal-btn--warning:hover,
.pm-modal-btn--warning:active {
  background: var(--pm-orange);
  color: var(--pm-black);
  border-color: var(--pm-orange);
}

/* To-do / edit / pending action */
.pm-btn--task,
.pm-btn--edit,
.pm-list-btn--task,
.pm-list-btn--edit,
.pm-modal-btn--task,
.pm-modal-btn--edit {
  background: var(--pm-black);
  color: var(--pm-yellow);
  border-color: var(--pm-black);
}

.pm-btn--task:hover,
.pm-btn--task:active,
.pm-btn--edit:hover,
.pm-btn--edit:active,
.pm-list-btn--task:hover,
.pm-list-btn--task:active,
.pm-list-btn--edit:hover,
.pm-list-btn--edit:active,
.pm-modal-btn--task:hover,
.pm-modal-btn--task:active,
.pm-modal-btn--edit:hover,
.pm-modal-btn--edit:active {
  background: var(--pm-yellow);
  color: var(--pm-black);
  border-color: var(--pm-yellow);
}

/* ==========================================
   P2.11.3h.6 — MAIN POS: BROWSE BUTTON / BREADCRUMB "ALL" CRUMB OVERLAP FIX (2026-07-09)
   Checkout screen residue from P2.11.3h.2 (2026-07-06), reported on-device
   2026-07-08: the docked "All" pill overlapping the "Browse" header label.
   Correction: source read confirms the colliding node is NOT
   .main-pos-filter-root (that class only renders in the desktop left-rail
   #mainCategoryMenu, which is display:none on mobile per the true-mobile-
   mode rule above and cannot be the on-device overlap). The live mobile
   "All" pill is .main-pos-crumb, the first child rendered into
   #posBreadcrumbs by renderMainBreadcrumbs() (module-main.js), sitting in
   .main-pos-nav-row next to the Browse <details>/<summary>.
   Root cause: P2.11.3h.2 gave .main-pos-breadcrumbs (flex:1 1 auto;
   min-width:0; overflow-x:auto) its own contained scroll, but never gave
   the Browse <details> sibling an explicit flex-basis/shrink override —
   it falls back to the flexbox default (flex:0 1 auto), so under
   flex-wrap:nowrap it can still be compressed by the browser's
   flex-shrink algorithm on narrow phones, and its "Browse" label can
   render past its shrunk box, overlapping the neighbouring crumb.
   Fix: pin the Browse control to a fixed, non-shrinking box so it always
   reserves its own space; the breadcrumbs sibling (already flexible +
   scrollable from h.2) absorbs 100% of any remaining compression instead.
   ========================================== */
@media (max-width: 760px) {
  details#mainCategoryBurger.main-pos-burger,
  .main-pos-nav-row .main-pos-burger {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .main-pos-burger-summary {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ==========================================
   P2.11.3i.1 — SHARED TWO-COLUMN FORM GRID (2026-07-09)
   Register Customer, Add/Edit Staff, and part of Add Product each built
   their own two-column field grid as a raw inline style
   (display:grid;grid-template-columns:1fr 1fr;...) with no shared class,
   so none of them ever collapsed on mobile — labels/fields ran off-screen
   or collided (Register Customer confirmed on-device 2026-07-08).
   One shared class replaces the display/grid-template-columns portion of
   each inline style; gap/margin/etc values are left inline per call site
   since they vary and aren't part of the bug. Desktop unchanged (2
   columns); collapses to 1 column at <=640px to match the rest of this
   sprint's mobile-form breakpoint.
   Deliberately NOT applied to module-marketing.js's promo-code row
   (grid-template-columns:1fr 1fr auto) — that's a 3-column single-row
   layout (code input + campaign select + generate button), not a
   two-field-pair form; forcing it into a 2-column grid would push the
   button onto its own row. Also NOT applied to Add Product's
   repeat(auto-fit,minmax(Npx,1fr)) blocks — those already collapse
   responsively on their own.
   ========================================== */
.pm-form-grid-2col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

@media (max-width: 640px) {
  .pm-form-grid-2col {
    grid-template-columns: 1fr !important;
  }
  /* P2.11.3i.2 (2026-07-09): grid-column:span 2 children (Address, Save
     row) force an implicit 2nd column once the explicit grid collapses
     to 1 column, and auto-placement then slots other fields into it too
     — reproducing a 2-up layout even after "collapse". Force every
     direct child to span the single available column, and stop any
     child (mainly bare <input>s with no width:100% of their own) from
     resisting the shrink via intrinsic min-content width. */
  .pm-form-grid-2col > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
}

/* ==========================================
   P2.11.3i.2 — POLICY PREVIEW STAT-CARD OVERFLOW (2026-07-09)
   .grid-auto-4 (used only by js/policy/policy-engine-readonly.js's
   Policy approval preview / Profile policy preview cards) hits the same
   1fr-1fr intrinsic-min-content gotcha at <=768px, compounded by long
   unbroken snake_case values (activation_state, approval_route) that
   can't wrap at all without word-break help, forcing their track wider
   than its 1fr share.
   ========================================== */
@media (max-width: 768px) {
  .grid-auto-2, .grid-auto-3, .grid-auto-4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}
.stat-card .stat-value {
  overflow-wrap: anywhere !important;
}