/* =========================
   DESIGN TOKENS
========================= */
:root {
  --primary:#d97706;
  --primary-hover:#b45309;
  --success:#16a34a;
  --danger:#dc2626;
  --bg:#f8fafc;
  --surface:#fff;
  --border:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;
  --radius:14px;
  --shadow:0 6px 20px rgba(15,23,42,.08);
  --nav-h:76px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px)
}

button,input,select {
  font:inherit
}

button {
  cursor:pointer
}

.hidden {
  display:none!important
}

.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important
}

/* =========================
   HEADER
========================= */
.app-header {
  text-align:center;
  padding:22px 16px;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  border-bottom:1px solid #fed7aa
}

.app-header h1 {
  margin:0;
  font-size:clamp(1.45rem,4vw,2rem)
}

.app-header p {
  margin:4px 0 0;
  color:#9a3412;
  font-weight:650
}

/* =========================
   APP LAYOUT
========================= */
.app-shell {
  width:min(1240px,calc(100% - 28px));
  margin:22px auto
}

.view {
  display:none
}

.view.active-view {
  display:block
}

.section-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}

.section-header h2 {
  margin:0;
  font-size:1.35rem
}

.sync-message {
  margin:5px 0 0;
  color:var(--muted);
  font-size:.88rem
}

.count-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffedd5;
  color:#9a3412;
  border:1px solid #fed7aa;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap
}

/* =========================
   BUTTONS
========================= */
.btn {
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:750;
  transition:.15s ease
}

.btn:hover {
  transform:translateY(-1px)
}

.btn-primary {
  background:var(--primary);
  color:#fff
}

.btn-primary:hover {
  background:var(--primary-hover)
}

.btn-secondary {
  background:#e2e8f0;
  color:#334155
}

.btn-success {
  background:var(--success);
  color:#fff
}

.btn-danger-soft {
  background:#fee2e2;
  color:#991b1b
}

.btn-block {
  width:100%
}

.btn-sm {
  padding:8px 11px;
  font-size:.86rem
}

/* =========================
   MASTERLIST + CATEGORIES
========================= */
.masterlist-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:20px;
  align-items:start
}

.category-sidebar {
  position:sticky;
  top:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
  max-height:calc(100vh - 120px);
  overflow:auto
}

.sidebar-title {
  font-weight:900;
  font-size:.9rem;
  padding:4px 7px 10px;
  color:#334155
}

.category-list {
  display:grid;
  gap:5px
}

.sidebar-category {
  width:100%;
  border:0;
  background:transparent;
  color:#475569;
  text-align:left;
  border-radius:9px;
  padding:9px 10px;
  font-weight:700;
  font-size:.86rem;
  display:flex;
  justify-content:space-between;
  gap:8px
}

.sidebar-category:hover {
  background:#fff7ed
}

.sidebar-category.active {
  background:var(--primary);
  color:#fff
}

.sidebar-count {
  opacity:.78;
  font-size:.75rem
}

.masterlist-tools {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:stretch;
  margin-bottom:12px
}

.search-wrap {
  position:relative
}

.search-wrap input {
  width:100%;
  height:46px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:11px 44px 11px 42px;
  outline:none
}

.search-wrap input:focus {
  border-color:#fb923c;
  box-shadow:0 0 0 3px rgba(251,146,60,.15)
}

.search-icon {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%)
}

.clear-search {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:#f1f5f9;
  color:#475569;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:1.2rem
}

.add-product-top {
  white-space:nowrap
}

.mobile-category-row {
  display:none
}

.result-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin:0 2px 14px;
  color:var(--muted);
  font-size:.86rem
}

.result-meta strong {
  color:#334155
}

/* =========================
   PRODUCT CARDS
========================= */
.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:13px
}

.product-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  min-height:180px
}

.product-card h3 {
  margin:0 0 8px;
  font-size:1rem;
  line-height:1.35
}

.category-pill {
  display:inline-flex;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-size:.72rem;
  font-weight:800;
  margin-bottom:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.product-unit {
  font-size:.84rem;
  color:var(--muted);
  margin-bottom:4px
}

.product-price {
  font-size:1.1rem;
  font-weight:850;
  color:#166534
}

.card-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.add-cart-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px
}

.add-cart-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#fff;
  color:var(--primary);
  font-size:.72rem;
  font-weight:900
}

.empty-state {
  grid-column:1/-1;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:var(--radius);
  padding:32px 16px;
  text-align:center;
  color:var(--muted)
}

/* =========================
   SHOPPING CART
========================= */
.cart-items {
  display:grid;
  gap:10px
}

.cart-item {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 2px 10px rgba(15,23,42,.04)
}

.cart-item-top,.cart-item-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.cart-item-top h3 {
  margin:0;
  font-size:.98rem
}

.cart-line-total {
  font-weight:850;
  color:#166534;
  white-space:nowrap
}

.cart-item-meta {
  color:var(--muted);
  font-size:.82rem;
  margin:5px 0 12px
}

.quantity-controls {
  display:flex;
  align-items:center;
  gap:8px
}

.qty-btn {
  border:1px solid var(--border);
  background:#f8fafc;
  width:34px;
  height:34px;
  border-radius:9px;
  font-weight:900
}

.qty-value {
  min-width:54px;
  text-align:center;
  font-weight:800
}

.remove-btn {
  border:0;
  background:#fee2e2;
  color:#991b1b;
  border-radius:9px;
  padding:8px 10px;
  font-weight:750
}

.cart-summary-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-top:16px;
  box-shadow:var(--shadow)
}

.cart-total-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.05rem;
  margin-bottom:12px
}

.cart-total-row strong {
  font-size:1.35rem
}

.cart-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

.cart-actions .btn {
  min-height:44px
}

.cart-clear-action {
  grid-column:1 / -1;
  border:1px solid #fecaca
}

.cart-clear-action:hover {
  background:#fecaca
}

.cart-archive-note {
  margin:12px 0 0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.45
}

/* =========================
   LOCAL SHEETS
========================= */
.local-status-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}

.status-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 2px 10px rgba(15,23,42,.04)
}

.status-card span {
  display:block;
  color:var(--muted);
  font-size:.8rem
}

.status-card strong {
  display:block;
  margin-top:6px;
  font-size:1.1rem;
  overflow-wrap:anywhere
}

.status-card small {
  display:block;
  color:var(--muted);
  margin-top:4px
}

.local-sheet-panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow)
}

.local-sheet-panel h3 {
  margin-top:0
}

.local-sheet-panel p {
  color:var(--muted);
  line-height:1.55
}

.local-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.local-note {
  margin-top:18px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:10px;
  padding:12px;
  color:#7c2d12;
  line-height:1.5;
  font-size:.88rem
}

/* =========================
   BOTTOM NAVIGATION
========================= */
.bottom-nav {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  z-index:50;
  backdrop-filter:blur(10px)
}

.nav-item {
  position:relative;
  border:0;
  background:transparent;
  color:#64748b;
  font-weight:800;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  padding:6px 4px;
  text-align:center;
  line-height:1.08;
  overflow:hidden
}

.nav-item > span:not(.nav-badge) {
  max-width:100%
}

.nav-item.active {
  color:var(--primary)
}

.nav-icon {
  font-size:1.2rem
}

.nav-badge {
  position:absolute;
  top:7px;
  left:calc(50% + 22px);
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  min-width:21px;
  height:21px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:900
}

/* =========================
   MODALS + DRAWER
========================= */
.modal,.drawer-backdrop {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.52);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:100
}

.modal.active,.drawer-backdrop.active {
  display:flex
}

.modal-card {
  width:min(560px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.28);
  position:relative
}

.preview-card {
  width:min(960px,100%)
}

.modal-card h2 {
  margin:0 36px 16px 0
}

.modal-close {
  border:0;
  background:#f1f5f9;
  color:#334155;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:1.35rem;
  line-height:1
}

.modal-card>.modal-close {
  position:absolute;
  right:14px;
  top:13px
}

.modal-description,.tiny-note {
  color:var(--muted);
  line-height:1.5
}

.tiny-note {
  font-size:.8rem
}

.modal-form,.form-group {
  display:grid;
  gap:7px
}

.modal-form {
  gap:13px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px
}

.form-group label,.import-options legend {
  font-weight:750;
  font-size:.88rem
}

.form-group input,.form-group select {
  width:100%;
  min-height:46px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px;
  background:#fff
}

.import-options {
  display:grid;
  gap:8px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  margin:13px 0
}

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
  flex-wrap:wrap
}

.delete-product-btn {
  margin-right:auto
}

.table-wrap {
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:10px
}

.preview-table {
  width:100%;
  border-collapse:collapse;
  min-width:740px
}

.preview-table th,.preview-table td {
  padding:10px 11px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:.84rem
}

.preview-table th {
  background:#f8fafc
}

.preview-table td:first-child,.preview-table th:first-child {
  text-align:center;
  width:58px
}

.preview-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:13px
}

.preview-summary>div {
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px
}

.preview-summary span {
  display:block;
  color:var(--muted);
  font-size:.78rem
}

.preview-summary strong {
  display:block;
  margin-top:3px
}

.category-drawer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  border-radius:20px 20px 0 0;
  padding:16px max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  max-height:78vh;
  overflow:auto
}

.drawer-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}

.drawer-header h2 {
  margin:0
}

.drawer-category-list {
  display:grid;
  gap:6px
}

.drawer-category-btn {
  border:1px solid var(--border);
  background:#fff;
  color:#334155;
  border-radius:10px;
  padding:12px;
  text-align:left;
  font-weight:750;
  display:flex;
  justify-content:space-between
}

.drawer-category-btn.active {
  background:#fff7ed;
  color:#9a3412;
  border-color:#fdba74
}

/* =========================
   TABLET / MOBILE
========================= */
@media(max-width:820px) {
  .app-shell {
    width:min(100% - 16px,1240px);
    margin-top:14px
  }

  .masterlist-layout {
    display:block
  }

  .category-sidebar {
    display:none
  }

  .masterlist-tools {
    grid-template-columns:1fr auto
  }

  .mobile-category-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    overflow:hidden
  }

  .category-menu-btn {
    flex:0 0 auto
  }

  .category-chips {
    display:flex;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
    min-width:0;
    padding:2px 1px
  }

  .category-chips::-webkit-scrollbar {
    display:none
  }

  .category-chip {
    flex:0 0 auto;
    border:1px solid var(--border);
    background:#fff;
    color:#475569;
    border-radius:999px;
    padding:8px 11px;
    font-size:.82rem;
    font-weight:750;
    white-space:nowrap
  }

  .category-chip.active {
    background:var(--primary);
    color:#fff;
    border-color:var(--primary)
  }

  .product-grid {
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr))
  }

  .local-status-grid {
    grid-template-columns:1fr
  }

  .nav-item {
    font-size:.75rem
  }

}

/* =========================
   SMALL PHONES
========================= */
@media(max-width:560px) {
  .masterlist-tools {
    grid-template-columns:1fr
  }

  .add-product-top {
    width:100%
  }

  .product-grid {
    grid-template-columns:1fr
  }

  .product-card {
    min-height:auto
  }

  .cart-actions,.form-row,.preview-summary {
    grid-template-columns:1fr
  }

  .cart-item-bottom {
    align-items:flex-end
  }

  .modal-card {
    padding:18px
  }

  .form-actions .btn {
    flex:1
  }

  .section-header {
    align-items:flex-start
  }

  .local-actions {
    display:grid
  }

  .local-actions .btn {
    width:100%
  }

  .bottom-nav .nav-item {
    font-size:.68rem;
    padding:5px 2px
  }

  .bottom-nav .nav-item > span:not(.nav-icon):not(.nav-badge) {
    font-size:.68rem;
    line-height:1.05;
    overflow-wrap:anywhere
  }

  .nav-icon {
    font-size:1.05rem
  }

  .nav-badge {
    left:calc(50% + 17px);
    top:5px
  }

}

/* =========================================================
   SHOPPING CART - PDF GROCERY PREVIEW
========================================================= */

.pdf-preview-header {
  margin-bottom: 20px;
}

.pdf-preview-header h2 {
  margin: 0 0 20px;
  text-align: center;
  color: #1e3a8a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.pdf-preview-info {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.pdf-preview-info p {
  margin: 0;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.45;
}

.pdf-preview-info strong {
  color: #0f172a;
}

.grocery-preview-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:-4px 0 14px;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#f8fafc;
  color:#334155;
  font-size:.9rem;
  font-weight:700
}

.grocery-preview-total strong {
  color:#1e3a8a;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.1rem
}

#previewModal .preview-card {
  overscroll-behavior:contain;
  scroll-behavior:auto
}

/* =========================================================
   GROCERY PREVIEW TABLE - V6.3.1 RESPONSIVE / PDF PARITY
========================================================= */

.pdf-preview-table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.grocery-preview-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-family: Georgia, "Times New Roman", serif;
}

.grocery-preview-table thead th {
  background: #1e3a8a;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  border: 1px solid #1e3a8a;
  white-space: normal;
}

.grocery-preview-table th,
.grocery-preview-table td {
  padding: 8px 10px;
  border: 1px solid #dbe1ea;
  font-size: 0.86rem;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.grocery-preview-table tbody td {
  background: #ffffff;
  color: #1e293b;
}

.grocery-preview-table [data-col="check"] {
  width: 76px;
  min-width: 66px;
  text-align: center;
}

.grocery-preview-table [data-col="qty"] {
  width: 58px;
  min-width: 50px;
  text-align: center;
}

.grocery-preview-table [data-col="unit"] {
  width: 96px;
  min-width: 74px;
  text-align: center;
}

.grocery-preview-table [data-col="name"] {
  min-width: 170px;
  text-align: left;
}

.grocery-preview-table thead [data-col="name"] {
  text-align: center;
}

.grocery-preview-table [data-col="srp"],
.grocery-preview-table [data-col="storePrice"],
.grocery-preview-table [data-col="lineValue"] {
  width: 92px;
  min-width: 82px;
  text-align: right;
  white-space: nowrap;
}

.grocery-preview-table thead [data-col="srp"],
.grocery-preview-table thead [data-col="storePrice"],
.grocery-preview-table thead [data-col="lineValue"] {
  text-align: center;
}

.preview-checkbox {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid #334155;
  border-radius: 2px;
  vertical-align: middle;
  box-sizing: border-box;
}

.grocery-preview-value-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 14px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: .86rem;
  font-weight: 700;
}

.grocery-preview-value-summary strong {
  color: #1e3a8a;
  white-space: nowrap;
}

.pdf-preview-scroll-hint {
  margin: 8px 0 0;
  color: #64748b;
  font-size: .75rem;
  text-align: center;
}

@media (max-width: 820px) {
  .pdf-preview-header h2 {
    font-size: 1.15rem;
  }

  .pdf-preview-info p {
    font-size: 0.84rem;
  }
}

@media (max-width: 560px) {
  .preview-card {
    padding: 14px;
  }

  .pdf-preview-header {
    margin-bottom: 12px;
  }

  .pdf-preview-header h2 {
    margin-bottom: 14px;
    font-size: 1.05rem;
  }

  .pdf-preview-info {
    gap: 5px;
  }

  .pdf-preview-info p {
    font-size: 0.8rem;
  }

  .grocery-preview-table:not(.has-price-columns) {
    table-layout: fixed;
    min-width: 100%;
  }

  .grocery-preview-table:not(.has-price-columns) [data-col="check"] {
    width: 54px;
    min-width: 54px;
  }

  .grocery-preview-table:not(.has-price-columns) [data-col="qty"] {
    width: 44px;
    min-width: 44px;
  }

  .grocery-preview-table:not(.has-price-columns) [data-col="unit"] {
    width: 72px;
    min-width: 72px;
  }

  .grocery-preview-table:not(.has-price-columns) [data-col="name"] {
    min-width: 0;
  }

  .grocery-preview-table.has-price-columns {
    width: max-content;
    min-width: 100%;
  }

  .grocery-preview-table th,
  .grocery-preview-table td {
    padding: 7px 6px;
    font-size: .76rem;
  }

  .grocery-preview-table [data-col="name"] {
    min-width: 150px;
  }

  .grocery-preview-total,
  .grocery-preview-value-summary {
    font-size: .82rem;
    padding: 9px 10px;
  }
}

/* =========================
   SHOPPING / CHECKLIST HISTORY
========================= */
.history-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px
}

.history-actions select {
  min-height:42px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff
}

@media(max-width:600px) {
  .history-actions select,
  .history-actions .btn {
    width:100%
  }
}

/* =========================
   SELF-SHOPPING CHECKLIST
========================= */
.checklist-info-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:grid;
  gap:6px;
  margin-bottom:14px;
  color:#475569;
  font-size:.9rem
}

.checklist-info-card strong {
  color:var(--text)
}

.checklist-summary-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:center;
  margin-bottom:14px
}

.checklist-summary-card>div:not(.checklist-summary-actions) {
  display:flex;
  flex-direction:column;
  gap:2px
}

.checklist-summary-actions {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}

.checklist-summary-card .emmarie-filter {
  grid-column:1 / -1;
  width:100%
}

.checklist-summary-card span {
  color:var(--muted);
  font-size:.78rem;
  font-weight:700
}

.checklist-summary-card strong {
  font-size:1.25rem
}

.checklist-items {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-width:0
}

.checklist-table-header,
.checklist-item {
  display:grid;
  grid-template-columns:72px 70px 130px minmax(0,1fr);
  align-items:stretch;
  min-width:0
}

.checklist-table-header {
  background:#1e3a8a;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.82rem;
  font-weight:800;
  text-align:center
}

.checklist-table-header span {
  display:grid;
  place-items:center;
  padding:10px 8px;
  border-right:1px solid rgba(255,255,255,.2);
  min-width:0
}

.checklist-table-header span:last-child {
  border-right:0
}

.checklist-group-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:#fff7ed;
  color:#9a3412;
  border-top:1px solid #fed7aa;
  border-bottom:1px solid #fed7aa
}

.checklist-group-heading:first-of-type {
  border-top:0
}

.checklist-group-heading span {
  font-size:.78rem;
  font-weight:800
}

.purchased-heading {
  background:#f0fdf4;
  color:#166534;
  border-color:#bbf7d0
}

.checklist-item {
  min-height:56px;
  border-bottom:1px solid var(--border);
  background:#fff;
  font-family:Georgia,"Times New Roman",serif;
  transition:background .15s ease, opacity .15s ease
}

.checklist-item:last-child {
  border-bottom:0
}

.checklist-item>div {
  min-width:0;
  padding:10px 8px;
  display:flex;
  align-items:center
}

.checklist-check-cell,
.checklist-qty,
.checklist-unit {
  justify-content:center;
  text-align:center
}

.checklist-check-cell {
  min-height:52px;
  touch-action:manipulation
}

.checklist-check-label {
  display:grid;
  place-items:center;
  width:100%;
  min-height:44px;
  cursor:pointer;
  touch-action:manipulation
}

.shopping-check {
  appearance:auto;
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  margin:0;
  accent-color:var(--success);
  cursor:pointer;
  touch-action:manipulation
}

.checklist-name {
  display:block !important;
  font-weight:700;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto
}

.checklist-supplier {
  margin-top:3px;
  color:#64748b;
  font-size:.72rem;
  font-weight:600;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal
}

.checklist-item.purchased {
  background:#f8fafc;
  opacity:.72
}

.checklist-item.purchased .checklist-qty,
.checklist-item.purchased .checklist-unit,
.checklist-item.purchased .checklist-name {
  text-decoration:line-through;
  color:#64748b
}

.checklist-all-done {
  padding:18px;
  text-align:center;
  color:#166534;
  background:#f0fdf4;
  font-weight:800;
  border-bottom:1px solid #bbf7d0
}

@media(max-width:700px) {
  .checklist-summary-card {
    grid-template-columns:1fr 1fr
  }

  .checklist-summary-actions {
    grid-template-columns:1fr
  }

  .checklist-summary-card .btn {
    width:100%
  }

  .checklist-table-header,
  .checklist-item {
    grid-template-columns:50px 46px minmax(72px,86px) minmax(0,1fr)
  }

  .checklist-table-header {
    font-size:.72rem
  }

  .checklist-table-header span,
  .checklist-item>div {
    padding:9px 5px
  }

  .checklist-item {
    font-size:.84rem
  }
}

@media(max-width:430px) {
  .bottom-nav .nav-item {
    font-size:.68rem
  }

  .bottom-nav .nav-item span:last-child {
    font-size:.64rem
  }

  .nav-badge {
    left:calc(50% + 17px)
  }

  .checklist-table-header,
  .checklist-item {
    grid-template-columns:44px 42px minmax(62px,72px) minmax(0,1fr)
  }

  .checklist-table-header span,
  .checklist-item>div {
    padding-left:4px;
    padding-right:4px
  }

  .shopping-check {
    width:24px;
    height:24px;
    min-width:24px;
    min-height:24px
  }

  .checklist-item {
    font-size:.8rem
  }

  .checklist-name {
    font-size:.82rem
  }
}

/* =========================
   MASTERLIST CART QUANTITY
========================= */
.masterlist-cart-section {
  border-top:1px solid var(--border);
  padding-top:11px;
}

.masterlist-cart-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  color:var(--text);
  font-size:.78rem;
  font-weight:800;
}

.masterlist-cart-hint {
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
}

.masterlist-cart-control {
  display:grid;
  grid-template-columns:38px minmax(52px,1fr) 38px auto;
  gap:6px;
  align-items:stretch;
}

.masterlist-qty-btn {
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font-size:1.05rem;
  font-weight:900;
  cursor:pointer;
  min-height:38px;
}

.masterlist-qty-btn:active {
  transform:translateY(1px);
}

.masterlist-qty-input {
  width:100%;
  min-width:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  text-align:center;
  font-size:.95rem;
  font-weight:850;
  padding:7px 4px;
  outline:none;
}

.masterlist-qty-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(234,88,12,.12);
}

.masterlist-cart-control .add-cart-btn {
  white-space:nowrap;
  min-width:70px;
}

.masterlist-edit-btn {
  width:100%;
}

@media(max-width:420px) {
  .masterlist-cart-control {
    grid-template-columns:38px minmax(48px,1fr) 38px 64px;
  }

  .masterlist-cart-control .add-cart-btn {
    min-width:0;
    padding-left:7px;
    padding-right:7px;
  }
}


/* =========================
   INDEPENDENT CHECKLIST + CHECKLIST HISTORY
========================= */
.checklist-supplier {
  margin-top:4px;
  color:var(--muted);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.72rem;
  font-weight:600;
}

.history-target-note {
  margin:10px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.4;
}

.checklist-status-badge {
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.03em;
  vertical-align:middle;
}

.checklist-status-badge.completed {
  background:#dcfce7;
  color:#166534;
}

.checklist-status-badge.partial {
  background:#ffedd5;
  color:#9a3412;
}

.checklist-history-card summary {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

#finishChecklistBtn {
  font-weight:900;
}

#clearChecklistBtn {
  border:1px solid #fecaca;
}

@media(max-width:700px) {
  .checklist-summary-card {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:480px) {
  .checklist-summary-card {
    grid-template-columns:1fr 1fr 1fr;
  }

  .checklist-summary-card strong {
    font-size:1.05rem;
  }
}


/* =========================================================
   PDF -> CHECKLIST IMPORT
========================================================= */
.pdf-import-card{
  width:min(980px,calc(100vw - 28px));
  max-width:980px;
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.pdf-import-file-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
  margin:14px 0 10px;
}
.pdf-file-field{margin:0}
.pdf-file-field span{display:block;font-weight:800;margin-bottom:6px}
.pdf-import-status{
  margin:10px 0 14px;
  padding:11px 12px;
  border:1px solid #fed7aa;
  border-radius:10px;
  background:#fff7ed;
  color:#7c2d12;
  line-height:1.45;
}
.pdf-import-preview{display:block}
.pdf-import-preview.hidden{display:none}
.pdf-import-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.pdf-import-meta>div{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:#f8fafc;
  overflow-wrap:anywhere;
}
.pdf-import-mode{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding:10px 0;
  font-weight:750;
}
.pdf-import-mode label{display:flex;align-items:center;gap:7px}
.pdf-import-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:8px 0;
  color:var(--muted);
  font-size:.9rem;
}
.pdf-import-table-wrap{max-height:390px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.pdf-import-table{min-width:680px;margin:0}
.pdf-import-table th:nth-child(1){width:82px}
.pdf-import-table th:nth-child(2){width:120px}
.pdf-import-table th:last-child{width:52px}
.pdf-import-input{
  width:100%;
  min-width:0;
  height:38px;
  box-sizing:border-box;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:6px 8px;
  font:inherit;
  background:#fff;
}
.pdf-import-qty{text-align:center}
.pdf-import-note{margin:10px 0 0;color:var(--muted);font-size:.86rem;line-height:1.45}

@media (max-width:700px){
  .pdf-import-file-row{grid-template-columns:1fr}
  .pdf-import-file-row .btn{width:100%}
  .pdf-import-meta{grid-template-columns:1fr 1fr}
  .pdf-import-toolbar{align-items:stretch;flex-direction:column}
}

/* PDF checklist import reliability / feedback */
.btn:disabled,
button:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.15);
}

.pdf-import-status[data-status="working"] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.pdf-import-status[data-status="success"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.pdf-import-status[data-status="warning"] {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.pdf-import-status[data-status="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}


/* =========================================================
   PWA + PHONE-SAFE MOBILE EXPERIENCE
   ========================================================= */
html,
body {
  min-height:100%;
  -webkit-text-size-adjust:100%;
}

body {
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

.app-header {
  padding-top:calc(18px + env(safe-area-inset-top));
}






@media (display-mode: standalone) {
  .app-header { padding-top:calc(14px + env(safe-area-inset-top)); }
}

@media(max-width:600px) {
  :root { --nav-h:68px; }

  body {
    padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  }

  .app-header {
    text-align:left;
    padding-left:14px;
    padding-right:14px;
    padding-bottom:14px;
  }

  .app-header h1 {
    font-size:1.26rem;
    line-height:1.2;
  }

  .app-header p {
    font-size:.76rem;
    line-height:1.35;
  }


  .app-shell {
    width:calc(100% - 16px);
    margin:12px auto;
  }

  .section-header {
    gap:8px;
    margin-bottom:12px;
  }

  .section-header h2 {
    font-size:1.16rem;
  }

  .count-badge {
    padding:5px 8px;
    font-size:.75rem;
  }

  .masterlist-tools {
    gap:8px;
  }

  .search-wrap,
  .search-wrap input {
    width:100%;
    min-width:0;
  }

  .add-product-top,
  .category-menu-btn {
    min-height:44px;
  }

  .mobile-category-row {
    align-items:stretch;
  }

  .category-chips {
    padding-bottom:4px;
  }

  .product-grid {
    gap:10px;
  }

  .product-card,
  .cart-item,
  .cart-summary-card,
  .checklist-info-card,
  .checklist-summary-card,
  .local-sheet-panel,
  .status-card {
    border-radius:12px;
  }

  .product-card {
    padding:14px;
  }

  .product-card h3 {
    font-size:1rem;
    line-height:1.35;
  }

  .product-card .emmarie-qty-row {
    grid-template-columns:38px 56px 38px minmax(64px,72px)!important;
    gap:5px!important;
    justify-content:center!important;
  }

  .product-card .emmarie-qty-row input {
    text-align:center!important;
    text-align-last:center!important;
  }

  .cart-item-top,
  .cart-item-bottom {
    gap:8px;
  }

  .cart-actions {
    gap:8px;
  }

  .cart-actions .btn,
  .checklist-summary-actions .btn,
  .local-actions .btn {
    min-height:44px;
  }

  .checklist-info-card {
    font-size:.82rem;
    overflow-wrap:anywhere;
  }

  .checklist-summary-card {
    padding:12px;
    gap:8px;
  }

  .checklist-summary-actions {
    grid-template-columns:1fr!important;
  }

  .checklist-table-header,
  .checklist-item {
    grid-template-columns:44px 42px 72px minmax(0,1fr)!important;
  }

  .checklist-table-header {
    font-size:.66rem!important;
  }

  .checklist-item {
    font-size:.78rem!important;
  }

  .modal,
  .drawer-backdrop {
    padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    align-items:flex-end;
  }

  .modal-card {
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 12px)!important;
    border-radius:18px 18px 8px 8px;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .pdf-import-card,
  .preview-card {
    width:100%!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 12px)!important;
  }

  .pdf-import-meta {
    grid-template-columns:1fr 1fr;
  }

  .pdf-import-table-wrap,
  .table-wrap {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .history-card {
    padding:.7rem;
  }

  .history-card summary {
    font-size:.9rem;
    overflow-wrap:anywhere;
  }

  .history-items {
    min-width:560px;
  }

  .history-card {
    overflow-x:auto;
  }

  .bottom-nav {
    min-height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  }

  .nav-item {
    min-height:56px;
    touch-action:manipulation;
  }

  .nav-icon {
    font-size:1.08rem;
  }
}

@media(max-width:380px) {
  .app-header h1 { font-size:1.12rem; }
  .app-header p { font-size:.69rem; }
  .product-card .emmarie-qty-row {
    grid-template-columns:36px 52px 36px 62px!important;
  }
  .product-card .emmarie-qty-row [data-action="cart-plus-one"] {
    width:62px!important;
    min-width:62px!important;
    font-size:12px!important;
  }
  .bottom-nav .nav-item > span:not(.nav-icon):not(.nav-badge) {
    font-size:.61rem!important;
  }
}

/* =========================================================
   FOUNDATION V2 — STORE PRICES / SAFETY / SETTINGS
========================================================= */
.bottom-nav {
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.optional-label {
  font-weight:500;
  color:var(--muted);
  font-size:.78rem;
}

.form-group textarea,
.settings-grid input {
  width:100%;
  min-height:46px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px;
  background:#fff;
  font:inherit;
  resize:vertical;
}

.product-price-block {
  display:grid;
  gap:5px;
  margin-top:3px;
}

.product-price {
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
}

.price-label {
  font-size:.72rem;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.product-store-price-inline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px dashed var(--border);
  padding-top:5px;
  font-size:.84rem;
  color:#475569;
}

.product-store-price-inline strong {
  color:#0f766e;
}

.price-kpi-grid,
.more-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.more-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.price-toolbar {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(170px,220px) minmax(170px,220px);
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.store-price-help {
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #bae6fd;
  background:#f0f9ff;
  border-radius:10px;
  color:#075985;
  font-size:.86rem;
}

.store-price-list {
  display:grid;
  gap:9px;
}

.store-price-row {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(100px,.55fr) minmax(180px,.8fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
}

.store-price-product,
.store-price-reference,
.store-price-input-wrap {
  min-width:0;
  display:grid;
  gap:3px;
}

.store-price-product strong {
  overflow-wrap:anywhere;
}

.store-price-product span,
.store-price-reference span,
.store-price-input-wrap>span {
  color:var(--muted);
  font-size:.78rem;
}

.store-price-reference strong {
  color:#475569;
}

.store-price-input-wrap>div {
  display:flex;
  align-items:center;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.peso-prefix {
  padding:0 0 0 10px;
  font-weight:800;
  color:#0f766e;
}

.store-price-input-wrap input {
  width:100%;
  min-width:0;
  min-height:42px;
  border:0;
  padding:8px 10px 8px 5px;
  font:inherit;
  font-weight:800;
  color:#0f766e;
  outline:none;
}

.more-card,
.safety-section {
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.more-card h3,
.safety-section h3,
.section-subheading h3 {
  margin:0 0 6px;
}

.more-card p,
.safety-heading p {
  margin:0;
  color:var(--muted);
  line-height:1.45;
  font-size:.86rem;
}

.more-actions,
.duplicate-actions,
.duplicate-record-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.settings-grid label {
  display:grid;
  gap:6px;
  font-size:.82rem;
  font-weight:750;
}

.settings-checks {
  display:grid;
  gap:8px;
  margin:12px 0;
  font-size:.84rem;
}

.settings-checks label {
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.settings-checks input {
  margin-top:2px;
}

.safety-section {
  margin:14px 0;
}

.safety-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.safety-list,
.audit-list {
  display:grid;
  gap:8px;
}

.duplicate-group-card {
  border:1px solid #fed7aa;
  background:#fffbeb;
  border-radius:12px;
  padding:10px;
}

.duplicate-group-head,
.duplicate-group-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.duplicate-group-head span {
  color:#9a3412;
  font-size:.8rem;
  font-weight:800;
}

.duplicate-record,
.recycle-row,
.audit-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(148,163,184,.28);
}

.duplicate-record>div:first-child,
.recycle-row>div,
.audit-row {
  min-width:0;
}

.duplicate-record span,
.duplicate-record small,
.recycle-row span,
.recycle-row small,
.audit-row span,
.audit-row small {
  display:block;
  color:var(--muted);
  font-size:.78rem;
  overflow-wrap:anywhere;
}

.audit-row {
  display:grid;
  justify-content:stretch;
  gap:2px;
}

.duplicate-group-footer {
  border-top:1px solid rgba(148,163,184,.28);
  padding-top:9px;
}

.duplicate-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0;
}

.duplicate-compare-card {
  display:grid;
  gap:5px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#f8fafc;
}

.duplicate-compare-card.incoming {
  border-color:#fdba74;
  background:#fff7ed;
}

.duplicate-compare-card>span {
  color:var(--muted);
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
}

.duplicate-compare-card small {
  line-height:1.45;
  color:#475569;
}

.file-button {
  cursor:pointer;
}

.visually-hidden-file {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.section-subheading {
  margin:20px 0 8px;
}

@media(max-width:820px) {
  .price-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .more-grid { grid-template-columns:1fr; }
  .price-toolbar { grid-template-columns:1fr 1fr; }
  .price-toolbar .search-wrap { grid-column:1/-1; }
  .store-price-row { grid-template-columns:minmax(0,1fr) minmax(150px,.8fr) auto; }
  .store-price-reference { display:none; }
}

@media(max-width:600px) {
  .price-kpi-grid { grid-template-columns:1fr 1fr 1fr; gap:7px; }
  .price-kpi-grid .status-card { padding:10px 8px; }
  .price-kpi-grid .status-card span { font-size:.7rem; }
  .price-kpi-grid .status-card strong { font-size:1rem; }
  .price-toolbar { grid-template-columns:1fr; }
  .price-toolbar .search-wrap { grid-column:auto; }
  .store-price-row {
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }
  .store-price-input-wrap { grid-column:1/2; }
  .store-price-row>[data-store-price-save] { grid-column:2/3; align-self:end; min-height:42px; }
  .settings-grid { grid-template-columns:1fr; }
  .duplicate-compare { grid-template-columns:1fr; }
  .duplicate-record,
  .recycle-row { align-items:flex-start; flex-direction:column; }
  .duplicate-record-actions { margin-top:4px; }
  .bottom-nav .nav-item>span:not(.nav-icon):not(.nav-badge) { font-size:.62rem; }
}

@media(max-width:380px) {
  .price-kpi-grid { grid-template-columns:1fr; }
  .bottom-nav .nav-item { padding-left:2px; padding-right:2px; }
  .bottom-nav .nav-item>span:not(.nav-icon):not(.nav-badge) { font-size:.56rem!important; }
}


/* Foundation v2.1: compact, collapsible Recently Deleted */
.safety-heading-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.recycle-heading {
  margin-bottom:0;
}

.recycle-panel {
  margin-top:12px;
  border-top:1px solid rgba(148,163,184,.28);
  padding-top:12px;
}

.recycle-panel[hidden] {
  display:none !important;
}

.recycle-toolbar {
  display:grid;
  gap:7px;
  margin-bottom:10px;
}

.recycle-search-label {
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
}

.recycle-search-row {
  display:flex;
  gap:8px;
  align-items:center;
}

.recycle-search-input {
  min-width:0;
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 11px;
  background:#fff;
  color:inherit;
  font:inherit;
  font-size:16px;
}

.recycle-showing-text {
  color:var(--muted);
  font-size:.78rem;
}

.recycle-list {
  max-height:520px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:2px;
}

.recycle-load-actions {
  display:flex;
  justify-content:center;
  padding-top:10px;
}

.recycle-toggle {
  white-space:nowrap;
}

@media (max-width:640px) {
  .recycle-heading {
    align-items:stretch;
  }
  .recycle-heading > div:first-child {
    min-width:0;
  }
  .safety-heading-actions {
    width:100%;
    justify-content:space-between;
  }
  .recycle-toggle {
    min-height:40px;
  }
  .recycle-search-row {
    align-items:stretch;
  }
  .recycle-list {
    max-height:430px;
  }
  .recycle-row {
    padding:10px 0;
  }
  .recycle-row .btn {
    align-self:stretch;
  }
}

/* Foundation v2.2: Store Price PDF tools */
.price-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
}

.price-pdf-card {
  width:min(620px,100%);
}

.price-pdf-options label {
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.35;
}

.price-pdf-options input[type="radio"],
.price-pdf-options input[type="checkbox"] {
  flex:0 0 auto;
}

.option-count {
  margin-left:auto;
  min-width:28px;
  padding:2px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:.75rem;
  font-weight:800;
  text-align:center;
}

.price-pdf-summary {
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  border-radius:10px;
  color:#1e3a8a;
  font-size:.86rem;
  line-height:1.45;
}

@media(max-width:600px) {
  .price-actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .price-actions .btn {
    width:100%;
  }
}

/* =========================
   FINAL V4 — PRODUCT PHOTOS
   Uniform 1:1 frames keep cards aligned regardless of source image size.
========================= */
.product-photo-frame {
  width:112px;
  height:112px;
  aspect-ratio:1 / 1;
  margin:0 auto 2px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
  padding:0;
  color:var(--muted);
}

button.product-photo-frame {
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

button.product-photo-frame:hover {
  transform:translateY(-1px);
  border-color:#fdba74;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

button.product-photo-frame:focus-visible {
  outline:3px solid rgba(217,119,6,.22);
  outline-offset:2px;
}

.product-photo-image {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

.product-photo-fallback {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  background:linear-gradient(180deg,#fff,#f8fafc);
  color:#94a3b8;
}

.product-photo-fallback[hidden] {
  display:none!important;
}

.product-photo-fallback span {
  font-size:1.6rem;
  line-height:1;
}

.product-photo-fallback small {
  font-size:.68rem;
  font-weight:750;
  line-height:1.2;
}

.product-photo-frame.photo-error {
  border-style:dashed;
}

.product-photo-editor-group {
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fffaf5;
}

.product-photo-help {
  margin:0;
}

.product-photo-editor {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:4px;
}

.editor-photo-frame {
  margin:0;
}

.product-photo-editor-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}

.product-photo-preview-card {
  max-width:620px;
}

.product-photo-large-frame {
  width:min(100%,520px);
  aspect-ratio:1 / 1;
  margin:14px auto 8px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-photo-large-image {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

.product-photo-large-fallback span {
  font-size:2.5rem;
}

.photo-preview-url {
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
}

@media (max-width:700px) {
  .product-photo-frame {
    width:92px;
    height:92px;
    border-radius:12px;
  }

  .product-photo-editor {
    align-items:flex-start;
  }

  .editor-photo-frame {
    width:86px;
    height:86px;
  }
}

@media (max-width:420px) {
  .product-photo-editor {
    flex-direction:column;
  }
}


/* =========================================================
   FINAL V5 - PRIVATE ACCOUNTS / ROLE UI
========================================================= */
.auth-locked .app-header,
.auth-locked .app-shell,
.auth-locked .bottom-nav,
.auth-locked .drawer-backdrop,
.auth-locked .modal:not(#changePasswordModal) {
  display: none !important;
}

.hidden-role {
  display: none !important;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 55%, #f8fafc 100%);
  overflow: auto;
}

.auth-gate[hidden] {
  display: none !important;
}

.auth-card {
  width: min(430px, 100%);
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
  padding: 28px;
}

.auth-brand-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.auth-card h1 {
  margin: 0;
  text-align: center;
  color: #7c2d12;
  font-size: clamp(1.65rem, 5vw, 2.1rem);
}

.auth-subtitle,
.auth-persistence-note {
  margin: -4px 0 2px;
  color: #64748b;
  font-size: .76rem;
  line-height: 1.35;
}

.auth-private-note {
  text-align: center;
  color: #64748b;
}

.auth-subtitle {
  margin: 6px 0 22px;
  font-weight: 700;
}

.auth-private-note {
  margin: 18px 0 0;
  font-size: 0.86rem;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form label:not(.auth-check) {
  font-weight: 800;
  color: #334155;
  margin-top: 4px;
}

.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  background: #fff;
  color: #0f172a;
}

.auth-form input:focus {
  outline: 3px solid rgba(217, 119, 6, 0.16);
  border-color: #d97706;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #475569;
  font-weight: 700;
}

.auth-check input {
  width: 18px;
  height: 18px;
}

.auth-login-btn {
  min-height: 50px;
  margin-top: 4px;
  font-size: 1rem;
}

.auth-message {
  min-height: 22px;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
}

.auth-message.error {
  color: #b91c1c;
}

.auth-message.success {
  color: #15803d;
}

.app-header-row {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header-row > div:first-child {
  min-width: 0;
}

.header-account-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(124, 45, 18, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: #7c2d12;
  border-radius: 999px;
  padding: 7px 11px 7px 8px;
  cursor: pointer;
  font: inherit;
}

.header-account-chip:hover {
  background: #fff;
}

.header-account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffedd5;
}

.header-account-text {
  display: grid;
  text-align: left;
  line-height: 1.15;
}

.header-account-text strong {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-account-text small {
  color: #9a3412;
  margin-top: 2px;
}

.account-card {
  border-color: #fdba74;
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #ffedd5;
  font-size: 24px;
}

.account-summary > div:last-child {
  display: grid;
  gap: 2px;
}

.account-summary strong {
  font-size: 1.05rem;
}

.account-summary span {
  color: #64748b;
  font-size: 0.9rem;
}

.account-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.account-meta-grid > div {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.account-meta-grid span,
.member-role span,
.member-name-field > span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.member-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.member-card-heading h3,
.member-card-heading p {
  margin-top: 0;
}

.member-card-heading p {
  color: #64748b;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.member-list,
.members-tray {
  display:grid;
  gap:10px;
  margin-top:12px;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden
}

.member-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-sizing:border-box
}

.member-identity {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 220px;
  min-width:0;
  max-width:100%
}

.member-avatar {
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f1f5f9
}

.member-identity>div {
  min-width:0;
  display:grid;
  gap:2px
}

.member-identity span,
.member-identity small {
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%
}

.member-identity small {
  font-size:.74rem
}

.member-name-field {
  flex:1 1 210px;
  min-width:180px;
  max-width:100%
}

.member-name-field input {
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:40px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:0 10px;
  font:inherit;
  box-sizing:border-box
}

.member-role {
  flex:0 1 145px;
  min-width:110px;
  max-width:100%
}

.member-control-cluster {
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  max-width:100%
}

.member-active {
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  font-weight:800;
  white-space:nowrap
}

.member-active input {
  width:18px;
  height:18px
}

.member-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
  min-width:0;
  max-width:100%
}

.member-actions .btn {
  max-width:100%;
  white-space:normal
}

@media (max-width:900px) {
  .member-control-cluster {
    flex:1 1 100%;
    justify-content:flex-start
  }

  .member-actions {
    justify-content:flex-start
  }
}

@media (max-width:640px) {
  .member-row {
    align-items:stretch
  }

  .member-identity,
  .member-name-field,
  .member-role,
  .member-control-cluster {
    flex:1 1 100%;
    min-width:0
  }

  .member-control-cluster {
    align-items:center
  }

  .member-actions {
    flex:1 1 100%
  }

  .member-actions .btn {
    flex:1 1 140px
  }
}

.auth-password-card {
  max-width: 480px;
}

.store-price-readonly {
  min-width: 130px;
}

body[data-emmarie-role="shopper"] .local-sheet-panel,
body[data-emmarie-role="shopper"] .safety-section,
body[data-emmarie-role="shopper"] .section-subheading.owner-only,
body[data-emmarie-role="shopper"] .local-status-grid.owner-only {
  display: none !important;
}

@media (max-width: 900px) {
  .member-row {
    grid-template-columns: 1fr 1fr;
  }

  .member-identity,
  .member-actions {
    grid-column: 1 / -1;
  }

  .member-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .auth-gate {
    padding: 14px;
    align-items: start;
  }

  .auth-card {
    margin-top: max(20px, env(safe-area-inset-top));
    padding: 22px 18px;
    border-radius: 20px;
  }

  .app-header-row {
    align-items: flex-start;
  }

  .header-account-chip {
    padding: 6px;
  }

  .header-account-text {
    display: none;
  }

  .header-account-avatar {
    width: 32px;
    height: 32px;
  }

  .account-meta-grid,
  .member-row {
    grid-template-columns: 1fr;
  }

  .member-identity,
  .member-actions {
    grid-column: auto;
  }

  .member-actions .btn {
    flex: 1 1 150px;
  }
}

/* =========================================================
   FINAL V6 - SHARED CLOUD / CENTERED HEADER / PHOTO UPLOAD
========================================================= */
.app-header {
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

.app-header-row {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.app-header-row > div:first-child,
.app-branding {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.app-header h1,
.app-header p {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.header-account-chip {
  margin: 0 auto;
  justify-content: center;
  max-width: min(92vw, 300px);
}

.header-account-text {
  text-align: center;
}

.product-photo-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.product-photo-upload-status {
  display: block;
  margin-top: 8px;
  color: #475569;
  font-weight: 650;
}

.product-photo-url-details {
  margin-top: 10px;
  border-top: 1px dashed #fed7aa;
  padding-top: 9px;
}

.product-photo-url-details summary {
  cursor: pointer;
  color: #9a3412;
  font-size: .83rem;
  font-weight: 750;
  user-select: none;
}

.product-photo-url-details input {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .app-header {
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }

  .app-header-row {
    align-items: center;
    gap: 8px;
  }

  .app-header h1 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .app-header p {
    font-size: .72rem;
    line-height: 1.3;
  }

  .header-account-chip {
    padding: 6px 10px 6px 7px;
  }

  .header-account-text {
    display: grid;
    text-align: center;
  }

  .header-account-avatar {
    width: 30px;
    height: 30px;
  }

  .header-account-text strong {
    max-width: 190px;
    font-size: .84rem;
  }

  .header-account-text small {
    font-size: .7rem;
  }

  .product-photo-upload-actions .btn {
    flex: 1 1 145px;
  }
}

/* =========================================================
   V6.3.1 PWA UPDATE BANNER
========================================================= */
.app-update-banner {
  position:fixed;
  left:50%;
  bottom:calc(82px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:min(560px,calc(100vw - 24px));
  padding:12px 14px;
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:#eff6ff;
  color:#1e3a8a;
  box-shadow:0 18px 48px rgba(15,23,42,.22)
}

.app-update-banner[hidden] {
  display:none !important
}

.app-update-copy {
  display:grid;
  gap:2px;
  min-width:0
}

.app-update-copy strong {
  font-size:.9rem
}

.app-update-copy span {
  color:#475569;
  font-size:.78rem
}

@media(max-width:560px) {
  .app-update-banner {
    align-items:stretch;
    flex-direction:column;
    bottom:calc(76px + env(safe-area-inset-bottom));
    gap:9px
  }

  .app-update-banner .btn {
    width:100%
  }
}


/* =========================
   V6.3.2 PHASE 3 - SYNC SAFETY + RECENT ACTIVITY (preserved)
========================= */
.sync-health-section {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.sync-health-heading { margin-bottom:12px; }
.sync-health-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:7px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.sync-health-badge[data-status="synced"] { background:#ecfdf5; color:#166534; border-color:#bbf7d0; }
.sync-health-badge[data-status="pending"] { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.sync-health-badge[data-status="offline"] { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.sync-health-badge[data-status="conflict"] { background:#fff7ed; color:#b45309; border-color:#fbbf24; }
.sync-health-badge[data-status="failed"] { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.sync-health-grid,
.diagnostics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0;
}
.sync-health-grid>div,
.diagnostics-grid>div {
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  min-width:0;
  background:#f8fafc;
}
.sync-health-grid span,
.diagnostics-grid span { display:block; color:var(--muted); font-size:.72rem; font-weight:800; }
.sync-health-grid strong,
.diagnostics-grid strong { display:block; margin-top:4px; font-size:1.05rem; overflow-wrap:anywhere; }
.sync-health-actions,
.recent-activity-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.phase3-modal-card { max-width:760px; }
.phase3-summary-strip {
  padding:10px 12px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:10px;
  font-weight:800;
  margin:10px 0;
}
.sync-queue-list { display:grid; gap:8px; max-height:52vh; overflow:auto; padding-right:2px; }
.sync-queue-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
.sync-queue-row>div { min-width:0; }
.sync-queue-row strong,
.sync-queue-row span,
.sync-queue-row small { display:block; }
.sync-queue-row span,
.sync-queue-row small { color:var(--muted); overflow-wrap:anywhere; }
.sync-queue-row small { font-size:.75rem; margin-top:3px; }
.sync-queue-state { color:#9a3412 !important; font-weight:900; font-size:.74rem; white-space:nowrap; }
.phase3-diagnostic-notes { display:grid; gap:8px; margin:10px 0 14px; }
.diagnostic-warning,
.diagnostic-ok,
.diagnostic-error { padding:10px 12px; border-radius:10px; line-height:1.4; }
.diagnostic-warning { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.diagnostic-ok { background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; }
.diagnostic-error { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }

.recent-activity-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:14px;
  overflow:hidden;
}
.recent-activity-toggle {
  width:100%;
  border:0;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  cursor:pointer;
  color:var(--text);
  text-align:left;
}
.recent-activity-toggle>span:first-child { min-width:0; display:grid; gap:2px; }
.recent-activity-toggle small { color:var(--muted); font-size:.74rem; font-weight:600; }
.recent-activity-toggle-right { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.recent-activity-panel { border-top:1px solid var(--border); padding:10px 14px 12px; }
.recent-activity-list { display:grid; gap:0; }
.recent-activity-row {
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px solid rgba(148,163,184,.22);
}
.recent-activity-row:last-child { border-bottom:0; }
.recent-activity-dot { width:8px; height:8px; border-radius:50%; background:#d97706; margin-top:6px; }
.recent-activity-row>div:nth-child(2) { min-width:0; }
.recent-activity-row strong { display:inline; margin-right:5px; }
.recent-activity-row span { color:var(--text); line-height:1.4; overflow-wrap:break-word; word-break:normal; }
.recent-activity-row small { display:block; color:var(--muted); margin-top:2px; line-height:1.35; overflow-wrap:break-word; }
.recent-activity-row time { color:var(--muted); font-size:.72rem; white-space:nowrap; padding-top:2px; }
.activity-modal-list { max-height:58vh; overflow:auto; padding-right:4px; }

@media(max-width:700px) {
  .sync-health-grid,
  .diagnostics-grid { grid-template-columns:1fr 1fr; }
  .sync-health-actions .btn,
  .recent-activity-actions .btn { flex:1 1 160px; }
  .sync-queue-row { align-items:flex-start; }
  .recent-activity-row { grid-template-columns:9px minmax(0,1fr); }
  .recent-activity-row time { grid-column:2; padding-top:0; }
}

@media(max-width:430px) {
  .sync-health-grid,
  .diagnostics-grid { grid-template-columns:1fr; }
  .recent-activity-toggle { padding:12px; }
  .recent-activity-panel { padding:8px 12px 10px; }
  .sync-health-actions { display:grid; grid-template-columns:1fr; }
  .sync-health-actions .btn { width:100%; }
}


/* Phase 3 refinement: compact Local Admin Audit */
.admin-audit-heading { margin-bottom:0; }
.admin-audit-panel {
  margin-top:12px;
  border-top:1px solid rgba(148,163,184,.28);
  padding-top:12px;
}
.admin-audit-panel[hidden] { display:none !important; }
.admin-audit-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.audit-modal-list {
  max-height:58vh;
  overflow:auto;
  padding-right:4px;
}
@media (max-width:600px) {
  .admin-audit-heading { align-items:flex-start; }
  .admin-audit-actions { align-items:stretch; }
  .admin-audit-actions .btn { width:100%; }
}

/* =========================
   PHASE 4 - MASTERLIST UX
========================= */
.masterlist-tools {
  grid-template-columns:minmax(0,1fr) auto;
}
.base-unit-price {
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:.75rem;
  font-weight:700;
}
.category-accordion-grid {
  display:block;
}
.master-category-group {
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  margin-bottom:12px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.master-category-heading {
  width:100%;
  border:0;
  background:#fff7ed;
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 15px;
  text-align:left;
  cursor:pointer;
}
.master-category-heading>span:first-child {
  display:grid;
  gap:2px;
}
.master-category-heading strong { color:#9a3412; font-size:.96rem; }
.master-category-heading small { color:#64748b; font-size:.76rem; }
.master-category-chevron { color:#9a3412; font-weight:900; }
.master-category-products {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:13px;
  padding:13px;
  background:#f8fafc;
}
.master-category-products.hidden { display:none; }
.phase4-product-fields {
  grid-template-columns:1fr 1fr;
}
.phase4-category-settings {
  margin-top:14px;
  padding:13px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  display:grid;
  gap:9px;
}
.phase4-category-settings h4 { margin:0; color:#334155; }
.phase4-category-settings select {
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  padding:8px 10px;
}
.phase4-check { display:flex; align-items:flex-start; gap:8px; }
.category-order-editor-wrap {
  border-top:1px solid #e2e8f0;
  padding-top:10px;
}
.category-order-editor-heading {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
  color:#64748b;
  font-size:.82rem;
}
.category-order-editor {
  display:grid;
  gap:6px;
  max-height:340px;
  overflow:auto;
}
.category-order-row {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
}
.category-order-index {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ffedd5;
  color:#9a3412;
  font-weight:800;
  font-size:.75rem;
}
.category-order-actions { display:flex; gap:5px; }

@media(max-width:820px) {
  .masterlist-tools { grid-template-columns:minmax(0,1fr) auto; }
  .master-category-products { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .phase4-product-fields { grid-template-columns:1fr 1fr; }
}

@media(max-width:560px) {
  .masterlist-tools { grid-template-columns:1fr; }
  .search-wrap { grid-column:auto; }
  .add-product-top { width:100%; }
  .master-category-products { grid-template-columns:1fr; padding:10px; gap:10px; }
  .master-category-heading { padding:12px; }
  .phase4-product-fields { grid-template-columns:1fr; }
  .category-order-editor-heading { align-items:flex-start; flex-direction:column; }
  .category-order-row { grid-template-columns:28px minmax(0,1fr); }
  .category-order-actions { grid-column:1/-1; justify-content:flex-end; }
}

/* Phase 5 — shared shopping / multi-user collaboration */
.shared-shopping-card {
  border:1px solid #fed7aa;
  border-radius:14px;
  background:#fffaf3;
  padding:14px;
  margin-bottom:14px;
  display:grid;
  gap:12px;
}
.shared-shopping-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.shared-shopping-heading>div { display:grid; gap:3px; }
.shared-shopping-heading strong { color:#7c2d12; font-size:1rem; }
.shared-shopping-heading small { color:#64748b; line-height:1.35; }
.shared-connection-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
  background:#e2e8f0;
  color:#475569;
}
.shared-connection-badge[data-status="live"] { background:#dcfce7; color:#166534; }
.shared-connection-badge[data-status="pending"] { background:#fef3c7; color:#92400e; }
.shared-connection-badge[data-status="offline"] { background:#e2e8f0; color:#475569; }
.shared-connection-badge[data-status="conflict"] { background:#fee2e2; color:#991b1b; }
.shared-connection-badge[data-status="warning"] { background:#ffedd5; color:#9a3412; }
.shopping-mode-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:4px;
  background:#f1f5f9;
  border-radius:12px;
}
.shopping-mode-btn {
  min-height:42px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#475569;
  font-weight:800;
  cursor:pointer;
}
.shopping-mode-btn.active {
  background:#fff;
  border-color:#fdba74;
  color:#9a3412;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.shared-shopping-controls { display:grid; gap:10px; }
.shared-group-select-wrap { display:grid; gap:6px; font-weight:700; color:#334155; }
.shared-group-select-wrap select,
.group-management-toolbar select {
  width:100%;
  min-height:43px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  padding:8px 10px;
}
.shared-shopping-meta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
  color:#475569;
  font-size:.9rem;
}
.shared-shopping-actions { display:flex; flex-wrap:wrap; gap:8px; }
.group-management-modal-card { max-width:720px; }
.group-management-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  margin-bottom:12px;
}
.group-management-toolbar label { display:grid; gap:6px; font-weight:700; color:#334155; }
.group-member-picker-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:14px 0 8px;
}
.group-member-picker {
  display:grid;
  gap:7px;
  max-height:320px;
  overflow:auto;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:8px;
  background:#f8fafc;
}
.group-member-option {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.group-member-option input { width:18px; height:18px; }
.group-member-option span { display:grid; gap:2px; min-width:0; }
.group-member-option strong { color:#334155; }
.group-member-option small { color:#64748b; overflow-wrap:anywhere; }
.sync-health-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media(max-width:760px) {
  .shared-shopping-heading { align-items:stretch; }
  .shared-shopping-meta { grid-template-columns:1fr; }
  .shared-shopping-actions .btn { flex:1 1 180px; }
  .group-management-toolbar { grid-template-columns:1fr; }
  .sync-health-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:480px) {
  .shared-shopping-card { padding:11px; }
  .shopping-mode-switch { grid-template-columns:1fr; }
  .shared-shopping-actions { display:grid; grid-template-columns:1fr; }
  .shared-shopping-actions .btn { width:100%; }
  .sync-health-grid { grid-template-columns:1fr 1fr; }
}


/* Phase 5 R1 — practical group management + Cart/shared interoperability */
.cart-shared-tools {
  margin-top:14px;
  padding:12px;
  border:1px solid #ddd6fe;
  border-radius:12px;
  background:#faf5ff;
  display:grid;
  gap:9px;
}
.cart-shared-tools[hidden] { display:none !important; }
.cart-shared-heading { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:#5b21b6; }
.cart-shared-heading span { color:#475569; font-weight:700; }
.cart-shared-tools p { margin:0; color:#64748b; font-size:.9rem; line-height:1.4; }
.cart-shared-actions { display:flex; flex-wrap:wrap; gap:8px; }
.group-permission-note { margin:0 0 12px; padding:9px 10px; border-radius:10px; background:#eff6ff; color:#1e40af; font-size:.9rem; }
.group-current-member-list { display:grid; gap:7px; margin-bottom:12px; }
.group-current-member { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:9px; align-items:center; padding:9px 10px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
.group-current-member>div { display:grid; gap:2px; min-width:0; }
.group-current-member strong { color:#334155; }
.group-current-member small { color:#64748b; overflow-wrap:anywhere; }
.group-manager-badge { display:inline-flex; padding:4px 8px; border-radius:999px; background:#ede9fe; color:#6d28d9; font-size:.76rem; font-weight:800; }
.group-manager-field { margin:10px 0 14px; }
.group-manager-field select { width:100%; min-height:43px; border:1px solid var(--border); border-radius:10px; background:#fff; padding:8px 10px; }
.group-manager-field small { color:#64748b; font-weight:400; }
.group-add-member-wrap { display:grid; gap:5px; margin:10px 0 12px; }
.group-add-member-wrap>label { display:grid; gap:6px; font-weight:700; color:#334155; }
.group-add-member-wrap>small { color:#64748b; }
.group-username-add-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.group-username-add-row input { width:100%; min-height:43px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.group-available-member { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px 10px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
.group-available-member>div { display:grid; gap:2px; min-width:0; }
.group-available-member strong { color:#334155; }
.group-available-member small { color:#64748b; overflow-wrap:anywhere; }
.group-management-actions { flex-wrap:wrap; }
@media(max-width:560px) {
  .cart-shared-actions { display:grid; grid-template-columns:1fr; }
  .cart-shared-actions .btn { width:100%; }
  .group-current-member { grid-template-columns:minmax(0,1fr) auto; }
  .group-current-member .btn { grid-column:1/-1; width:100%; }
  .group-username-add-row { grid-template-columns:1fr; }
  .group-username-add-row .btn { width:100%; }
  .group-available-member { grid-template-columns:1fr; }
  .group-available-member .btn { width:100%; }
}
.group-member-picker[hidden],
#groupMemberPickerHeading[hidden],
.group-add-member-wrap[hidden],
#leaveShoppingGroupBtn[hidden],
#archiveShoppingGroupBtn[hidden],
#saveShoppingGroupBtn[hidden] { display:none !important; }
.checklist-shared-actor { margin-top:3px; color:#7c3aed; font-size:.76rem; font-weight:700; }