/* ============================================================
   CSS ISOLATION: Block Elementor/Theme Styles
   Prevents Elementor and theme CSS from interfering with plugin
   ============================================================ */
#equipment-list-app {
  --el-sidebar-width: 115px;
  isolation: isolate !important;
  position: relative !important;
  z-index: 1 !important;
  /* Reset common Elementor/theme interference - targeted approach */
  display: block !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1d1d1f !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  direction: ltr !important;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.footer-list a {
  color: #111;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
}

/* Force non-active sidebar icons/text to dark gray across themes */
#equipment-list-app .left-sidebar .sidebar-btn:not(.active),
#equipment-list-app .left-sidebar .sidebar-btn:not(.active) i,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active) .sidebar-btn-label,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active) .sidebar-btn-count,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):hover,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):hover i,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):hover .sidebar-btn-label,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):hover .sidebar-btn-count,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus i,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus .sidebar-btn-label,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus .sidebar-btn-count,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus-visible,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus-visible i,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus-visible .sidebar-btn-label,
#equipment-list-app .left-sidebar .sidebar-btn:not(.active):focus-visible .sidebar-btn-count {
  color: #4A4A4A !important;
}

/* Keep inventory table header above all row content */
#equipment-list-app .inventory-table-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
}

#equipment-list-app .inventory-table-header th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2001 !important;
  background: #f5f5f5 !important;
}

/* Keep header menus (Settings/Download dropdowns) above everything */
#equipment-list-app .share-button-wrapper,
#equipment-list-app .action-group {
  position: relative !important;
  z-index: 200 !important;
}

/* Undo + Download were moved into the Settings dropdown via an inline
   "settings dropdown shim" that runs after app.min.js. Hide the standalone
   header buttons on all viewports so the same action isn't exposed twice.
   (The original Download dropdown panel inside its wrapper stays in the DOM
   so the shim can programmatically click its Word/Excel/PDF items.) */
#equipment-list-app header #undoBtn,
#equipment-list-app header .action-group > div:has(> #downloadBtn) {
  display: none !important;
}

/* While a header dropdown is open, raise its wrapper above the sticky inventory
   table column headers (z-index 2001) so the dropdown isn't visually clipped.
   Only active while .share-dropdown.open exists inside, so we don't disturb the
   rest of the layout (including the mobile bottom-nav stacking, which broke
   when the wrapper z-index was raised unconditionally). */
#equipment-list-app .share-button-wrapper:has(.share-dropdown.open),
#equipment-list-app .action-group:has(.share-dropdown.open) {
  z-index: 4000 !important;
}

#equipment-list-app .share-dropdown,
#equipment-list-app #settingsDropdown,
#equipment-list-app #downloadDropdown {
  z-index: 4001 !important;
}

#equipment-list-app .share-dropdown-submenu {
  z-index: 4002 !important;
}

/*
 * Header comes before .app-layout in the DOM; without a higher stacking context,
 * inventory/wish list (incl. sticky headers and row cells) paint on top of the
 * Settings/Download menus when they extend over the list.
 */
#equipment-list-app .container > header,
#equipment-list-app .equipment-main-column > header {
  position: relative;
  z-index: 12000 !important;
}

/*
 * "Save Template" Settings entry: hidden globally. app.min.js toggles its
 * inline display based on the logged-in user's role; we override with
 * !important so it never appears regardless of permissions.
 */
#equipment-list-app #saveTemplateMenuItem {
  display: none !important;
}

/*
 * Sidebar submenus for Inventory ("Recommendations") and Wish List
 * ("Only from Gopher", "What's New?") are hidden because their entries
 * are exposed as floating action buttons instead. The menu items are
 * still present in the DOM (and clicked programmatically by the FAB
 * shim) so we keep all of app.min.js's existing toggle handlers.
 */
#equipment-list-app #inventoryIdeasSubmenu,
#equipment-list-app #wishListSubmenu {
  display: none !important;
}

/* Desktop: group on the left; mobile overrides to the right (see responsive block) */
#equipment-list-app .el-wish-fab-group {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 28px;
  top: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2147483646;
  touch-action: none;
  user-select: none;
  cursor: grab;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#equipment-list-app .el-wish-fab-group:active {
  cursor: grabbing;
}

#equipment-list-app .el-wish-fab-group.is-visible {
  display: flex;
}

#equipment-list-app .el-wish-fab-group__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

#equipment-list-app .el-wish-fab {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
  -webkit-appearance: none;
  appearance: none;
}

#equipment-list-app .el-wish-fab--ofg {
  background: #ef4444;
  overflow: hidden;
}

#equipment-list-app .el-wish-fab--ofg img {
  width: 66%;
  height: 66%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

#equipment-list-app .el-wish-fab--new {
  background: #ffffff;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1;
  border: 1px solid rgba(220, 38, 38, 0.35);
}

#equipment-list-app .el-wish-fab-group__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
}

/* Floating Recommendations button — desktop default bottom-left; mobile overrides position */
#equipment-list-app .el-rec-fab {
  position: fixed;
  right: auto;
  bottom: 28px;
  left: 28px;
  top: auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
  z-index: 2147483647;
  touch-action: none;
  user-select: none;
  border: none;
  padding: 0;
  cursor: grab;
}

#equipment-list-app .el-rec-fab:active {
  cursor: grabbing;
}

#equipment-list-app .el-rec-fab.is-visible {
  display: inline-flex;
}

#equipment-list-app .el-rec-fab i {
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

#equipment-list-app .el-rec-fab__close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: lock page scroll when header dropdown (settings/download) is open so menu overlays the page */
body.el-header-dropdown-open,
html.el-header-dropdown-open {
  overflow: hidden !important;
}

/* Hide theme page title (e.g. "Falcon Ridge Elementary – date") so it takes no space; app has its own header */
.site-main > .page-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide Save button - list uses autosave; Undo remains available */
#equipment-list-app #saveBtn {
  display: none !important;
}

/* Grade label (e.g. Middle School / Junior High) - 16px desktop */
#equipment-list-app header .heading-grade {
  font-size: 16px !important;
}

/* Reset common Elementor interference on child elements */
#equipment-list-app * {
  box-sizing: border-box !important;
}

/* Prevent Elementor from affecting plugin inputs/buttons */
#equipment-list-app input,
#equipment-list-app select,
#equipment-list-app textarea,
#equipment-list-app button {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
}

/* Override Elementor's common class-based styles */
#equipment-list-app .elementor-widget,
#equipment-list-app .elementor-element,
#equipment-list-app .elementor-section {
  all: unset !important;
  display: block !important;
}

/* --------------------------------------------------------------------
   Equipment List Manager — Apple-ish UI + Two-Column Layout
   - Equipment List (left) and Shopping Cart (right) side-by-side
   - "Uncategorized" is hidden in JS when empty
-------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-soft-2: rgba(0, 113, 227, 0.06);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.14);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --shadow-sm: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 2px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(0, 113, 227, 0.20);
}

* { box-sizing: border-box; }

/* Override any external WordPress/theme styles that interfere with inputs */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 5px 18px !important;
  height: 38px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.shopping-row-field.shopping-card-qty-section {
    width: 130px;
}

.items-recommendation-pills .qty-pill-container {
    width: 70px !important;
    flex-shrink: 0;
    flex-grow: 0;
}

/* Keep content padding normal to account for Elementor header - padding removed to allow header space */

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.category-body.essential-body {
  background-color: #f5f4f7;
}

/* Layout container */
.container {
  max-width: 100%; /* full-width for tab layout */
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

button.needed-dropdown-item {
    padding: 7px 20px 7px 15px;
}

.card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Header */
header {
  padding: 16px 18px;

}

.page-header {
  text-align: left;
  position: relative;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.2;
  flex-shrink: 0;
}

.heading-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Share Button */
.share-button-wrapper {
  position: relative;  /* Ensure this is relative for dropdown positioning */
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.load-list-wrapper {
  position: relative;
}

.share-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.share-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/*
 * Mobile app: previously hid the plugin header to rely on the global site header.
 * Keep the header visible by default in the app so users still see grade/title/school info.
 *
 * If you ever need the old behavior again, add the class `mypep-mobile-app-hide-equipment-header`
 * to the body and the header will be hidden.
 */
body.mypep-mobile-app.mypep-mobile-app-hide-equipment-header #equipment-list-app > .container > header,
body.mypep-mobile-app.mypep-mobile-app-hide-equipment-header #equipment-list-app > .container > header .page-header,
body.mypep-mobile-app.mypep-mobile-app-hide-equipment-header #equipment-list-app .equipment-main-column > header,
body.mypep-mobile-app.mypep-mobile-app-hide-equipment-header #equipment-list-app .equipment-main-column > header .page-header {
  display: none !important;
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-dropdown,
#settingsDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 1000;
  overflow: visible;
  display: none;
}

.share-dropdown.open,
#settingsDropdown.open {
  display: block !important;
}

.share-dropdown-item,
#settingsDropdown .share-dropdown-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-dropdown-item:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.share-dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-bottom: none;
}

.share-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
  border: none;
  padding: 0;
}

input[type="number"] {
  width: 100px !important;
}

.share-dropdown-item.has-submenu {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.share-dropdown-item.has-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.share-dropdown-submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.share-dropdown-submenu .share-dropdown-item {
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
}

.share-dropdown-submenu .share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item.has-submenu:hover .share-dropdown-submenu,
.share-dropdown-submenu:hover {
  display: block;
}

.share-dropdown-item.has-submenu:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item i,
.share-dropdown-item img {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.share-dropdown-item:hover i {
  color: var(--text);
}

/* Responsive adjustments for Share button */
@media (max-width: 768px) {
  .share-button-wrapper {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .share-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   MOBILE POLISH PACK (MOBILE ONLY)
   - Safe-area support (iOS home indicator)
   - Backdrop + scroll lock for bottom sheet
   - Snackbar-style notifications
   - Small-phone breakpoint (<= 480px)
   - Sticky first column for wide tables
   - Keyboard-open compact bottom nav
   Desktop styles are untouched.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --mobile-nav-height: calc(76px + var(--safe-bottom));
  }

  /* Demo tour FAB: visible on mobile so users can start/restart the tour (see demo-tour.css for mobile position) */

  /* ------------------------------------------------------------
     Compact top header (keep desktop untouched)
     ------------------------------------------------------------ */
  header .page-header {
    gap: 10px;
    align-items: center;
    margin-top: 0 !important;
  }

  header .page-header-left { min-width: 0; }

  header .heading-grade {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
  }

  header #equipmentHeading {
    font-size: 28px;
    line-height: 1.05;
    margin: 0;
  }

  header .heading-sub {
    font-size: 0.9rem;
    margin-top: 6px;
  }

  /* Keep actions in the header row (no extra row) */
  .share-button-wrapper {
    margin-top: 0 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

.action-group {
  position: relative;
  gap: 6px !important;
}

  .action-btn {
    padding: 8px 10px !important;
    min-height: 40px;
  }

  .action-btn span { display: none !important; }
  .action-btn i { margin: 0 !important; }

  /* ------------------------------------------------------------
     Setup row: summary bar + bottom-sheet editor
     ------------------------------------------------------------ */
  .setup-row-header {
    border-radius: 14px;
    padding: 12px 14px;
  }

  .setup-summary {
    display: block !important;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  /* Backdrop for the setup bottom sheet */
  #elSetupBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 116;
  }

  html.el-setup-sheet-open,
  body.el-setup-sheet-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  body.el-setup-sheet-open #elSetupBackdrop {
    display: block;
    pointer-events: none !important;
  }
  
  /* Make backdrop clickable ONLY in areas where setup sheet is NOT present */
  body.el-setup-sheet-open #elSetupBackdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-nav-height) + min(80vh, 600px));
    pointer-events: auto;
    z-index: 1;
  }

  /* Convert the setup fields into a bottom sheet */
  #setupRowContent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    z-index: 120;
    background: var(--card);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -12px 28px rgba(0,0,0,0.18);
    max-height: calc(80vh - 8px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(110%);
    transition: transform 240ms ease;
    padding: 14px 14px 22px 14px;
    pointer-events: auto !important;
  }

  body.el-setup-sheet-open #setupRowContent {
    transform: translateY(0);
    pointer-events: auto !important;
  }
  
  /* Ensure all inputs and interactive elements in setup sheet are clickable */
  #setupRowContent * {
    pointer-events: auto !important;
  }
  
  #setupRowContent input,
  #setupRowContent select,
  #setupRowContent button,
  #setupRowContent label {
    pointer-events: auto !important;
  }

  /* Grab handle */
  body.el-setup-sheet-open #setupRowContent::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin: 8px auto 14px auto;
  }

  /* Ensure content clears the nav + safe area */
  .container {
    padding-bottom: calc(var(--mobile-nav-height) + 16px) !important;
  }

  /* Bottom nav: height already includes safe area; padding lives on .sidebar-toolbar */
  .left-sidebar {
    box-sizing: border-box !important;
    height: var(--mobile-nav-height) !important;
    padding-bottom: 0 !important;
  }

  .sidebar-toolbar {
    padding-bottom: calc(10px + var(--safe-bottom));
  }

  /* Backdrop for the bottom drawer */
  #elMobileBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    /* Keep backdrop below drawers but above the page content. */
    z-index: 10050;
  }

  html.el-lock-scroll,
  body.el-lock-scroll {
    overflow: hidden !important;
    height: 100% !important;
  }

  body.el-lock-scroll #elMobileBackdrop {
    display: block;
  }

  /* Drawer handle + scrollability */
  #sidebarRecommendationsPanel,
  .sidebar-wish-catalog-panel,
  .sidebar-faq-panel,
  .sidebar-contact-panel {
    will-change: height;
  }

  .recommendations-panel-header {
    padding-top: 28px !important;
  }

  .recommendations-panel-header::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
  }

  .recommendations-panel-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Snackbar notifications (used by showNotification on mobile) */
  .el-snackbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height) + 12px);
    z-index: 10050;
    background: rgba(29, 29, 31, 0.92);
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    font-size: 14px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .el-snackbar.el-toast-show {
    opacity: 1;
    transform: translateY(0);
  }

  .el-snackbar.el-hide {
    opacity: 0;
    transform: translateY(8px);
  }


  /* ------------------------------------------------------------
     Equipment Ideas: mobile action sheet for "Add to..."
     ------------------------------------------------------------ */
  #elEquipActionBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 10055;
  }

  html.el-equip-action-open,
  body.el-equip-action-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  body.el-equip-action-open #elEquipActionBackdrop {
    display: block;
  }

  #elEquipActionSheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    z-index: 10060;
    background: var(--card);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -12px 28px rgba(0,0,0,0.18);
    transform: translateY(110%);
    transition: transform 240ms ease;
    padding: 14px 14px 22px 14px;
    max-height: calc(70vh - 8px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.el-equip-action-open #elEquipActionSheet {
    transform: translateY(0);
  }

  #elEquipActionSheet::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin: 8px auto 14px auto;
  }

  #elEquipActionSheet .el-as-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: var(--text);
    line-height: 1.25;
  }

  #elEquipActionSheet .el-as-subtitle {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0 0 14px 0;
    line-height: 1.35;
  }

  #elEquipActionSheet .el-as-actions {
    display: grid;
    gap: 10px;
  }

  /* ------------------------------------------------------------
     Needs Actions Sheet (mobile "More" menu)
     ------------------------------------------------------------ */
  #elNeedsActionsBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 10055;
  }

  html.el-needs-actions-open,
  body.el-needs-actions-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  body.el-needs-actions-open #elNeedsActionsBackdrop {
    display: block;
  }

  #elNeedsActionsSheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    z-index: 10060;
    background: var(--card);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -12px 28px rgba(0,0,0,0.18);
    transform: translateY(110%);
    transition: transform 240ms ease;
    padding: 14px 14px 22px 14px;
    max-height: calc(70vh - 8px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.el-needs-actions-open #elNeedsActionsSheet {
    transform: translateY(0);
  }

  #elNeedsActionsSheet::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin: 8px auto 14px auto;
  }

  #elNeedsActionsSheet .el-as-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: var(--text);
    line-height: 1.25;
  }

  #elNeedsActionsSheet .el-as-actions {
    display: grid;
    gap: 10px;
  }

  #elNeedsActionsSheet .el-as-btn {
    width: 100%;
    padding: 14px 16px;
    background: #f8f9fa;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    transition: background 0.2s;
  }

  #elNeedsActionsSheet .el-as-btn:active {
    background: #e9ecef;
  }

  /* ------------------------------------------------------------
     Needs Create FAB (Floating Action Button)
     ------------------------------------------------------------ */
  .needs-create-fab {
    display: none;
    position: fixed;
    bottom: max(10px, calc(var(--mobile-nav-height) - 36px));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #007AFF;
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
    cursor: pointer;
    z-index: 9999;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .needs-create-fab:active {
    transform: scale(0.95);
  }

  @media (min-width: 769px) {
    .needs-create-fab {
      display: none !important;
    }
  }

  #elEquipActionSheet .el-as-btn {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-weight: 700;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #elEquipActionSheet .el-as-btn-primary {
    border: none;
    background: var(--accent);
    color: #fff;
  }

  #elEquipActionSheet .el-as-btn-secondary {
    border-color: rgba(0,0,0,0.08);
    background: #f1f5f9;
  }

  #elEquipActionSheet .el-as-btn-cancel {
    margin-top: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
  }

  /* Equipment Ideas suggestion rows — tappable on mobile */
  .lane-essential .inventory-table-row.el-tappable,
  .lane-essential .essential-equipment-row.el-tappable {
    cursor: pointer;
  }
  .lane-essential .inventory-table-row.el-tappable:active,
  .lane-essential .essential-equipment-row.el-tappable:active {
    background: rgba(0, 0, 0, 0.03);
  }

  /* Wide tables: keep the first column visible while scrolling */
  .inventory-table-wrapper {
    position: relative;
  }

  .inventory-table th:first-child,
  .inventory-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 2;
    box-shadow: 8px 0 12px rgba(0,0,0,0.05);
  }

  .inventory-table-header th:first-child {
    z-index: 3;
  }

  /* Keyboard open: compact the bottom nav to keep inputs usable */
  body.el-keyboard-open .left-sidebar {
    height: calc(52px + var(--safe-bottom)) !important;
  }

  body.el-keyboard-open .sidebar-toolbar {
    padding: 6px 10px calc(6px + var(--safe-bottom)) 10px;
  }

  body.el-keyboard-open .sidebar-btn {
    min-height: 40px;
    padding: 6px 6px;
  }

  body.el-keyboard-open .sidebar-btn-label,
  body.el-keyboard-open .sidebar-btn-count {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Inventory & wish list cards: stack fields for narrow screens */
  .inv-card-fields {
    grid-template-columns: 1fr !important;
  }

  .shopping-card-middle {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .shopping-card-bottom {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  .shopping-card-price-section {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 768px) {
    #sidebarRecommendationsPanel,
    .sidebar-wish-catalog-panel,
    .sidebar-faq-panel,
    .sidebar-contact-panel,
    .left-sidebar,
    .el-snackbar {
      transition: none !important;
    }
  }
}

.heading-sub {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-sub a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.heading-sub a:hover {
  text-decoration: underline;
}

.link-row { margin-top: 6px; }
.link-row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.link-row a:hover { text-decoration: underline; }

/* Header Section */
.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.header-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.header-row:first-child {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-row-bottom {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  margin-top: 12px;
}

.header-row-bottom .header-field {
  flex-direction: row;
  align-items: center;
  gap: 0;
}


.header-row-bottom .header-field:nth-child(4) {
  justify-content: flex-start;
}

.header-row-bottom .header-field:last-child {
  justify-content: flex-start;
  padding-left: 0;
}

.header-row-details {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: start;
  margin-top: 12px;
}

.header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.last-updated-display {
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

#moreDetailsBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  width: 175px;
  justify-content: center;
}

#moreDetailsBtn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
}

#moreDetailsBtn i {
  font-size: 0.9rem;
}

#moreDetailsChevron {
  transition: transform 200ms ease;
}

.more-details-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.more-details-content .notes-textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 100px;
}

.more-details-content .notes-textarea:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  background: #fff;
  box-shadow: var(--ring);
}

.more-details-content .notes-textarea::placeholder {
  color: var(--muted);
}

.header-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

button.toggle-btn{
border: none;
border-radius: 45px;
color: black;
display: inline-block;
font-size: 1rem;
font-weight: 400;
padding: 0px 20px;
text-align: center;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;}

button.toggle-btn.active {
  border: none;
  border-radius: 45px;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.header-field.header-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.header-field.header-button .btn {
  margin-bottom: 0;
}

.notes-section {
  margin-top: 0px;
  padding-top: 0px;
  border: none;
}

.header-field #newItemQty {
  width: 100%;
  max-width: 100px;
  text-align: center;
}

.header-field .type-toggle {
  width: 100%;
  max-width: 285px;
}

input[type="text"],
input[type="number"],
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Buttons */
.btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn.primary {
  background: var(--accent);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

/* Icon actions */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn.primary {
  background: rgba(0,0,0,0.04);
}

/* Add item area */
.add-item-container {
  padding: 14px 18px 6px;
}

.toolbar-labels {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 2px 6px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  align-items: center;
}

#newItemQty { width: 90px; text-align: center; }

.type-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fbfbfd;
  width: 100%;
  position: relative;
}

.header-field .type-toggle {
  margin-top: 0;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toggle-btn.active {
  background: #e8f5e9;
  color: var(--text);
}

.toggle-btn:hover {
  background: #15489e !important;
  color: #fff !important;
}

.toggle-btn.active:hover {
  background: #15489e !important;
  color: #fff !important;
}

/* Add Category - Plus button with dropdown */
.add-category-wrapper {
  position: relative;
}


.add-category-btn:hover {
  opacity: 1;
  color: #666;
  background-color: transparent !important;
}

#essentialTemplateBtn {
  font-size: 20px;
}

#essentialTemplateBtn i {
  font-size: 20px;
}



.add-category-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 10000;
  overflow: visible;
  white-space: nowrap;
}



.dropdown-item:hover {
  background: #e5e5e5;
}

.dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --------------------------------------------------------------------
   Two Column Layout
-------------------------------------------------------------------- */


/* --------------------------------------------------------------------
   Inventory-first Layout (Tabs on Top + Full Width Content)
-------------------------------------------------------------------- */
/* .app-layout moved to sidebar section below */

.class-size-container {
  padding: 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.class-size-container .header-field {
  max-width: 200px;
}

/* Content wrapper moved to sidebar section below */

/* Top tabs styling - now hidden, replaced by sidebar */
/* Old top-tabs styles removed - see sidebar section below */

.stage {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: width 220ms ease, max-width 220ms ease;
  align-self: flex-start;
}

.app-layout.drawer-open .stage {
  max-width: calc(100% - 420px);
  width: calc(100% - 420px);
}

.app-layout:not(.drawer-open) .stage {
  max-width: 100%;
  width: 100%;
}

/* stage-toolbar removed - button moved to top-tabs */

.full-panel {
  padding: 0;
}

.full-panel .panel-head,
.drawer-panel .panel-head {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin-bottom: 14px;
  padding: 0;
  width: 100%;
  min-height: auto;
  transition: padding 220ms ease;
}

.drawer-panel .panel-head-split {
  width: 100%;
}

.drawer-panel .panel-head-content {
  width: 100%;
}

.drawer-panel .panel-head::before {
  display: none;
}

.full-panel .panel-head::before {
  display: none;
}

/* Minimize panel header horizontally when drawer is open */
.app-layout.drawer-open .full-panel .panel-head {
  padding: 0;
}

.app-layout.drawer-open .full-panel .panel-head-subtitle {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height 220ms ease, opacity 220ms ease, margin 220ms ease;
}

.full-panel .panel-head-subtitle {
  transition: max-height 220ms ease, opacity 220ms ease, margin 220ms ease;
  max-height: 100px;
}

.app-layout.drawer-open .full-panel .panel-head-title {
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 220ms ease;
}

.full-panel .panel-head-title {
  transition: font-size 220ms ease;
}

.app-layout.drawer-open .full-panel .panel-head-content {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.app-layout.drawer-open .full-panel .panel-head-split {
  gap: 8px;
}

.full-panel .panel-head-split {
  width: auto;
  max-width: 100%;
}

.full-panel .panel-head-content {
  width: auto;
}

.recommendations-drawer {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  transition: flex-basis 220ms ease, width 220ms ease;
  border-left: 1px solid var(--border);
  background: var(--bg);
  will-change: width, flex-basis;
  contain: layout style;
  transform: translateZ(0);
}

.app-layout.drawer-open .content-wrapper .recommendations-drawer,
.app-layout.drawer-open .recommendations-drawer {
  flex-basis: 420px;
  width: 420px;
  overflow: visible;
}

.drawer-inner {
  width: 420px;
  height: 100%;
  padding: 0 18px 18px;
}


.drawer-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.icon-btn {
  height: 38px;
  width: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 1000px) {
  .app-layout.drawer-open .recommendations-drawer,
  .app-layout.drawer-open .content-wrapper .recommendations-drawer { flex-basis: 360px; width: 360px; }
  .drawer-inner { width: 360px; }
}

@media (max-width: 860px) {
  .top-tabs {
    padding: 10px 12px;
    gap: 6px;
  }
  .top-tabs .tab-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
  .stage { padding: 12px; }
  .content-wrapper { flex-direction: column; }
  .recommendations-drawer { border-left: none; border-top: 1px solid var(--border); }
  .app-layout.drawer-open .recommendations-drawer,
  .app-layout.drawer-open .content-wrapper .recommendations-drawer { flex-basis: auto; width: 100%; }
  .drawer-inner { width: 100%; }
}

.kanban {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  padding: 14px 0 10px;
}

.kanban > .panel {
  padding: 0 18px;
}

.kanban > .panel-divider {
  background: var(--border);
  width: 1px;
  height: 100%;
  margin: 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel .lane {
  flex: 1;
}

.panel-head {
  border: none;
  border-radius: 0;
  padding: 18px 20px 8px 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--card);
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
}

.panel-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 113, 227, 0.5) 100%);
}

.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.panel-head-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.panel-head-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.panel-head-subtitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}

.lane{
  padding: 0;
  min-height: 300px;
}

/* Panel lanes - connected to header for unified look */
.essential-panel .lane,
.equipment-panel .lane,
.shopping-panel .lane {
  border: none;
  border-radius: 0;
  padding: 0px;
  background: transparent;
}

.lane.drag-over,
.category-body.drag-over,
.needs-wrap.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Disable drag-over outline for Essential Equipment List column */
.essential-panel .lane.drag-over,
.essential-panel .category-body.drag-over {
  outline: none !important;
}

.lane.drag-over {
  min-height: 100%;
  padding: 40px 20px;
  background: rgba(0, 113, 227, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Disable drag-over styles for Essential Equipment List column */
.essential-panel .lane.drag-over {
  outline: none !important;
  background: transparent !important;
  padding: 12px 18px 18px !important;
  display: block !important;
}

.essential-panel .lane.drag-over::before {
  display: none !important;
}

.lane.drag-over::before {
  content: "Drop items here to create a category";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.7;
}

.dragging{
  opacity: 0.55;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f5f5f5!important;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px -1px 0 -1px;
}

.essential-category {
  margin-bottom: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  width: 100%;
}

.essential-category:last-child {
  margin-bottom: 0;
}

.essential-category .category-head {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 12px;
  cursor: pointer;
}

.essential-category .chevron{
  display:inline-block;
  width: 18px;
  margin-right: 6px;
  font-size: 12px;
}

.essential-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-top: 10px;
}


.essential-body.collapsed{
  display:none;
}

.essential-card{
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  margin-bottom: 8px;
}

.essential-card:last-child {
  margin-bottom: 0;
}

.essential-card:active{
  cursor: grabbing;
}

.essential-card-title{
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}


/* Make the right panel feel like the Shopping Cart card */
.shopping-panel {
  position: relative;
}

/* --------------------------------------------------------------------
   Category blocks (owned + shopping)
-------------------------------------------------------------------- */
.category-block {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  overflow: hidden;
}

/* Essential categories - no border, seamless within lane */
.essential-panel .category-block,
.essential-panel .essential-category {
  border: none;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: none;
}

/* Equipment and shopping panel categories - seamless within lane */
.equipment-panel .category-block,
.shopping-panel .category-block {
  border: none;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: none;
  margin-top: 10px;
}

.equipment-panel .category-block:first-child,
.shopping-panel .category-block:first-child {
  margin-top: 0;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Equipment and shopping panel category headers - seamless */
.equipment-panel .category-header,
.shopping-panel .category-header {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

/* Shopping cart gets the blue header */
.shopping-section .category-header {
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.10), rgba(0, 113, 227, 0.04));
}

.category-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 900;
}

.chevron {
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform 200ms ease;
}

.chevron.collapsed {
  transform: rotate(-90deg);
}

.delete-cat,
.category-del {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
}

.delete-cat:hover,
.category-del:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

.category-body {
  min-height: 36px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  transition: background 0.2s;
}

/* Equipment and shopping panel category bodies - seamless */
.equipment-panel .category-body,
.shopping-panel .category-body,
.essential-panel .category-body {
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

.category-body.drag-over {
  background: #eef3ff;
  border: 2px dashed var(--accent);
}

.category-body.collapsed { display: none; }

/* --------------------------------------------------------------------
   Items
-------------------------------------------------------------------- */
.item-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}



/* Inventory cards (My Equipment Inventory) */
.inventory-card {
  padding: 10px 12px;
}

.inv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inv-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.inv-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-title-edit {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.inv-card-remove,
button.inv-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.inv-card-remove:hover,
button.inv-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}


.inv-card-fields {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 12px;
}

.inv-field {
  min-width: 0;
}

.inv-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.inv-field input[type="number"],
.inv-field select {
  width: 90%!important;
  height: 38px!important;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Airtable-style colored badges for condition select */
.inv-condition-select {
  height: 26px !important;
  padding: 0px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Default condition colors */
.inv-condition-select.condition-like-new {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.inv-condition-select.condition-fair {
  background: #fff3e0 !important;
  color: #e65100 !important;
}

.inv-condition-select.condition-needs-replacing {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* Handle custom conditions with a default color */
.inv-condition-select:not(.condition-like-new):not(.condition-fair):not(.condition-needs-replacing) {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.label-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

/* Template compact row (name + Have/Need/Remove pills) */
.item-row-template-compact {
  grid-template-columns: 1fr auto;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.drag-handle {
  opacity: 0.25;
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 8px;
}

.drag-handle:hover {
  opacity: 0.55;
  background: rgba(0,0,0,0.04);
}

.item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs inside item rows */
.item-row input[type="number"],
.item-row select {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Pills */
.status-pill-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.status-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}

.status-pill:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.status-pill:active { transform: translateY(0); }

/* When JS toggles .active */
.status-pill.active {
  background: var(--accent);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Remove button */
.remove {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255,59,48,0.28);
}

.remove:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------
   Shopping cart - Kanban Card Style
-------------------------------------------------------------------- */
.shopping-section { margin-top: 0; }

/* Card grid layout */
.needs-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  margin: 0;
}

/* Shopping card */
.shopping-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
    width: 96% !important;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 160ms ease, transform 120ms ease;
}

.shopping-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.shopping-card.dragging {
  opacity: 0.55;
}

/* Top row: Product name + Remove button */
.shopping-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0px;
}

.shopping-card-product-name {
  font-size: 12px;
  color: var(--text);
  padding: 0px 0;
  word-break: break-word;
  min-height: 20px;
  line-height: 1.3;
}

.shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.shopping-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

/* Middle row: Type/Item# + Equipment Name */
.shopping-card-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopping-card-type-section,
.shopping-card-equipment-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

button.toggle-btn.active {
  border: none;
  border-radius: none;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

select.shopping-card-type-select.type-standard {
  border: none !important;
}

.shopping-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:18px
}

.shopping-card-type-select {
  width: 100%;
  height: 32px;
  padding: 0px 18px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  background: #f0f0f0;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}

.shopping-card-type-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Airtable-style colored badges for each type */
.shopping-card-type-select.type-standard {
  background: #e3f2fd;
  color: #1976d2;
}

.shopping-card-type-select.type-deluxe {
  background: #f3e5f5;
  color: #7b1fa2;
}

.shopping-card-type-select.type-premium {
  background: #fff3e0;
  color: #e65100;
}

.shopping-card-type-select.type-other {
  background: #f5f5f5;
  color: #616161;
}

.shopping-card-item-number-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.shopping-card-item-number-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shopping-card-sku-label {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  min-height: 20px;
}

.shopping-card-item-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-item-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Unit price wrapper with $ prefix */
.shopping-card-unit-price-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.shopping-card-dollar-prefix {
  position: absolute;
  left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.shopping-card-unit-price-wrapper .shopping-card-item-input {
  padding-left: 30px!important;
}

/* Hide spinner arrows for number inputs when used as unit price */
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-inner-spin-button,
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.shopping-card-unit-price-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.shopping-card-equipment-name {
  font-size: 0.9rem;
  color: var(--text);
  padding: 6px 0;
  word-break: break-word;
  min-height: 20px;
}

.shopping-card-equipment-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-equipment-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
}

/* Bottom row: Item #, QTY, and Extended Price on same line */
.shopping-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
  align-items: start;
}

.shopping-card-equipment-name-top {
    font-weight: 800;
}

.shopping-card-item-number-section,
.shopping-card-qty-section,
.shopping-card-price-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  flex: 1;
}

/* Shopping card qty input now uses qty-pill-container - see above */
.shopping-card-qty-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  text-align: center;
}

.shopping-card-qty-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Override for shopping card qty pills - smaller height */
.shopping-card-qty-section .qty-pill-container {
  height: 32px;
}

.shopping-card-qty-section .qty-pill-input {
  font-size: 0.92rem;
  padding: 0 12px;
}

.shopping-card-qty-section .qty-pill-plus {
  width: 32px;
  font-size: 1rem;
}

.shopping-card-qty-section .qty-pill-separator {
  height: 20px;
}

.shopping-card-extended-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding: 6px 0;
  min-height: 20px;
}

/* Total price container for Equipment Needs List */
.needs-total-container {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.needs-total-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.needs-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

/* Legacy shopping row styles (kept for backwards compatibility if needed) */
.shopping-header-row {
  display: none; /* Hidden for card layout */
}

.shopping-row {
  display: none; /* Hidden for card layout */
}

.shopping-sku-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.shopping-product-label {
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text);
}

.shopping-product-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.shopping-product-label a:hover { text-decoration: underline; }

.shopping-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.shopping-select {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.92);
  max-width: 140px;
}

.shopping-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-item-number { flex: 1; min-width: 0; }
.shopping-qty { max-width: 90px; }
.shopping-price { max-width: 120px; }

.shopping-owned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: 1fr;
  }

  .header-fields {
    grid-template-columns: 1fr 1fr;
  }

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

  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px 1fr 90px;
  }
}

@media (max-width: 680px) {
  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px;
  }

  .type-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .btn.primary#addBtn {
    grid-column: 1 / -1;
  }

  .item-row,
  .label-row {
    grid-template-columns: 1fr 60px 1fr 44px;
  }

  .item-row-template-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .status-pill-group { justify-content: flex-start; }
}

/* Subtle scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }


.notes-toggle {
  display: inline-flex;
  align-items: center;
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.comments-area a, .page-content a {
    text-decoration: auto!important;
}



.notes-toggle:hover {
  color: #0051a2;
  text-decoration: none;
}

.notes-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.notes-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: #0071e3;
  background: #fff;
}

.notes-textarea::placeholder {
  color: #999;
}


/* --------------------------------------------------------------------
   Read-only mode (view link)
   - Forces the UI to look the same but removes all editing affordances
-------------------------------------------------------------------- */
.equipment-readonly #saveBtn,
.equipment-readonly #addBtn,
.equipment-readonly #addCategoryBtn,
.equipment-readonly .add-item-container,
.equipment-readonly .add-category-wrapper,
.equipment-readonly .delete-cat,
.equipment-readonly .category-del,
.equipment-readonly .inv-card-remove,
.equipment-readonly .shopping-card-remove,
.equipment-readonly .remove,
.equipment-readonly .actions,
.equipment-readonly .drag-handle,
.equipment-readonly .add-category-btn,
.equipment-readonly .add-category-dropdown {
  display: none !important;
}

/* Make any remaining form controls look like plain text and non-interactive */
.equipment-readonly input,
.equipment-readonly textarea,
.equipment-readonly select {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--text) !important;
}

/* Remove select arrow / native styling in read-only */
.equipment-readonly select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Make pills and category headers not look clickable */
.equipment-readonly .status-pill {
  pointer-events: none !important;
  cursor: default !important;
}
.equipment-readonly .toggle-btn {
  pointer-events: none !important;
  cursor: default !important;
}

/* --------------------------------------------------------------------
   Make a Copy Banner (Read-Only Mode)
-------------------------------------------------------------------- */
.make-copy-banner {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #001f3f;
  color: #fff;
  padding: 32px 24px;
  margin: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 280px;
  max-width: 320px;
}

.make-copy-banner.highlight {
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.4);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.4);
  }
  50% {
    box-shadow: 0 6px 24px rgba(0, 113, 227, 0.6);
  }
}

.make-copy-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.make-copy-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.make-copy-text strong {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.make-copy-text span {
  font-size: 1.1rem;
  opacity: 0.95;
  line-height: 1.5;
  color: #fff;
}

.make-copy-btn {
  background: #fff !important;
  color: #001f3f !important;
  border: 2px solid #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  height: auto !important;
  white-space: nowrap;
  transition: all 160ms ease;
  width: 100%;
}

.make-copy-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.make-copy-btn:active {
  transform: translateY(0);
}

.make-copy-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.make-copy-btn i {
  margin-right: 8px;
}

@media (max-width: 768px) {
  .make-copy-banner {
    min-width: 240px;
    max-width: 280px;
    padding: 24px 20px;
  }

  .make-copy-text strong {
    font-size: 1.2rem;
  }

  .make-copy-text span {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------
   Equipment List Manager — Apple-ish UI + Two-Column Layout
   - Equipment List (left) and Shopping Cart (right) side-by-side
   - "Uncategorized" is hidden in JS when empty
-------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-soft-2: rgba(0, 113, 227, 0.06);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.14);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --shadow-sm: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 2px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(0, 113, 227, 0.20);
}

* { box-sizing: border-box; }

/* Override any external WordPress/theme styles that interfere with inputs */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 5px 18px !important;
  height: 38px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Header */
header {
  padding: 16px 18px;

}

.page-header {
  text-align: left;
  position: relative;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.2;
  flex-shrink: 0;
}

.heading-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Share Button */
.share-button-wrapper {
  position: relative;  /* Ensure this is relative for dropdown positioning */
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.load-list-wrapper {
  position: relative;
}

.share-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.share-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-dropdown,
#settingsDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 1000;
  overflow: visible;
  display: none;
}

.share-dropdown.open,
#settingsDropdown.open {
  display: block !important;
}

.share-dropdown-item,
#settingsDropdown .share-dropdown-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-dropdown-item:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.share-dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-bottom: none;
}

.share-dropdown-item.has-submenu {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.share-dropdown-item.has-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.share-dropdown-submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.share-dropdown-submenu .share-dropdown-item {
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
}

.share-dropdown-submenu .share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item.has-submenu:hover .share-dropdown-submenu,
.share-dropdown-submenu:hover {
  display: block;
}

.share-dropdown-item.has-submenu:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item i,
.share-dropdown-item img {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.share-dropdown-item:hover i {
  color: var(--text);
}

/* Responsive adjustments for Share button */
@media (max-width: 768px) {
  .share-button-wrapper {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .share-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.heading-sub {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-sub a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.heading-sub a:hover {
  text-decoration: underline;
}

.link-row { margin-top: 6px; }
.link-row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.link-row a:hover { text-decoration: underline; }

/* Header Section */
.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.header-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.header-row:first-child {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-row:last-child {
  grid-template-columns: 1fr auto auto auto;
}

.header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.last-updated-display {
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

#moreDetailsBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  width: 175px;
  justify-content: center;
}

#moreDetailsBtn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
}

#moreDetailsBtn i {
  font-size: 0.9rem;
}

#moreDetailsChevron {
  transition: transform 200ms ease;
}

.more-details-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.more-details-content .notes-textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 100px;
}

.more-details-content .notes-textarea:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  background: #fff;
  box-shadow: var(--ring);
}

.more-details-content .notes-textarea::placeholder {
  color: var(--muted);
}

.header-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

button.toggle-btn{
border: none;
border-radius: 45px;
color: black;
display: inline-block;
font-size: 1rem;
font-weight: 400;
padding: 0px 20px;
text-align: center;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;}

button.toggle-btn.active {
  border: none;
  border-radius: 45px;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.header-field.header-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.header-field.header-button .btn {
  margin-bottom: 0;
}

.notes-section {
  margin-top: 0px;
  padding-top: 0px;
  border: none;
}

.header-field #newItemQty {
  width: 100%;
  max-width: 100px;
  text-align: center;
}

.header-field .type-toggle {
  width: 100%;
  max-width: 285px;
}

input[type="text"],
input[type="number"],
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Buttons */
.btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn.primary {
  background: var(--accent);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

/* Icon actions */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn.primary {
  background: rgba(0,0,0,0.04);
}

/* Add item area */
.add-item-container {
  padding: 14px 18px 6px;
}

.toolbar-labels {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 2px 6px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  align-items: center;
}

#newItemQty { width: 90px; text-align: center; }

.type-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fbfbfd;
  width: 100%;
  position: relative;
}

.header-field .type-toggle {
  margin-top: 0;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toggle-btn.active {
  background: #e8f5e9;
  color: var(--text);
}

.toggle-btn:hover {
  background: #15489e !important;
  color: #fff !important;
}

.toggle-btn.active:hover {
  background: #15489e !important;
  color: #fff !important;
}

/* Add Category - Plus button with dropdown */
.add-category-wrapper {
  position: relative;
}

#essentialTemplateBtn {
  font-size: 20px;
}

#essentialTemplateBtn i {
  font-size: 20px;
}



.add-category-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 10000;
  overflow: visible;
  white-space: nowrap;
}



.dropdown-item:hover {
  background: #e5e5e5;
}

.dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --------------------------------------------------------------------
   Two Column Layout
-------------------------------------------------------------------- */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  padding: 14px 0 10px;
}

.kanban > .panel {
  padding: 0 18px;
}

.kanban > .panel-divider {
  background: var(--border);
  width: 1px;
  height: 100%;
  margin: 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel .lane {
  flex: 1;
}

.panel-head {
  border: none;
  border-radius: 0;
  padding: 18px 20px 8px 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--card);
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
}

.panel-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 113, 227, 0.5) 100%);
}

.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.panel-head-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.panel-head-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.panel-head-subtitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}

.lane{
  padding: 0;
  min-height: 300px;
}

/* Panel lanes - connected to header for unified look */
.essential-panel .lane,
.equipment-panel .lane,
.shopping-panel .lane {
  border: none;
  border-radius: 0;
  padding: 0px;
  background: transparent;
}

.lane.drag-over,
.category-body.drag-over,
.needs-wrap.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Disable drag-over outline for Essential Equipment List column */
.essential-panel .lane.drag-over,
.essential-panel .category-body.drag-over {
  outline: none !important;
}

.lane.drag-over {
  min-height: 100%;
  padding: 40px 20px;
  background: rgba(0, 113, 227, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Disable drag-over styles for Essential Equipment List column */
.essential-panel .lane.drag-over {
  outline: none !important;
  background: transparent !important;
  padding: 12px 18px 18px !important;
  display: block !important;
}

.essential-panel .lane.drag-over::before {
  display: none !important;
}

.lane.drag-over::before {
  content: "Drop items here to create a category";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.7;
}

.dragging{
  opacity: 0.55;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f5f5f5;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px -1px 0 -1px;
}

.essential-category {
  margin-bottom: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  width: 100%;
}

.essential-category:last-child {
  margin-bottom: 0;
}

.essential-category .category-head {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 12px;
  cursor: pointer;
}

.essential-category .chevron{
  display:inline-block;
  width: 18px;
  margin-right: 6px;
  font-size: 12px;
}

.essential-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-top: 10px;
}


.essential-body.collapsed{
  display:none;
}

.essential-card{
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  margin-bottom: 8px;
}

.essential-card:last-child {
  margin-bottom: 0;
}

.essential-card:active{
  cursor: grabbing;
}

.essential-card-title{
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}


/* Make the right panel feel like the Shopping Cart card */
.shopping-panel {
  position: relative;
}


/* --------------------------------------------------------------------
   Items
-------------------------------------------------------------------- */
.item-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}



/* Inventory cards (My Equipment Inventory) */
.inventory-card {
  padding: 10px 12px;
}

.inv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inv-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.inv-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-title-edit {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.inv-card-remove,
button.inv-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.inv-card-remove:hover,
button.inv-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}


.inv-card-fields {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 12px;
}

.inv-field {
  min-width: 0;
}

.inv-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.inv-field input[type="number"],
.inv-field select {
  width: 90%!important;
  height: 38px!important;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Airtable-style colored badges for condition select */
.inv-condition-select {
  height: 26px !important;
  padding: 0px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Default condition colors */
.inv-condition-select.condition-like-new {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.inv-condition-select.condition-fair {
  background: #fff3e0 !important;
  color: #e65100 !important;
}

.inv-condition-select.condition-needs-replacing {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* Handle custom conditions with a default color */
.inv-condition-select:not(.condition-like-new):not(.condition-fair):not(.condition-needs-replacing) {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.label-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

/* Template compact row (name + Have/Need/Remove pills) */
.item-row-template-compact {
  grid-template-columns: 1fr auto;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.drag-handle {
  opacity: 0.25;
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 8px;
}

.drag-handle:hover {
  opacity: 0.55;
  background: rgba(0,0,0,0.04);
}

.item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs inside item rows */
.item-row input[type="number"],
.item-row select {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Pills */
.status-pill-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.status-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}

.status-pill:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.status-pill:active { transform: translateY(0); }

/* When JS toggles .active */
.status-pill.active {
  background: var(--accent);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Remove button */
.remove {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255,59,48,0.28);
}

.remove:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------
   Shopping cart - Kanban Card Style
-------------------------------------------------------------------- */
.shopping-section { margin-top: 0; }

.shopping-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.shopping-card.dragging {
  opacity: 0.55;
}

/* Top row: Product name + Remove button */
.shopping-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0px;
}

.shopping-card-product-name {
  font-size: 12px;
  color: var(--text);
  padding: 0px 0;
  word-break: break-word;
  min-height: 20px;
  line-height: 1.3;
}

.shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.shopping-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

/* Middle row: Type/Item# + Equipment Name */
.shopping-card-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopping-card-type-section,
.shopping-card-equipment-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

button.toggle-btn.active {
  border: none;
  border-radius: none;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

select.shopping-card-type-select.type-standard {
  border: none !important;
}

.shopping-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:18px
}

.shopping-card-type-select {
  width: 100%;
  height: 32px;
  padding: 0px 18px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  background: #f0f0f0;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}

.shopping-card-type-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Airtable-style colored badges for each type */
.shopping-card-type-select.type-standard {
  background: #e3f2fd;
  color: #1976d2;
}

.shopping-card-type-select.type-deluxe {
  background: #f3e5f5;
  color: #7b1fa2;
}

.shopping-card-type-select.type-premium {
  background: #fff3e0;
  color: #e65100;
}

.shopping-card-type-select.type-other {
  background: #f5f5f5;
  color: #616161;
}

.shopping-card-item-number-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.shopping-card-item-number-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shopping-card-sku-label {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  min-height: 20px;
}

.shopping-card-item-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-item-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Unit price wrapper with $ prefix */
.shopping-card-unit-price-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.shopping-card-dollar-prefix {
  position: absolute;
  left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.shopping-card-unit-price-wrapper .shopping-card-item-input {
  padding-left: 30px!important;
}

/* Hide spinner arrows for number inputs when used as unit price */
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-inner-spin-button,
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.shopping-card-unit-price-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.shopping-card-equipment-name {
  font-size: 0.9rem;
  color: var(--text);
  padding: 6px 0;
  word-break: break-word;
  min-height: 20px;
}

.shopping-card-equipment-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-equipment-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
}

/* Bottom row: Item #, QTY, and Extended Price on same line */
.shopping-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
  align-items: start;
}

.shopping-card-equipment-name-top {
    font-weight: 800;
}

.shopping-card-item-number-section,
.shopping-card-qty-section,
.shopping-card-price-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  flex: 1;
}

/* Shopping card qty input now uses qty-pill-container - see above */
.shopping-card-qty-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  text-align: center;
}

.shopping-card-qty-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Override for shopping card qty pills - smaller height */
.shopping-card-qty-section .qty-pill-container {
  height: 32px;
}

.shopping-card-qty-section .qty-pill-input {
  font-size: 0.92rem;
  padding: 0 12px;
}

.shopping-card-qty-section .qty-pill-plus {
  width: 32px;
  font-size: 1rem;
}

.shopping-card-qty-section .qty-pill-separator {
  height: 20px;
}

.shopping-card-extended-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding: 6px 0;
  min-height: 20px;
}

/* Total price container for Equipment Needs List */
.needs-total-container {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.needs-total-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.needs-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

/* Legacy shopping row styles (kept for backwards compatibility if needed) */
.shopping-header-row {
  display: none; /* Hidden for card layout */
}

.shopping-row {
  display: none; /* Hidden for card layout */
}

.shopping-sku-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.shopping-product-label {
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text);
}

.shopping-product-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.shopping-product-label a:hover { text-decoration: underline; }

.shopping-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.shopping-select {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.92);
  max-width: 140px;
}

.shopping-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-item-number { flex: 1; min-width: 0; }
.shopping-qty { max-width: 90px; }
.shopping-price { max-width: 120px; }

.shopping-owned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: 1fr;
  }

  .header-fields {
    grid-template-columns: 1fr 1fr;
  }

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

  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px 1fr 90px;
  }
}

@media (max-width: 680px) {
  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px;
  }

  .type-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .btn.primary#addBtn {
    grid-column: 1 / -1;
  }

  .item-row,
  .label-row {
    grid-template-columns: 1fr 60px 1fr 44px;
  }

  .item-row-template-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .status-pill-group { justify-content: flex-start; }
}

/* Subtle scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }


.notes-toggle {
  display: inline-flex;
  align-items: center;
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.comments-area a, .page-content a {
    text-decoration: auto!important;
}



.notes-toggle:hover {
  color: #0051a2;
  text-decoration: none;
}

.notes-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.notes-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: #0071e3;
  background: #fff;
}

.notes-textarea::placeholder {
  color: #999;
}


/* --------------------------------------------------------------------
   Read-only mode (view link)
   - Forces the UI to look the same but removes all editing affordances
-------------------------------------------------------------------- */
.equipment-readonly #saveBtn,
.equipment-readonly #addBtn,
.equipment-readonly #addCategoryBtn,
.equipment-readonly .add-item-container,
.equipment-readonly .add-category-wrapper,
.equipment-readonly .delete-cat,
.equipment-readonly .category-del,
.equipment-readonly .inv-card-remove,
.equipment-readonly .shopping-card-remove,
.equipment-readonly .remove,
.equipment-readonly .actions,
.equipment-readonly .drag-handle,
.equipment-readonly .add-category-btn,
.equipment-readonly .add-category-dropdown {
  display: none !important;
}

/* Make any remaining form controls look like plain text and non-interactive */
.equipment-readonly input,
.equipment-readonly textarea,
.equipment-readonly select {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--text) !important;
}

/* Remove select arrow / native styling in read-only */
.equipment-readonly select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Make pills and category headers not look clickable */
.equipment-readonly .status-pill {
  pointer-events: none !important;
  cursor: default !important;
}
.equipment-readonly .toggle-btn {
  pointer-events: none !important;
  cursor: default !important;
}


/* --------------------------------------------------------------------
   Equipment List Manager — Apple-ish UI + Two-Column Layout
   - Equipment List (left) and Shopping Cart (right) side-by-side
   - "Uncategorized" is hidden in JS when empty
-------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-soft-2: rgba(0, 113, 227, 0.06);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.14);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --shadow-sm: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 2px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(0, 113, 227, 0.20);
}

* { box-sizing: border-box; }

/* Override any external WordPress/theme styles that interfere with inputs */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 5px 18px !important;
  height: 38px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Header */
header {
  padding: 16px 18px;

}

.page-header {
  text-align: left;
  position: relative;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.2;
  flex-shrink: 0;
}

.heading-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Share Button */
.share-button-wrapper {
  position: relative;  /* Ensure this is relative for dropdown positioning */
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.load-list-wrapper {
  position: relative;
}

.share-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.share-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-dropdown,
#settingsDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 1000;
  overflow: visible;
  display: none;
}

.share-dropdown.open,
#settingsDropdown.open {
  display: block !important;
}

.share-dropdown-item,
#settingsDropdown .share-dropdown-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-dropdown-item:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.share-dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-bottom: none;
}

.share-dropdown-item.has-submenu {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.share-dropdown-item.has-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.share-dropdown-submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.share-dropdown-submenu .share-dropdown-item {
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
}

.share-dropdown-submenu .share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item.has-submenu:hover .share-dropdown-submenu,
.share-dropdown-submenu:hover {
  display: block;
}

.share-dropdown-item.has-submenu:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item i,
.share-dropdown-item img {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.share-dropdown-item:hover i {
  color: var(--text);
}

/* Responsive adjustments for Share button */
@media (max-width: 768px) {
  .share-button-wrapper {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .share-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.heading-sub {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-sub a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.heading-sub a:hover {
  text-decoration: underline;
}

.link-row { margin-top: 6px; }
.link-row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.link-row a:hover { text-decoration: underline; }

/* Header Section */
.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.header-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.header-row:first-child {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-row:last-child {
  grid-template-columns: 1fr auto auto auto;
}

.header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.last-updated-display {
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

#moreDetailsBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  width: 175px;
  justify-content: center;
}

#moreDetailsBtn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
}

#moreDetailsBtn i {
  font-size: 0.9rem;
}

#moreDetailsChevron {
  transition: transform 200ms ease;
}

.more-details-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.more-details-content .notes-textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 100px;
}

.more-details-content .notes-textarea:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  background: #fff;
  box-shadow: var(--ring);
}

.more-details-content .notes-textarea::placeholder {
  color: var(--muted);
}

.header-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

button.toggle-btn{
border: none;
border-radius: 45px;
color: black;
display: inline-block;
font-size: 1rem;
font-weight: 400;
padding: 0px 20px;
text-align: center;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;}

button.toggle-btn.active {
  border: none;
  border-radius: 45px;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.header-field.header-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.header-field.header-button .btn {
  margin-bottom: 0;
}

.notes-section {
  margin-top: 0px;
  padding-top: 0px;
  border: none;
}

.header-field #newItemQty {
  width: 100%;
  max-width: 100px;
  text-align: center;
}

.header-field .type-toggle {
  width: 100%;
  max-width: 285px;
}

input[type="text"],
input[type="number"],
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Buttons */
.btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn.primary {
  background: var(--accent);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

/* Icon actions */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn.primary {
  background: rgba(0,0,0,0.04);
}

/* Add item area */
.add-item-container {
  padding: 14px 18px 6px;
}

.toolbar-labels {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 2px 6px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  align-items: center;
}

#newItemQty { width: 90px; text-align: center; }

.type-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fbfbfd;
  width: 100%;
  position: relative;
}

.header-field .type-toggle {
  margin-top: 0;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toggle-btn.active {
  background: #e8f5e9;
  color: var(--text);
}

.toggle-btn:hover {
  background: #15489e !important;
  color: #fff !important;
}

.toggle-btn.active:hover {
  background: #15489e !important;
  color: #fff !important;
}

/* Add Category - Plus button with dropdown */
.add-category-wrapper {
  position: relative;
}

#essentialTemplateBtn {
  font-size: 20px;
}

#essentialTemplateBtn i {
  font-size: 20px;
}



.add-category-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 10000;
  overflow: visible;
  white-space: nowrap;
}



.dropdown-item:hover {
  background: #e5e5e5;
}

.dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --------------------------------------------------------------------
   Two Column Layout
-------------------------------------------------------------------- */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  padding: 14px 0 10px;
}

.kanban > .panel {
  padding: 0 18px;
}

.kanban > .panel-divider {
  background: var(--border);
  width: 1px;
  height: 100%;
  margin: 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel .lane {
  flex: 1;
}

.panel-head {
  border: none;
  border-radius: 0;
  padding: 18px 20px 8px 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--card);
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
}

.panel-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 113, 227, 0.5) 100%);
}

.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.panel-head-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.panel-head-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.panel-head-subtitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}

.lane{
  padding: 0;
  min-height: 300px;
}

/* Panel lanes - connected to header for unified look */
.essential-panel .lane,
.equipment-panel .lane,
.shopping-panel .lane {
  border: none;
  border-radius: 0;
  padding: 0px;
  background: transparent;
}

.lane.drag-over,
.category-body.drag-over,
.needs-wrap.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Disable drag-over outline for Essential Equipment List column */
.essential-panel .lane.drag-over,
.essential-panel .category-body.drag-over {
  outline: none !important;
}

.lane.drag-over {
  min-height: 100%;
  padding: 40px 20px;
  background: rgba(0, 113, 227, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Disable drag-over styles for Essential Equipment List column */
.essential-panel .lane.drag-over {
  outline: none !important;
  background: transparent !important;
  padding: 12px 18px 18px !important;
  display: block !important;
}

.essential-panel .lane.drag-over::before {
  display: none !important;
}

.lane.drag-over::before {
  content: "Drop items here to create a category";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.7;
}

.dragging{
  opacity: 0.55;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f5f5f5;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px -1px 0 -1px;
}

.essential-category {
  margin-bottom: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  width: 100%;
}

.essential-category:last-child {
  margin-bottom: 0;
}

.essential-category .category-head {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 12px;
  cursor: pointer;
}

.essential-category .chevron{
  display:inline-block;
  width: 18px;
  margin-right: 6px;
  font-size: 12px;
}

.essential-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-top: 10px;
}


.essential-body.collapsed{
  display:none;
}

.essential-card{
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  margin-bottom: 8px;
}

.essential-card:last-child {
  margin-bottom: 0;
}

.essential-card:active{
  cursor: grabbing;
}

.essential-card-title{
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}


/* Make the right panel feel like the Shopping Cart card */
.shopping-panel {
  position: relative;
}


/* --------------------------------------------------------------------
   Items
-------------------------------------------------------------------- */
.item-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}



/* Inventory cards (My Equipment Inventory) */
.inventory-card {
  padding: 10px 12px;
}

.inv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inv-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.inv-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button#addNeedsCategoryBtn{
  border: none;
  font-size: 32px!important;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
font-weight: 400 }

button#addCategoryBtn{
  border: none;
  font-size: 32px;
  font-weight: 400;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
}
.inv-title-edit {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.inv-card-remove,
button.inv-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.inv-card-remove:hover,
button.inv-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}


.inv-card-fields {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 12px;
}

.inv-field {
  min-width: 0;
}

.inv-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}


/* Airtable-style colored badges for condition select */
.inv-condition-select {
  height: 26px !important;
  padding: 0px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Default condition colors */
.inv-condition-select.condition-like-new {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.inv-condition-select.condition-fair {
  background: #fff3e0 !important;
  color: #e65100 !important;
}

.inv-condition-select.condition-needs-replacing {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* Handle custom conditions with a default color */
.inv-condition-select:not(.condition-like-new):not(.condition-fair):not(.condition-needs-replacing) {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.label-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

/* Template compact row (name + Have/Need/Remove pills) */
.item-row-template-compact {
  grid-template-columns: 1fr auto;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.drag-handle {
  opacity: 0.25;
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 8px;
}

.drag-handle:hover {
  opacity: 0.55;
  background: rgba(0,0,0,0.04);
}

.item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs inside item rows */
.item-row input[type="number"],
.item-row select {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Pills */
.status-pill-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.status-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}

.status-pill:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.status-pill:active { transform: translateY(0); }

/* When JS toggles .active */
.status-pill.active {
  background: var(--accent);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Remove button */
.remove {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255,59,48,0.28);
}

.remove:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------
   Shopping cart - Kanban Card Style
-------------------------------------------------------------------- */
.shopping-section { margin-top: 0; }

.shopping-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.shopping-card.dragging {
  opacity: 0.55;
}

/* Top row: Product name + Remove button */
.shopping-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0px;
}

.shopping-card-product-name {
  font-size: 12px;
  color: var(--text);
  padding: 0px 0;
  word-break: break-word;
  min-height: 20px;
  line-height: 1.3;
}

.shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.shopping-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

/* Middle row: Type/Item# + Equipment Name */
.shopping-card-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopping-card-type-section,
.shopping-card-equipment-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

button.toggle-btn.active {
  border: none;
  border-radius: none;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

select.shopping-card-type-select.type-standard {
  border: none !important;
}

.shopping-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:18px
}

.shopping-card-type-select {
  width: 100%;
  height: 32px;
  padding: 0px 18px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  background: #f0f0f0;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}

.shopping-card-type-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Airtable-style colored badges for each type */
.shopping-card-type-select.type-standard {
  background: #e3f2fd;
  color: #1976d2;
}

.shopping-card-type-select.type-deluxe {
  background: #f3e5f5;
  color: #7b1fa2;
}

.shopping-card-type-select.type-premium {
  background: #fff3e0;
  color: #e65100;
}

.shopping-card-type-select.type-other {
  background: #f5f5f5;
  color: #616161;
}

.shopping-card-item-number-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.shopping-card-item-number-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shopping-card-sku-label {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  min-height: 20px;
}

.shopping-card-item-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-item-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Unit price wrapper with $ prefix */
.shopping-card-unit-price-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.shopping-card-dollar-prefix {
  position: absolute;
  left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.shopping-card-unit-price-wrapper .shopping-card-item-input {
  padding-left: 30px!important;
}

/* Hide spinner arrows for number inputs when used as unit price */
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-inner-spin-button,
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.shopping-card-unit-price-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.shopping-card-equipment-name {
  font-size: 0.9rem;
  color: var(--text);
  padding: 6px 0;
  word-break: break-word;
  min-height: 20px;
}

.shopping-card-equipment-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-equipment-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
}

/* Bottom row: Item #, QTY, and Extended Price on same line */
.shopping-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
  align-items: start;
}

.shopping-card-equipment-name-top {
    font-weight: 800;
}

.shopping-card-item-number-section,
.shopping-card-qty-section,
.shopping-card-price-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  flex: 1;
}

/* Shopping card qty input now uses qty-pill-container - see above */
.shopping-card-qty-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  text-align: center;
}

.shopping-card-qty-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Override for shopping card qty pills - smaller height */
.shopping-card-qty-section .qty-pill-container {
  height: 32px;
}

.shopping-card-qty-section .qty-pill-input {
  font-size: 0.92rem;
  padding: 0 12px;
}

.shopping-card-qty-section .qty-pill-plus {
  width: 32px;
  font-size: 1rem;
}

.shopping-card-qty-section .qty-pill-separator {
  height: 20px;
}

.shopping-card-extended-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding: 6px 0;
  min-height: 20px;
}

/* Total price container for Equipment Needs List */
.needs-total-container {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.needs-total-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.needs-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

/* Legacy shopping row styles (kept for backwards compatibility if needed) */
.shopping-header-row {
  display: none; /* Hidden for card layout */
}

.shopping-row {
  display: none; /* Hidden for card layout */
}

.shopping-sku-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.shopping-product-label {
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text);
}

.shopping-product-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.shopping-product-label a:hover { text-decoration: underline; }

.shopping-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.shopping-select {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.92);
  max-width: 140px;
}

.shopping-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-item-number { flex: 1; min-width: 0; }
.shopping-qty { max-width: 90px; }
.shopping-price { max-width: 120px; }

.shopping-owned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: 1fr;
  }

  .header-fields {
    grid-template-columns: 1fr 1fr;
  }

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

  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px 1fr 90px;
  }
}

@media (max-width: 680px) {
  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px;
  }

  .type-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .btn.primary#addBtn {
    grid-column: 1 / -1;
  }

  .item-row,
  .label-row {
    grid-template-columns: 1fr 60px 1fr 44px;
  }

  .item-row-template-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .status-pill-group { justify-content: flex-start; }
}

/* Subtle scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }


.notes-toggle {
  display: inline-flex;
  align-items: center;
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.comments-area a, .page-content a {
    text-decoration: auto!important;
}



.notes-toggle:hover {
  color: #0051a2;
  text-decoration: none;
}

.notes-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.notes-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: #0071e3;
  background: #fff;
}

.notes-textarea::placeholder {
  color: #999;
}


/* --------------------------------------------------------------------
   Read-only mode (view link)
   - Forces the UI to look the same but removes all editing affordances
-------------------------------------------------------------------- */
.equipment-readonly #saveBtn,
.equipment-readonly #addBtn,
.equipment-readonly #addCategoryBtn,
.equipment-readonly .add-item-container,
.equipment-readonly .add-category-wrapper,
.equipment-readonly .delete-cat,
.equipment-readonly .category-del,
.equipment-readonly .inv-card-remove,
.equipment-readonly .shopping-card-remove,
.equipment-readonly .remove,
.equipment-readonly .actions,
.equipment-readonly .drag-handle,
.equipment-readonly .add-category-btn,
.equipment-readonly .add-category-dropdown {
  display: none !important;
}

/* Make any remaining form controls look like plain text and non-interactive */
.equipment-readonly input,
.equipment-readonly textarea,
.equipment-readonly select {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--text) !important;
}

/* Remove select arrow / native styling in read-only */
.equipment-readonly select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Make pills and category headers not look clickable */
.equipment-readonly .status-pill {
  pointer-events: none !important;
  cursor: default !important;
}
.equipment-readonly .toggle-btn {
  pointer-events: none !important;
  cursor: default !important;
}


/* --------------------------------------------------------------------
   Equipment List Manager — Apple-ish UI + Two-Column Layout
   - Equipment List (left) and Shopping Cart (right) side-by-side
   - "Uncategorized" is hidden in JS when empty
-------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-soft-2: rgba(0, 113, 227, 0.06);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.14);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --shadow-sm: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 2px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(0, 113, 227, 0.20);
}

* { box-sizing: border-box; }

/* Override any external WordPress/theme styles that interfere with inputs */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 5px 18px !important;
  height: 38px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Header */
header {
  padding: 16px 18px;

}

.page-header {
  text-align: left;
  position: relative;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.2;
  flex-shrink: 0;
}

.heading-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Share Button */
.share-button-wrapper {
  position: relative;  /* Ensure this is relative for dropdown positioning */
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.load-list-wrapper {
  position: relative;
}

.share-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.share-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-dropdown,
#settingsDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 1000;
  overflow: visible;
  display: none;
}

.share-dropdown.open,
#settingsDropdown.open {
  display: block !important;
}

.share-dropdown-item,
#settingsDropdown .share-dropdown-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-dropdown-item:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.share-dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-bottom: none;
}

.share-dropdown-item.has-submenu {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.share-dropdown-item.has-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.share-dropdown-submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.share-dropdown-submenu .share-dropdown-item {
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
}

.share-dropdown-submenu .share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item.has-submenu:hover .share-dropdown-submenu,
.share-dropdown-submenu:hover {
  display: block;
}

.share-dropdown-item.has-submenu:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item i,
.share-dropdown-item img {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.share-dropdown-item:hover i {
  color: var(--text);
}

/* Responsive adjustments for Share button */
@media (max-width: 768px) {
  .share-button-wrapper {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .share-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.heading-sub {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-sub a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.heading-sub a:hover {
  text-decoration: underline;
}

.link-row { margin-top: 6px; }
.link-row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.link-row a:hover { text-decoration: underline; }

/* Header Section */
.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.header-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.header-row:first-child {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-row:last-child {
  grid-template-columns: 1fr auto auto auto;
}

.header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.last-updated-display {
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

#moreDetailsBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  width: 175px;
  justify-content: center;
}

#moreDetailsBtn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
}

#moreDetailsBtn i {
  font-size: 0.9rem;
}

#moreDetailsChevron {
  transition: transform 200ms ease;
}

.more-details-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.more-details-content .notes-textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 100px;
}

.more-details-content .notes-textarea:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  background: #fff;
  box-shadow: var(--ring);
}

.more-details-content .notes-textarea::placeholder {
  color: var(--muted);
}

.header-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

button.toggle-btn{
border: none;
border-radius: 45px;
color: black;
display: inline-block;
font-size: 1rem;
font-weight: 400;
padding: 0px 20px;
text-align: center;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;}

button.toggle-btn.active {
  border: none;
  border-radius: 45px;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.header-field.header-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.header-field.header-button .btn {
  margin-bottom: 0;
}

.notes-section {
  margin-top: 0px;
  padding-top: 0px;
  border: none;
}

.header-field #newItemQty {
  width: 100%;
  max-width: 100px;
  text-align: center;
}

.header-field .type-toggle {
  width: 100%;
  max-width: 285px;
}

input[type="text"],
input[type="number"],
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Buttons */
.btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn.primary {
  background: var(--accent);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

/* Icon actions */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn.primary {
  background: rgba(0,0,0,0.04);
}

/* Add item area */
.add-item-container {
  padding: 14px 18px 6px;
}

.toolbar-labels {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 2px 6px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  align-items: center;
}

#newItemQty { width: 90px; text-align: center; }

.type-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fbfbfd;
  width: 100%;
  position: relative;
}

.header-field .type-toggle {
  margin-top: 0;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toggle-btn.active {
  background: #e8f5e9;
  color: var(--text);
}

.toggle-btn:hover {
  background: #15489e !important;
  color: #fff !important;
}

.toggle-btn.active:hover {
  background: #15489e !important;
  color: #fff !important;
}

/* Add Category - Plus button with dropdown */
.add-category-wrapper {
  position: relative;
}

#essentialTemplateBtn {
  font-size: 20px;
}

#essentialTemplateBtn i {
  font-size: 20px;
}



.add-category-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 10000;
  overflow: visible;
  white-space: nowrap;
}



.dropdown-item:hover {
  background: #e5e5e5;
}

.dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --------------------------------------------------------------------
   Two Column Layout
-------------------------------------------------------------------- */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  padding: 14px 0 10px;
}

.kanban > .panel {
  padding: 0 18px;
}

.kanban > .panel-divider {
  background: var(--border);
  width: 1px;
  height: 100%;
  margin: 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel .lane {
  flex: 1;
}

.panel-head {
  border: none;
  border-radius: 0;
  padding: 18px 20px 8px 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--card);
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
}

.panel-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 113, 227, 0.5) 100%);
}

.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.panel-head-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.panel-head-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.panel-head-subtitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}

.lane{
  padding: 0;
  min-height: 300px;
}

/* Panel lanes - connected to header for unified look */
.essential-panel .lane,
.equipment-panel .lane,
.shopping-panel .lane {
  border: none;
  border-radius: 0;
  padding: 0px;
  background: transparent;
}

.lane.drag-over,
.category-body.drag-over,
.needs-wrap.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Disable drag-over outline for Essential Equipment List column */
.essential-panel .lane.drag-over,
.essential-panel .category-body.drag-over {
  outline: none !important;
}

.lane.drag-over {
  min-height: 100%;
  padding: 40px 20px;
  background: rgba(0, 113, 227, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Disable drag-over styles for Essential Equipment List column */
.essential-panel .lane.drag-over {
  outline: none !important;
  background: transparent !important;
  padding: 12px 18px 18px !important;
  display: block !important;
}

.essential-panel .lane.drag-over::before {
  display: none !important;
}

.lane.drag-over::before {
  content: "Drop items here to create a category";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.7;
}

.dragging{
  opacity: 0.55;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f5f5f5;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px -1px 0 -1px;
}

.essential-category {
  margin-bottom: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  width: 100%;
}

.essential-category:last-child {
  margin-bottom: 0;
}

.essential-category .category-head {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 12px;
  cursor: pointer;
}

.essential-category .chevron{
  display:inline-block;
  width: 18px;
  margin-right: 6px;
  font-size: 12px;
}

.essential-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-top: 10px;
}


.essential-body.collapsed{
  display:none;
}

.essential-card{
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  margin-bottom: 8px;
}

.essential-card:last-child {
  margin-bottom: 0;
}

.essential-card:active{
  cursor: grabbing;
}

.essential-card-title{
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}


/* Make the right panel feel like the Shopping Cart card */
.shopping-panel {
  position: relative;
}


/* --------------------------------------------------------------------
   Items
-------------------------------------------------------------------- */
.item-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}



/* Inventory cards (My Equipment Inventory) */
.inventory-card {
  padding: 10px 12px;
}

.inv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inv-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.inv-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button#addNeedsCategoryBtn{
  border: none;
  font-size: 32px!important;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
font-weight: 400 }

button#addCategoryBtn{
  border: none;
  font-size: 32px;
  font-weight: 400;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
}
.inv-title-edit {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.inv-card-remove,
button.inv-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.inv-card-remove:hover,
button.inv-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}


.inv-card-fields {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 12px;
}

.inv-field {
  min-width: 0;
}

.inv-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}


/* Airtable-style colored badges for condition select */
.inv-condition-select {
  height: 26px !important;
  padding: 0px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Default condition colors */
.inv-condition-select.condition-like-new {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.inv-condition-select.condition-fair {
  background: #fff3e0 !important;
  color: #e65100 !important;
}

.inv-condition-select.condition-needs-replacing {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* Handle custom conditions with a default color */
.inv-condition-select:not(.condition-like-new):not(.condition-fair):not(.condition-needs-replacing) {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.label-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

/* Template compact row (name + Have/Need/Remove pills) */
.item-row-template-compact {
  grid-template-columns: 1fr auto;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.drag-handle {
  opacity: 0.25;
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 8px;
}

.drag-handle:hover {
  opacity: 0.55;
  background: rgba(0,0,0,0.04);
}

.item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs inside item rows */
.item-row input[type="number"],
.item-row select {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Pills */
.status-pill-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.status-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}

.status-pill:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.status-pill:active { transform: translateY(0); }

/* When JS toggles .active */
.status-pill.active {
  background: var(--accent);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Remove button */
.remove {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255,59,48,0.28);
}

.remove:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------
   Shopping cart - Kanban Card Style
-------------------------------------------------------------------- */
.shopping-section { margin-top: 0; }

.shopping-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.shopping-card.dragging {
  opacity: 0.55;
}

/* Top row: Product name + Remove button */
.shopping-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0px;
}

.shopping-card-product-name {
  font-size: 12px;
  color: var(--text);
  padding: 0px 0;
  word-break: break-word;
  min-height: 20px;
  line-height: 1.3;
}

.shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.shopping-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

/* Middle row: Type/Item# + Equipment Name */
.shopping-card-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopping-card-type-section,
.shopping-card-equipment-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

button.toggle-btn.active {
  border: none;
  border-radius: none;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

select.shopping-card-type-select.type-standard {
  border: none !important;
}

.shopping-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:18px
}

.shopping-card-type-select {
  width: 100%;
  height: 32px;
  padding: 0px 18px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  background: #f0f0f0;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}

.shopping-card-type-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Airtable-style colored badges for each type */
.shopping-card-type-select.type-standard {
  background: #e3f2fd;
  color: #1976d2;
}

.shopping-card-type-select.type-deluxe {
  background: #f3e5f5;
  color: #7b1fa2;
}

.shopping-card-type-select.type-premium {
  background: #fff3e0;
  color: #e65100;
}

.shopping-card-type-select.type-other {
  background: #f5f5f5;
  color: #616161;
}

.shopping-card-item-number-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.shopping-card-item-number-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shopping-card-sku-label {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  min-height: 20px;
}

.shopping-card-item-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-item-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Unit price wrapper with $ prefix */
.shopping-card-unit-price-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.shopping-card-dollar-prefix {
  position: absolute;
  left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.shopping-card-unit-price-wrapper .shopping-card-item-input {
  padding-left: 30px!important;
}

/* Hide spinner arrows for number inputs when used as unit price */
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-inner-spin-button,
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.shopping-card-unit-price-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.shopping-card-equipment-name {
  font-size: 0.9rem;
  color: var(--text);
  padding: 6px 0;
  word-break: break-word;
  min-height: 20px;
}

.shopping-card-equipment-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-equipment-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
}

/* Bottom row: Item #, QTY, and Extended Price on same line */
.shopping-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
  align-items: start;
}

.shopping-card-equipment-name-top {
    font-weight: 800;
}

.shopping-card-item-number-section,
.shopping-card-qty-section,
.shopping-card-price-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  flex: 1;
}

/* Shopping card qty input now uses qty-pill-container - see above */
.shopping-card-qty-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  text-align: center;
}

.shopping-card-qty-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

.qty-pill-container {width:70px!important;border: none, important !important;}
/* Override for shopping card qty pills - smaller height */
.shopping-card-qty-section .qty-pill-container {
  height: 32px;;
}

.shopping-card-qty-section .qty-pill-input {
  font-size: 0.92rem;
  padding: 0 12px;
}

.shopping-card-qty-section .qty-pill-plus {
  width: 32px;
  font-size: 1rem;
}

.shopping-card-qty-section .qty-pill-separator {
  height: 20px;
}

.shopping-card-extended-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding: 6px 0;
  min-height: 20px;
}

/* Total price container for Equipment Needs List */
.needs-total-container {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.needs-total-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.needs-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

/* Legacy shopping row styles (kept for backwards compatibility if needed) */
.shopping-header-row {
  display: none; /* Hidden for card layout */
}

.shopping-row {
  display: none; /* Hidden for card layout */
}

.shopping-sku-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.shopping-product-label {
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text);
}

.shopping-product-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.shopping-product-label a:hover { text-decoration: underline; }

.shopping-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.shopping-select {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.92);
  max-width: 140px;
}

.shopping-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-item-number { flex: 1; min-width: 0; }
.shopping-qty { max-width: 90px; }
.shopping-price { max-width: 120px; }

.shopping-owned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: 1fr;
  }

  .header-fields {
    grid-template-columns: 1fr 1fr;
  }

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

  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px 1fr 90px;
  }
}

@media (max-width: 680px) {
  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px;
  }

  .type-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .btn.primary#addBtn {
    grid-column: 1 / -1;
  }

  .item-row,
  .label-row {
    grid-template-columns: 1fr 60px 1fr 44px;
  }

  .item-row-template-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .status-pill-group { justify-content: flex-start; }
}

/* Subtle scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }


.notes-toggle {
  display: inline-flex;
  align-items: center;
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.comments-area a, .page-content a {
    text-decoration: auto!important;
}



.notes-toggle:hover {
  color: #0051a2;
  text-decoration: none;
}

.notes-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.notes-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: #0071e3;
  background: #fff;
}

.notes-textarea::placeholder {
  color: #999;
}


/* --------------------------------------------------------------------
   Read-only mode (view link)
   - Forces the UI to look the same but removes all editing affordances
-------------------------------------------------------------------- */
.equipment-readonly #saveBtn,
.equipment-readonly #addBtn,
.equipment-readonly #addCategoryBtn,
.equipment-readonly .add-item-container,
.equipment-readonly .add-category-wrapper,
.equipment-readonly .delete-cat,
.equipment-readonly .category-del,
.equipment-readonly .inv-card-remove,
.equipment-readonly .shopping-card-remove,
.equipment-readonly .remove,
.equipment-readonly .actions,
.equipment-readonly .drag-handle,
.equipment-readonly .add-category-btn,
.equipment-readonly .add-category-dropdown {
  display: none !important;
}

/* Make any remaining form controls look like plain text and non-interactive */
.equipment-readonly input,
.equipment-readonly textarea,
.equipment-readonly select {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--text) !important;
}

/* Remove select arrow / native styling in read-only */
.equipment-readonly select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Make pills and category headers not look clickable */
.equipment-readonly .status-pill {
  pointer-events: none !important;
  cursor: default !important;
}
.equipment-readonly .toggle-btn {
  pointer-events: none !important;
  cursor: default !important;
}


/* --------------------------------------------------------------------
   Equipment List Manager — Apple-ish UI + Two-Column Layout
   - Equipment List (left) and Shopping Cart (right) side-by-side
   - "Uncategorized" is hidden in JS when empty
-------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-soft-2: rgba(0, 113, 227, 0.06);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.14);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --shadow-sm: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 2px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(0, 113, 227, 0.20);
}

* { box-sizing: border-box; }

/* Override any external WordPress/theme styles that interfere with inputs */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 5px 18px !important;
  height: 38px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Header */
header {
  padding: 16px 18px;

}

.page-header {
  text-align: left;
  position: relative;
  padding: 20px 0 10px;
  margin-bottom: 20px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heading-grade {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: -15px;
}

.heading-main-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.2;
  flex-shrink: 0;
}

.heading-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Share Button */
.share-button-wrapper {
  position: relative;  /* Ensure this is relative for dropdown positioning */
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.load-list-wrapper {
  position: relative;
}

.share-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.share-btn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-dropdown,
#settingsDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 1000;
  overflow: visible;
  display: none;
}

.share-dropdown.open,
#settingsDropdown.open {
  display: block !important;
}

.share-dropdown-item,
#settingsDropdown .share-dropdown-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-dropdown-item:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.share-dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-bottom: none;
}

.share-dropdown-item.has-submenu {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.share-dropdown-item.has-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.share-dropdown-submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0;
  background: white !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.share-dropdown-submenu .share-dropdown-item {
  border-bottom: 1px solid #e5e5e5;
  background: white !important;
}

.share-dropdown-submenu .share-dropdown-item:last-child {
  border-bottom: none;
}

.share-dropdown-item.has-submenu:hover .share-dropdown-submenu,
.share-dropdown-submenu:hover {
  display: block;
}

.share-dropdown-item.has-submenu:hover {
  background: #f5f5f5 !important;
}

.share-dropdown-item i,
.share-dropdown-item img {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.share-dropdown-item:hover i {
  color: var(--text);
}

/* Responsive adjustments for Share button */
@media (max-width: 768px) {
  .share-button-wrapper {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .share-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.heading-sub {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-sub a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.heading-sub a:hover {
  text-decoration: underline;
}

.link-row { margin-top: 6px; }
.link-row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.link-row a:hover { text-decoration: underline; }

/* Header Section */
.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.header-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.header-row:first-child {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.header-row:last-child {
  grid-template-columns: 1fr auto auto auto;
}

.header-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.last-updated-display {
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

#moreDetailsBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  height: 38px;
  padding: 0 14px;
  width: 175px;
  justify-content: center;
}

#moreDetailsBtn:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
}

#moreDetailsBtn i {
  font-size: 0.9rem;
}

#moreDetailsChevron {
  transition: transform 200ms ease;
}

.more-details-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.more-details-content .notes-textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 100px;
}

.more-details-content .notes-textarea:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  background: #fff;
  box-shadow: var(--ring);
}

.more-details-content .notes-textarea::placeholder {
  color: var(--muted);
}

.header-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

button.toggle-btn{
border: none;
border-radius: 45px;
color: black;
display: inline-block;
font-size: 1rem;
font-weight: 400;
padding: 0px 20px;
text-align: center;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;}

button.toggle-btn.active {
  border: none;
  border-radius: 45px;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.header-field.header-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.header-field.header-button .btn {
  margin-bottom: 0;
}

.notes-section {
  margin-top: 0px;
  padding-top: 0px;
  border: none;
}

.header-field #newItemQty {
  width: 100%;
  max-width: 100px;
  text-align: center;
}

.header-field .type-toggle {
  width: 100%;
  max-width: 285px;
}

input[type="text"],
input[type="number"],
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Buttons */
.btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn.primary {
  background: var(--accent);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

/* Icon actions */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-btn.primary {
  background: rgba(0,0,0,0.04);
}

/* Add item area */
.add-item-container {
  padding: 14px 18px 6px;
}

.toolbar-labels {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 2px 6px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 220px 90px;
  gap: 10px;
  align-items: center;
}

#newItemQty { width: 90px; text-align: center; }

.type-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fbfbfd;
  width: 100%;
  position: relative;
}

.header-field .type-toggle {
  margin-top: 0;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toggle-btn.active {
  background: #e8f5e9;
  color: var(--text);
}

.toggle-btn:hover {
  background: #15489e !important;
  color: #fff !important;
}

.toggle-btn.active:hover {
  background: #15489e !important;
  color: #fff !important;
}

/* Add Category - Plus button with dropdown */
.add-category-wrapper {
  position: relative;
}

#essentialTemplateBtn {
  font-size: 20px;
}

#essentialTemplateBtn i {
  font-size: 20px;
}



.add-category-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 10000;
  overflow: visible;
  white-space: nowrap;
}



.dropdown-item:hover {
  background: #e5e5e5;
}

.dropdown-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* --------------------------------------------------------------------
   Two Column Layout
-------------------------------------------------------------------- */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  padding: 14px 0 10px;
}

.kanban > .panel {
  padding: 0 18px;
}

.kanban > .panel-divider {
  background: var(--border);
  width: 1px;
  height: 100%;
  margin: 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel .lane {
  flex: 1;
}

.panel-head {
  border: none;
  border-radius: 0;
  padding: 18px 20px 8px 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--card);
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
}

.panel-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 113, 227, 0.5) 100%);
}

.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.panel-head-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.panel-head-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.panel-head-subtitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}

.lane{
  padding: 0;
  min-height: 300px;
}

/* Panel lanes - connected to header for unified look */
.essential-panel .lane,
.equipment-panel .lane,
.shopping-panel .lane {
  border: none;
  border-radius: 0;
  padding: 0px;
  background: transparent;
}

.lane.drag-over,
.category-body.drag-over,
.needs-wrap.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Disable drag-over outline for Essential Equipment List column */
.essential-panel .lane.drag-over,
.essential-panel .category-body.drag-over {
  outline: none !important;
}

.lane.drag-over {
  min-height: 100%;
  padding: 40px 20px;
  background: rgba(0, 113, 227, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Disable drag-over styles for Essential Equipment List column */
.essential-panel .lane.drag-over {
  outline: none !important;
  background: transparent !important;
  padding: 12px 18px 18px !important;
  display: block !important;
}

.essential-panel .lane.drag-over::before {
  display: none !important;
}

.lane.drag-over::before {
  content: "Drop items here to create a category";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.7;
}

.dragging{
  opacity: 0.55;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f5f5f5;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px -1px 0 -1px;
}

.essential-category {
  margin-bottom: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  width: 100%;
}

.essential-category:last-child {
  margin-bottom: 0;
}

.essential-category .category-head {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 12px;
  cursor: pointer;
}

.essential-category .chevron{
  display:inline-block;
  width: 18px;
  margin-right: 6px;
  font-size: 12px;
}

.essential-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-top: 10px;
}


.essential-body.collapsed{
  display:none;
}

.essential-card{
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  margin-bottom: 8px;
}

.essential-card:last-child {
  margin-bottom: 0;
}

.essential-card:active{
  cursor: grabbing;
}

.essential-card-title{
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}


/* Make the right panel feel like the Shopping Cart card */
.shopping-panel {
  position: relative;
}


/* --------------------------------------------------------------------
   Items
-------------------------------------------------------------------- */
.item-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}



/* Inventory cards (My Equipment Inventory) */
.inventory-card {
  padding: 10px 12px;
}

.inv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inv-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.inv-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button#addNeedsCategoryBtn{
  border: none;
  font-size: 32px!important;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
font-weight: 400 }

button#addCategoryBtn{
  border: none;
  font-size: 32px;
  font-weight: 400;
  margin: 0px;
  height: 0px;
  padding: 0px;
  padding-left: 15px;
}
.inv-title-edit {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.inv-card-remove,
button.inv-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.inv-card-remove:hover,
button.inv-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}


.inv-card-fields {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 12px;
}

.inv-field {
  min-width: 0;
}

.inv-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}


/* Airtable-style colored badges for condition select */
.inv-condition-select {
  height: 26px !important;
  padding: 0px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Default condition colors */
.inv-condition-select.condition-like-new {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

.inv-condition-select.condition-fair {
  background: #fff3e0 !important;
  color: #e65100 !important;
}

.inv-condition-select.condition-needs-replacing {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* Handle custom conditions with a default color */
.inv-condition-select:not(.condition-like-new):not(.condition-fair):not(.condition-needs-replacing) {
  background: #f5f5f5 !important;
  color: #616161 !important;
}

.label-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px 50px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

/* Template compact row (name + Have/Need/Remove pills) */
.item-row-template-compact {
  grid-template-columns: 1fr auto;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.drag-handle {
  opacity: 0.25;
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 8px;
}

.drag-handle:hover {
  opacity: 0.55;
  background: rgba(0,0,0,0.04);
}

.item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs inside item rows */
.item-row input[type="number"],
.item-row select {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

/* Pills */
.status-pill-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.status-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}

.status-pill:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.status-pill:active { transform: translateY(0); }

/* When JS toggles .active */
.status-pill.active {
  background: var(--accent);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Remove button */
.remove {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255,59,48,0.28);
}

.remove:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------
   Shopping cart - Kanban Card Style
-------------------------------------------------------------------- */
.shopping-section { margin-top: 0; }

.shopping-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.shopping-card.dragging {
  opacity: 0.55;
}

/* Top row: Product name + Remove button */
.shopping-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0px;
}

.shopping-card-product-name {
  font-size: 12px;
  color: var(--text);
  padding: 0px 0;
  word-break: break-word;
  min-height: 20px;
  line-height: 1.3;
}

.shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card-remove {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.75;
  color: #999;
  background: transparent !important;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.shopping-card-remove:hover {
  opacity: 1;
  color: #666;
  background: transparent !important;
}

/* Middle row: Type/Item# + Equipment Name */
.shopping-card-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopping-card-type-section,
.shopping-card-equipment-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

button.toggle-btn.active {
  border: none;
  border-radius: none;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: 0px 20px;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

select.shopping-card-type-select.type-standard {
  border: none !important;
}

.shopping-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:18px
}

.shopping-card-type-select {
  width: 100%;
  height: 32px;
  padding: 0px 18px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  background: #f0f0f0;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}

.shopping-card-type-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* Airtable-style colored badges for each type */
.shopping-card-type-select.type-standard {
  background: #e3f2fd;
  color: #1976d2;
}

.shopping-card-type-select.type-deluxe {
  background: #f3e5f5;
  color: #7b1fa2;
}

.shopping-card-type-select.type-premium {
  background: #fff3e0;
  color: #e65100;
}

.shopping-card-type-select.type-other {
  background: #f5f5f5;
  color: #616161;
}

.shopping-card-item-number-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.shopping-card-item-number-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shopping-card-sku-label {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  min-height: 20px;
}

.shopping-card-item-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-item-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Unit price wrapper with $ prefix */
.shopping-card-unit-price-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.shopping-card-dollar-prefix {
  position: absolute;
  left: 20px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.shopping-card-unit-price-wrapper .shopping-card-item-input {
  padding-left: 30px!important;
}

/* Hide spinner arrows for number inputs when used as unit price */
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-inner-spin-button,
.shopping-card-unit-price-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.shopping-card-unit-price-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.shopping-card-equipment-name {
  font-size: 0.9rem;
  color: var(--text);
  padding: 6px 0;
  word-break: break-word;
  min-height: 20px;
}

.shopping-card-equipment-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
}

.shopping-card-equipment-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
}

/* Bottom row: Item #, QTY, and Extended Price on same line */
.shopping-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
  align-items: start;
}

.shopping-card-equipment-name-top {
    font-weight: 800;
}

.shopping-card-item-number-section,
.shopping-card-qty-section,
.shopping-card-price-section {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  flex: 1;
}

/* Shopping card qty input now uses qty-pill-container - see above */
.shopping-card-qty-input {
  width: 100%;
  height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  text-align: center;
}

.shopping-card-qty-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

/* Override for shopping card qty pills - smaller height */
.shopping-card-qty-section .qty-pill-container {
  height: 32px;
}

.shopping-card-qty-section .qty-pill-input {
  font-size: 0.92rem;
  padding: 0 12px;
}

.shopping-card-qty-section .qty-pill-plus {
  width: 32px;
  font-size: 1rem;
}

.shopping-card-qty-section .qty-pill-separator {
  height: 20px;
}

.shopping-card-extended-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding: 6px 0;
  min-height: 20px;
}

/* Total price container for Equipment Needs List */
.needs-total-container {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.needs-total-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.needs-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

/* Legacy shopping row styles (kept for backwards compatibility if needed) */
.shopping-header-row {
  display: none; /* Hidden for card layout */
}

.shopping-row {
  display: none; /* Hidden for card layout */
}

.shopping-sku-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.shopping-product-label {
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text);
}

.shopping-product-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.shopping-product-label a:hover { text-decoration: underline; }

.shopping-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.shopping-select {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.92);
  max-width: 140px;
}

.shopping-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-item-number { flex: 1; min-width: 0; }
.shopping-qty { max-width: 90px; }
.shopping-price { max-width: 120px; }

.shopping-owned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: 1fr;
  }

  .header-fields {
    grid-template-columns: 1fr 1fr;
  }

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

  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px 1fr 90px;
  }
}

@media (max-width: 680px) {
  .toolbar-labels,
  .toolbar {
    grid-template-columns: 1fr 90px;
  }

  .type-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .btn.primary#addBtn {
    grid-column: 1 / -1;
  }

  .item-row,
  .label-row {
    grid-template-columns: 1fr 60px 1fr 44px;
  }

  .item-row-template-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .status-pill-group { justify-content: flex-start; }
}

/* Subtle scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }


.notes-toggle {
  display: inline-flex;
  align-items: center;
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.comments-area a, .page-content a {
    text-decoration: auto!important;
}



.notes-toggle:hover {
  color: #0051a2;
  text-decoration: none;
}

.notes-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.notes-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: #fbfbfd;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: #0071e3;
  background: #fff;
}

.notes-textarea::placeholder {
  color: #999;
}


/* --------------------------------------------------------------------
   Read-only mode (view link)
   - Forces the UI to look the same but removes all editing affordances
-------------------------------------------------------------------- */
.equipment-readonly #saveBtn,
.equipment-readonly #addBtn,
.equipment-readonly #addCategoryBtn,
.equipment-readonly .add-item-container,
.equipment-readonly .add-category-wrapper,
.equipment-readonly .delete-cat,
.equipment-readonly .category-del,
.equipment-readonly .inv-card-remove,
.equipment-readonly .shopping-card-remove,
.equipment-readonly .remove,
.equipment-readonly .actions,
.equipment-readonly .drag-handle,
.equipment-readonly .add-category-btn,
.equipment-readonly .add-category-dropdown {
  display: none !important;
}

/* Make any remaining form controls look like plain text and non-interactive */
.equipment-readonly input,
.equipment-readonly textarea,
.equipment-readonly select {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--text) !important;
}

/* Remove select arrow / native styling in read-only */
.equipment-readonly select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Make pills and category headers not look clickable */
.equipment-readonly .status-pill {
  pointer-events: none !important;
  cursor: default !important;
}
.equipment-readonly .toggle-btn {
  pointer-events: none !important;
  cursor: default !important;
}




/* ----------------------------------------------------
   Inventory row layout (My Equipment Inventory)
   Matches condensed row layout with Class Set math
---------------------------------------------------- */
.inventory-card.inventory-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 18px;
  overflow: visible;
  min-width: 0;
}

.inventory-card.inventory-row .inv-row-remove {
  position: absolute;
  top: 10px;
  right: 10px;
}

.inv-row-left {
  min-width: 0;
  flex: 1 1 280px;
}

.inv-row-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 6px;
}

.inventory-card.inventory-row .inv-title-edit.inv-row-title {
  font-size: 1.05rem;
  font-weight: 800;
}

.inv-row-notes .notes-toggle {
  font-size: 1.05rem;
  font-weight: 600;
}

.inventory-card.inventory-row .notes-textarea {
  margin-top: 8px;
  max-width: 420px;
}

.inv-row-fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr);
  gap: 12px;
  align-items: start;
  overflow: visible;
  min-width: 0;
}

/* Items and Recommendation wrapper - groups the controls together */
.items-recommendation-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.items-recommendation-wrapper .inv-metric-label {
  margin-bottom: 0;
}

.entry-content.alignfull.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
  padding-right: 0px;
}

.items-recommendation-pills {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
}


.items-recommendation-pills .qty-pill-container + .items-identifier-linked {
  margin-left: 12px;
}

button.qty-pill-plus {
    padding: 5px !important;
}

button.qty-pill-minus {
    padding: 5px !important;
}

.inv-metric {
  width: 120px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.inv-metric-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
  width: 100%;
  display: block;
}

/* Quantity Pill Container - Just minus and plus buttons, no visible number */
.qty-pill-container {
  display: flex;
  align-items: center;
  width: 100%!important;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  overflow: hidden;
  position: relative;
}
input.qty-pill-input{width: 75px !important;text-align: center;}



input.qty-pill-input {
  height: 35px !important;
  width: 75px !important;
}

.qty-pill-container {
  display: flex;
  align-items: center;
  width: 120% !important;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  overflow: hidden;
  position: relative;
}

button.btn.danger.inv-mark-needed.needed-btn {
  border-radius: 25px!important;
}

input.qty-pill-input {
  height: 30px !important;
}

textarea.notes-textarea {
  height: 100px !important;
  border-radius: 5px !important;
  width: 500px !important;
}
.notes-section.inv-row-notes.shopping-cart-notes {
  margin-top: -20px;
}

.notes-section.inv-row-notes {
  margin-top: 20px;
}

.qty-pill-minus {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
  padding: 0;
}

.qty-pill-minus:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--accent);
}

.qty-pill-minus:active {
  background: rgba(0, 0, 0, 0.08);
}

.qty-pill-minus:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.qty-pill-input-hidden {
  display: none;
}

.qty-pill-input::-webkit-inner-spin-button,
.qty-pill-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.qty-pill-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-pill-separator {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

button.qty-pill-minus {
  width: 30px!important;
}

.qty-pill-plus {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
  padding: 0;
}

.qty-pill-plus:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--accent);
}

.qty-pill-plus:active {
  background: rgba(0, 0, 0, 0.08);
}

.qty-pill-container:focus-within {
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
  background: #fff;
}

/* Linked Items and Identifier Display */
.items-identifier-linked {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  gap: 4px;
  font-size: 1.05rem;
  font-weight: 600;
}

.linked-items-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
}

.linked-items-label {
  color: var(--text);
  font-weight: 700;
}

.linked-per-label {
  color: black;
  font-weight: 400;
}

.linked-identifier-select {
  border: none !important;
  background: transparent !important;
  padding: 0 24px 0 0 !important;
  height: auto !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230071e3' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
  flex-shrink: 0;
  min-width: fit-content;
  width: auto !important;
  display: inline-block !important;
  position: relative !important;
}

/* Ensure dropdown arrow always shows for all identifier options */
.linked-identifier-select.identifier-per-1,
.linked-identifier-select.identifier-per-2,
.linked-identifier-select.identifier-per-3,
.linked-identifier-select.identifier-per-4,
.linked-identifier-select.identifier-per-5,
.linked-identifier-select.identifier-per-10,
.linked-identifier-select.identifier-per-15,
.linked-identifier-select.identifier-per-20,
.linked-identifier-select.identifier-per-25,
.linked-identifier-select.identifier-per-40 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230071e3' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
  padding-right: 24px !important;
}

.inv-pill-select {
  width: 50px!important;
  height: 44px;
  padding: 6px 38px 6px 18px;
  border-radius: 999px;
  border: none !important;
  font-size: 1.05rem;
  font-weight: 600 !important;
  background: #fbfbfd;
  transition: all 160ms ease;
}

.inv-pill-select {
  padding-right: 38px;
  border: none !important;
  font-weight: 600 !important;
  transition: all 160ms ease;
}

.inv-pill-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}


.inv-readonly-pill {
  width: 100%;
  height: 44px;
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  font-size: 1.05rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
}

.inv-metric-action {
  display: flex;
  align-items: end;
}

.btn.danger,
button.btn.danger {
  background: #12308F;
  color: #fff;
  border: none;
}

.btn.danger:hover,
button.btn.danger:hover {
  filter: brightness(0.95);
}

.inv-mark-needed {
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.needed-btn-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
}

.needed-wrap {
  overflow: visible !important;
}

.needed-value {
  font-weight: 900;
  font-size: 24px;
  font-style: italic;
}

.needed-label {
  font-weight: 900;
  font-size: 24px;
  font-style: italic;
}

.needed-dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 4px;
  opacity: 0.8;
  color: white!important;
  font-size: 16px;
  width:170px!important;
}

button.essential-card-add-btn {
    background-color: navy;
    color: white!important;
    padding: 2px 7px;
    border-radius: 9px;
}

.needed-dropdown {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 10000;
  overflow: hidden;
  width:170px!important;
}

.needed-dropdown-item {
  width: 100%;
  padding: 12px 18px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 160ms ease;
}

.needed-dropdown-item:hover {
  background: var(--accent-soft);
}

/* Responsive: adjust columns on smaller screens */
@media (max-width: 1200px) {
  .inventory-card.inventory-row {
    gap: 12px;
    padding: 16px 12px;
  }

  .inv-row-fields {
    grid-template-columns: minmax(100px, 1.5fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);
    gap: 8px;
  }

  .inv-row-left {
    min-width: 0;
    flex: 1 1 180px;
  }
}

@media (max-width: 980px) {
  .inventory-card.inventory-row {
    gap: 10px;
    padding: 16px 10px;
  }

  .inv-row-fields {
    grid-template-columns: minmax(80px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
    gap: 6px;
  }

  .inv-metric {
    width: 100px !important;
  }

  .inv-row-left {
    min-width: 0;
    flex: 1 1 120px;
  }
}

@media (max-width: 768px) {
  .inv-row-fields {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .inv-metric {
    width: 100% !important;
  }

  .inv-metric-action {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}


/* --------------------------------------------------------------------
   Shopping Cart / Needs List — Row Layout (matches provided mock)
   - Keep all existing logic; update only layout & presentation
-------------------------------------------------------------------- */

.shopping-card.shopping-card--row {
  padding: 18px 18px 16px;
  gap: 3px!important;
}

.shopping-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.shopping-card.shopping-card--row .shopping-card-equipment-name-top {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.shopping-card.shopping-card--row .shopping-card-equipment-input {
  height: 44px !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}

.shopping-row-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr 2.4fr 0.85fr 1.1fr;
  gap: 18px;
  align-items: start;
  margin-top: 6px;
}

.shopping-row-3 {
  margin-top: 0px;
}

.shopping-row-field {
  min-width: 0;
}

.shopping-card.shopping-card--row .shopping-card-type-select {
  height: 44px;
  font-size: 1.05rem;
}

.shopping-card.shopping-card--row .shopping-card-qty-input {
  height: 44px !important;
  font-size: 1.05rem;
}

.shopping-card.shopping-card--row .shopping-card-item-input,
.shopping-card.shopping-card--row .shopping-card-unit-price-input {
  height: 44px !important;
  font-size: 1.05rem;
}

.shopping-card.shopping-card--row .shopping-card-sku-label {
  font-size: 1.1rem;
  font-weight: 650;
  padding: 8px 2px;
}

.shopping-card.shopping-card--row .shopping-card-product-name {
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.25;
}

.shopping-card.shopping-card--row .shopping-card-product-name a {
  color: var(--accent);
  text-decoration: none;
}

.shopping-card.shopping-card--row .shopping-card-product-name a:hover {
  text-decoration: underline;
}

.shopping-card.shopping-card--row .shopping-card-extended-price {
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  padding-top: 6px;
}

@media (max-width: 980px) {
  .shopping-row-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .shopping-card.shopping-card--row .shopping-card-extended-price {
    font-size: 1.6rem;
  }
}


/* ============================================================
   Drawer performance fix (prevents Chrome lock-ups)
   - Avoid animating width/flex-basis (layout thrash)
   - Slide drawer via transform (GPU-friendly)
   ============================================================ */

.app-layout .content-wrapper{
  position: relative;
  overflow-x: hidden;
}

/* Desktop/tablet: drawer overlays on the right and slides in */
.recommendations-drawer{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 420px;          /* fixed */
  flex: none !important; /* stop flex sizing */
  transform: translateX(100%);
  transition: transform 220ms ease;

  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--bg);

  pointer-events: none;  /* prevent clicks when hidden */
  will-change: transform;
  z-index: 1000;
}

.app-layout.drawer-open .recommendations-drawer,
.app-layout.drawer-open .content-wrapper .recommendations-drawer{
  transform: translateX(0);
  pointer-events: auto;
}

.app-layout.drawer-open.drawer-dragging .recommendations-drawer,
.app-layout.drawer-open.drawer-dragging .content-wrapper .recommendations-drawer {
  /* While dragging, let the inventory/needs area receive dragover/drop reliably */
  pointer-events: none !important;
}

.app-layout.drawer-open.drawer-dragging .recommendations-drawer *,
.app-layout.drawer-open.drawer-dragging .content-wrapper .recommendations-drawer * {
  pointer-events: none !important;
}

.app-layout.drawer-open .recommendations-drawer * {
  pointer-events: auto;
}

.app-layout.drawer-open .recommendations-drawer .icon-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Drawer inner should just fill the drawer now */
.drawer-inner{
  width: 100%;
  height: 100%;
  padding: 0 18px 18px;
}

.essential-panel .lane {
  background: transparent !important;
  padding: 0px !important;
}

@media (max-width: 1000px){
  .recommendations-drawer{ width: 360px; }
  .app-layout.drawer-open .stage {
    max-width: calc(100% - 360px);
    width: calc(100% - 360px);
  }
}

/* Mobile: drawer becomes a bottom sheet */
@media (max-width: 860px){
  .recommendations-drawer{
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;

    width: 100%;
    max-height: 70vh;

    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .app-layout.drawer-open .recommendations-drawer,
  .app-layout.drawer-open .content-wrapper .recommendations-drawer{
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------
   Header styling to match provided screenshot
   - Left-aligned title with inline school/year meta
   - Right-aligned "Saved" pill + segmented Clear/Share controls
-------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 10px;
  margin-bottom: 14px;
  text-align: left;
}

.page-header-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.05;
}

.heading-sub {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.meta-divider {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.18);
  display: inline-block;
}

/* Right-side actions */
.share-button-wrapper {
  position: relative;
  top: auto;
  right: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}

.save-indicator {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-indicator i {
  font-size: 0.9rem;
  color: #1f7a4f;
}

.save-indicator-date {
  margin-left: 4px;
  font-weight: 500;
}

.save-indicator-hint {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
}

.action-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: transparent;
  margin-right: 35px;
}

.action-group #generateAnalysisBtn {
  width: auto;
  margin: 0;
}

.action-btn {
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #4A4A4A;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  line-height: 1;
  transition: color 0.2s ease;
  vertical-align: middle;
}

.action-btn i {
  font-size: 15px;
  color: #4A4A4A;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color 0.2s ease;
}

.action-btn span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.action-btn:hover {
  background: transparent;
  color: #333;
}

.action-btn:hover i {
  color: #333;
}

.action-btn:active {
  background: transparent;
  opacity: 0.7;
}

/* Generate AI Report button - purple pill with icon + label */
#generateAnalysisBtn {
  background: #7A2EFF !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(122, 46, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  font-size: 15px !important;
  position: relative !important;
  overflow: hidden !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

#generateAnalysisBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

#generateAnalysisBtn:hover::before {
  left: 100%;
}

#generateAnalysisBtn:hover {
  background: #6A1EEF !important;
  box-shadow: 0 6px 20px rgba(122, 46, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px) scale(1.02);
}

#generateAnalysisBtn:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 8px rgba(122, 46, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

#generateAnalysisBtn i {
  color: #fff !important;
  font-size: 18px !important;
  margin-right: 8px !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

#generateAnalysisBtn span {
  display: inline !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* Inventory AI photo scan — match Run AI Report purple + shimmer + sparkle */
#equipment-list-app .inventory-quick-scan-btn {
  flex: 0 0 auto !important;
  min-width: 44px !important;
  height: 40px !important;
  padding: 0 12px !important;
  background: #7A2EFF !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(122, 46, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#equipment-list-app .inventory-quick-scan-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

#equipment-list-app .inventory-quick-scan-btn:hover::before {
  left: 100%;
}

#equipment-list-app .inventory-quick-scan-btn:hover {
  background: #6A1EEF !important;
  box-shadow: 0 6px 20px rgba(122, 46, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px) scale(1.02);
}

#equipment-list-app .inventory-quick-scan-btn:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 8px rgba(122, 46, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

#equipment-list-app .inventory-quick-scan-btn i {
  color: #fff !important;
  font-size: 18px !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  animation: sparkle 2s ease-in-out infinite;
}

/* Compact AI scan icon in inventory row actions */
#equipment-list-app .inventory-ai-scan-btn--compact {
  box-sizing: border-box !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: #7A2EFF !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  box-shadow: 0 3px 10px rgba(122, 46, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#equipment-list-app .inventory-ai-scan-btn--compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.45s ease;
}

#equipment-list-app .inventory-ai-scan-btn--compact:hover::before {
  left: 100%;
}

#equipment-list-app .inventory-ai-scan-btn--compact:hover {
  background: #6A1EEF !important;
  box-shadow: 0 5px 16px rgba(122, 46, 255, 0.45), 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px);
}

#equipment-list-app .inventory-ai-scan-btn--compact i {
  color: #fff !important;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
  animation: sparkle 2s ease-in-out infinite;
}

/* Add New Item modal — Take/Upload Photo primary action */
.inventory-ai-photo-modal-btn {
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #7A2EFF !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 4px 12px rgba(122, 46, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.inventory-ai-photo-modal-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.inventory-ai-photo-modal-btn:hover::before {
  left: 100%;
}

.inventory-ai-photo-modal-btn:hover {
  background: #6A1EEF !important;
  box-shadow: 0 6px 18px rgba(122, 46, 255, 0.48), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px);
}

.inventory-ai-photo-modal-btn i {
  color: #fff !important;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
  animation: sparkle 2s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   AI inventory tool — shared overlay + card (matches “Analyzing image…” UX)
   ------------------------------------------------------------------------- */
.inventory-ai-tool-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/*
 * Report / standards modals: above inventory header nav (z-index 12000) and
 * mobile menus (~10060). Appended to document.body by JS.
 */
.inventory-ai-tool-backdrop--layer-top {
  z-index: 2147483647 !important;
}

.inventory-ai-tool-card {
  background: #fff;
  width: 100%;
  max-width: 460px;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(122, 46, 255, 0.1);
  box-sizing: border-box;
}

.inventory-ai-tool-card--wide {
  max-width: 480px;
}

/* Pre-camera tip — compact “quick read” card */
.inventory-ai-tool-card--camera-tip {
  max-width: 440px;
  padding: 22px 24px;
}

.inventory-ai-tool-camera-tip-wrap {
  margin: 0 0 4px 0;
  text-align: left;
}

.inventory-ai-tool-camera-tip-list {
  margin: 0;
  padding-left: 1.35rem;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.55;
  list-style-type: disc;
}

.inventory-ai-tool-camera-tip-list li {
  margin-bottom: 8px;
}

.inventory-ai-tool-camera-tip-list li:last-child {
  margin-bottom: 0;
}

.inventory-ai-tool-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A2EFF;
  margin-bottom: 8px;
}

.inventory-ai-tool-kicker i {
  font-size: 0.85rem;
  filter: drop-shadow(0 0 4px rgba(122, 46, 255, 0.35));
}

.inventory-ai-tool-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.inventory-ai-tool-subtitle {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 16px 0;
  line-height: 1.45;
}

.inventory-ai-tool-spinner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.inventory-ai-tool-spinner {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #7A2EFF;
  animation: inventoryAiToolSpin 0.85s linear infinite;
}

@keyframes inventoryAiToolSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.inventory-ai-tool-status {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0f172a;
}

.inventory-ai-tool-meta {
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 6px;
  min-height: 1.25em;
}

.inventory-ai-tool-stage {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.45;
}

.inventory-ai-tool-disclaimer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #64748b;
}

.inventory-ai-tool-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.inventory-ai-tool-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  color: #0f172a;
  background: #f8fafc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-ai-tool-input:focus {
  outline: none;
  border-color: rgba(122, 46, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(122, 46, 255, 0.12);
  background: #fff;
}

.inventory-ai-tool-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.inventory-ai-tool-btn-secondary {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.inventory-ai-tool-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.inventory-ai-tool-btn-primary {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: #7A2EFF;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(122, 46, 255, 0.35);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.inventory-ai-tool-btn-primary:hover {
  background: #6A1EEF;
  color: #fff;
  box-shadow: 0 6px 18px rgba(122, 46, 255, 0.42);
  transform: translateY(-1px);
}

.inventory-ai-tool-btn-primary:active {
  transform: translateY(0);
}

.inventory-ai-tool-actions--start {
  justify-content: flex-start;
}

/* Standards equipment mapping modal — dense grid, minimal scrolling */
.inventory-ai-tool-card.equip-std-map-modal {
  max-width: 860px;
  padding: 14px 16px 12px;
}

.equip-std-map-modal .inventory-ai-tool-kicker {
  margin-bottom: 4px;
  font-size: 0.65rem;
}

.equip-std-map-modal .inventory-ai-tool-title {
  font-size: 1rem;
  margin-bottom: 2px;
}

.equip-std-map-modal .inventory-ai-tool-subtitle {
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0 0 8px;
}

.equip-std-map-include {
  margin: 6px 0 0;
}

.equip-std-map-include__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.equip-std-map-include__title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.equip-std-map-include__edit {
  font-size: 11px;
  font-weight: 600;
  color: #2271b1;
  text-decoration: underline;
}

.equip-std-map-include-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  padding: 5px 6px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  background: #fff;
}

.equip-std-map-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  font-size: 10px;
  color: #0f172a;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}

.equip-std-map-chip input {
  margin: 0;
  width: 12px;
  height: 12px;
}

.equip-std-map-section {
  margin: 8px 0 0;
}

.equip-std-map-section__title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.equip-std-map-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 0;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  background: #fff;
  padding: 2px 4px;
}

.equip-std-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 44%);
  align-items: center;
  gap: 4px 6px;
  padding: 2px 4px;
  min-height: 26px;
}

.equip-std-map-row__label {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equip-std-map-row__select {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.2;
  background: #fff;
}

.equip-std-map-row__select:focus {
  outline: 2px solid rgba(122, 46, 255, 0.25);
  border-color: rgba(122, 46, 255, 0.45);
}

.equip-std-map-modal .inventory-ai-tool-actions {
  margin-top: 8px !important;
}

@media (max-width: 640px) {
  .equip-std-map-list {
    grid-template-columns: 1fr;
    max-height: min(56vh, 380px);
  }

  .equip-std-map-row {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 46%);
    padding: 3px 4px;
  }
}

@media (max-width: 520px) {
  .equip-std-map-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 4px 4px 5px;
  }

  .equip-std-map-row__label {
    white-space: normal;
  }
}

/* Add-item choice modal: stack actions on narrow screens */
@media (max-width: 480px) {
  .inventory-ai-tool-actions--stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .inventory-ai-tool-actions--stack-mobile .inventory-ai-tool-btn-secondary,
  .inventory-ai-tool-actions--stack-mobile .inventory-ai-tool-btn-primary,
  .inventory-ai-tool-actions--stack-mobile .inventory-ai-photo-modal-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Settings button chevron styling */
#settingsBtn .fa-chevron-down {
  color: #666666 !important;
  transition: color 0.2s ease;
}

#settingsBtn:hover .fa-chevron-down {
  color: #333 !important;
}

/* Download and Settings button backgrounds */
button#downloadBtn,
button#undoBtn {
  background: white !important;
  color: #4A4A4A !important;
}

button#undoBtn {
  margin-top: 5px;
  margin-right: 10px;
}

button#settingsBtn {
  background: white !important;
  color: #4A4A4A !important;
}

button#downloadBtn:hover,
button#undoBtn:hover {
  color: #4A4A4A !important;
}

button#settingsBtn:hover {
  color: #4A4A4A !important;
}

button#downloadBtn span,
button#settingsBtn span,
button#undoBtn span,
button#downloadBtn i,
button#settingsBtn i,
button#undoBtn i,
button#downloadBtn:focus,
button#settingsBtn:focus,
button#undoBtn:focus,
button#downloadBtn:focus-visible,
button#settingsBtn:focus-visible,
button#undoBtn:focus-visible {
  color: #4A4A4A !important;
}

/* Settings menu: anchor dropdown to the gear/chevron button */
#equipment-list-app header .settings-menu-anchor {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

#equipment-list-app header .settings-menu-anchor #settingsDropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  bottom: auto;
  margin-top: 0;
  transform: none;
}

/* Download dropdown anchors to its button wrapper */
.action-group .share-dropdown {
  right: 0;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .heading-sub {
    white-space: normal;
  }

  .share-button-wrapper {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Other header dropdowns (not settings — settings uses .settings-menu-anchor) */
.share-button-wrapper > .share-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 1000;
}

/* Override any action-group specific positioning */
.action-group .share-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin-top: 0;
  z-index: 1000;
}

/* Ensure download dropdown appears below the download button */
#downloadDropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
}

/* School Year dropdown - no border, text-like appearance */
.school-year-select {
  border: none !important;
  background: transparent !important;
  padding: 0 20px 0 0 !important;
  height: auto !important;
  font-size: 0.92rem !important;
  color: var(--text) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
}

.school-year-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

select#schoolYear {
  border-radius: 0px !important;
}

.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-top: 0px !important;
}

.school-year-select:hover {
  color: var(--accent) !important;
}

select#schoolYear {
  width: 100px !important;
}

/* School Year dropdown in header - no border, text-like appearance */
.heading-sub .school-year-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.heading-sub .school-year-select {
  border: none !important;
  background: transparent !important;
  padding: 0 20px 0 0 !important;
  height: auto !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
}

.heading-sub .school-year-arrow {
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  color: var(--muted);
  pointer-events: none;
}

.heading-sub .school-year-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

.heading-sub .school-year-select:hover {
  color: var(--text) !important;
}

/* Tab count styling */
.tab-count {
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.8;
}

.top-tabs .tab-btn.active .tab-count {
  opacity: 1;
}

/* Essential Equipment List - Right Panel (Always Visible, Collapsible) */
.essential-right-panel {
  flex: 0 0 420px;
  width: 420px;
  border-left: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: width 220ms ease, flex-basis 220ms ease;
  overflow: hidden;
}

.essential-right-panel.collapsed {
  flex: 0 0 48px;
  width: 48px;
  overflow: visible;
}

.essential-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  flex-shrink: 0;
}

.essential-right-panel.collapsed .essential-panel-header {
  padding: 12px 0;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  min-height: auto;
}

.essential-right-panel.collapsed .essential-panel-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
  font-weight: 700;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease;
}

.essential-right-panel.collapsed .essential-panel-title:hover {
  color: var(--text);
}

.essential-panel-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.essential-panel-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  color: var(--text);
}

.essential-panel-toggle:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.essential-right-panel.collapsed .essential-panel-toggle i {
  transform: rotate(180deg);
}

.essential-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.essential-list-selector {
  margin-bottom: 18px;
}

.essential-list-select {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  background: #fbfbfd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.essential-list-select:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: var(--ring);
  background: #fff;
}

.essential-list-select:hover {
  border-color: var(--border-strong);
  background: #fff;
}

.essential-list-content {
  min-height: 200px;
}

td.essential-item-name-cell {
  display: block !important;
}

.essential-right-panel.collapsed .essential-panel-content {
  display: none;
}

.essential-right-panel.collapsed .essential-panel-toggle {
  width: 28px;
  height: 28px;
}

.essential-right-panel.collapsed .essential-panel-toggle i {
  transform: rotate(180deg);
}

/* Stage width adjustments - consolidated with main .stage definition above */


/* Content-wrapper styling moved to sidebar section below */


/* ============================================================
   LEFT SIDEBAR TOOLBAR
   ============================================================ */
.left-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 var(--el-sidebar-width);
  width: var(--el-sidebar-width);
  min-height: 100vh;
  height: 100%;
  background: var(--card);
  border-right: none !important;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width 220ms ease;
}

.sidebar-toolbar {
  display: flex;
  flex-direction: column;
  padding: 23px 0;
  gap: 12px;
  align-items: center;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.sidebar-btn {
  /* Full rail width; global `button { width: auto }` resets must not shrink the sidebar */
  width: var(--el-sidebar-width) !important;
  height: 80px;
  min-height: 80px;
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 4px;
  border: none;
  background: white;
  border-radius: 0;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  color: black;
  position: relative;
  overflow: hidden;
}

.sidebar-btn i {
  font-size: 1.5rem;
  margin: 0;
  flex-shrink: 0;
  line-height: 1;
  color: inherit;
}

.sidebar-btn-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  width: 100%;
  display: block;
  color: inherit;
  flex-shrink: 0;
}

.sidebar-btn-count {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
  margin: 0;
  line-height: 1.1;
  text-align: center;
  width: 100%;
  color: inherit;
  flex-shrink: 0;
}

.sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1d1d1f;
}

.sidebar-btn:hover i,
.sidebar-btn:hover .sidebar-btn-label,
.sidebar-btn:hover .sidebar-btn-count {
  color: #1d1d1f;
}

/* Active tab keeps brand fill on hover (no extra blue flash on inactive items) */
.sidebar-btn.active:hover {
  background: #2B47D8;
  color: #fff;
}

.sidebar-btn.active:hover i,
.sidebar-btn.active:hover .sidebar-btn-label,
.sidebar-btn.active:hover .sidebar-btn-count {
  color: #fff;
}

/* Specific sidebar button styles */
button#sidebarBtnNeeds {
  width: 100%;
}

button#sidebarBtnInventory {
  width: 100%;
}

/* Full-width breakout: app uses full viewport width */
body.equipment-fullscreen {
  overflow-x: hidden;
}
.equipment-app-full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

div#equipment-list-app {
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.sidebar-btn.active {
  background: #2B47D8;
  color: white;
}

.sidebar-btn.active i,
.sidebar-btn.active .sidebar-btn-label,
.sidebar-btn.active .sidebar-btn-count {
  color: white;
}

button.save-reminder-btn {
  color: white!important;
}

.sidebar-btn.active .sidebar-btn-count {
  opacity: 1;
}

/* Default non-active sidebar buttons should not have gray card backgrounds */
.sidebar-btn:not(.active) {
  background: transparent !important;
}

.sidebar-btn:not(.active):hover {
  background: transparent !important;
  color: #2B47D8 !important;
}

.sidebar-btn:not(.active):hover i,
.sidebar-btn:not(.active):hover .sidebar-btn-label,
.sidebar-btn:not(.active):hover .sidebar-btn-count {
  color: #2B47D8 !important;
}

.sidebar-btn:not(.active):focus-visible {
  color: #2B47D8 !important;
}

.sidebar-btn:not(.active):focus-visible i,
.sidebar-btn:not(.active):focus-visible .sidebar-btn-label,
.sidebar-btn:not(.active):focus-visible .sidebar-btn-count {
  color: #2B47D8 !important;
}

/* Short viewport: smaller but still equal-height buttons */
@media (min-width: 769px) and (max-height: 560px) {
  .left-sidebar .sidebar-toolbar {
    padding: 4px 0;
    gap: 6px;
  }
  .left-sidebar .sidebar-btn {
    height: 48px;
    min-height: 48px;
    flex: 0 0 48px;
    padding: 3px 4px;
    gap: 1px;
    justify-content: center;
  }
  .left-sidebar .sidebar-btn i {
    font-size: 1.15rem;
  }
  .left-sidebar .sidebar-btn-label {
    font-size: 0.65rem;
    line-height: 1.1;
  }
  .left-sidebar .sidebar-btn-count {
    font-size: 0.6rem;
    line-height: 1;
  }
}

/* ============================================================
   Wish List → OFG / What’s New (dropdown in the rail)
   Desktop: panel is in document flow so tabs below slide down.
   Mobile: see max-width block — fixed-height bar uses popover above rail.
   ============================================================ */
#equipment-list-app .wl-dropdown {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  flex-shrink: 0;
}

#equipment-list-app .wish-list-submenu.wl-dropdown__panel {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease, max-height 220ms ease;
  max-height: 0;
}

#equipment-list-app .wish-list-submenu.wish-submenu-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 280px;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

#equipment-list-app .wish-submenu-btn.wl-dropdown__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 8px;
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

#equipment-list-app .wish-submenu-btn.wl-dropdown__item:hover,
#equipment-list-app .wish-submenu-btn.wl-dropdown__item:focus-visible {
  background: rgba(43, 71, 216, 0.1);
  color: #1e3aa8;
  outline: none;
}

#equipment-list-app .wish-submenu-btn.wl-dropdown__item:active {
  background: rgba(43, 71, 216, 0.16);
}

#equipment-list-app .wish-submenu-btn.wl-dropdown__item + .wish-submenu-btn.wl-dropdown__item {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Rail submenu accent rows — Recommendations (Inventory) + Wish List OFG / What’s New */
#equipment-list-app #inventorySubmenuRecommendations,
#equipment-list-app #wishSubmenuOfg,
#equipment-list-app #wishSubmenuNew {
  background: #ef4444 !important;
  color: #fff !important;
}

#equipment-list-app #inventorySubmenuRecommendations:hover,
#equipment-list-app #inventorySubmenuRecommendations:focus-visible,
#equipment-list-app #wishSubmenuOfg:hover,
#equipment-list-app #wishSubmenuOfg:focus-visible,
#equipment-list-app #wishSubmenuNew:hover,
#equipment-list-app #wishSubmenuNew:focus-visible {
  background: #dc2626 !important;
  color: #fff !important;
  outline: none;
}

#equipment-list-app #inventorySubmenuRecommendations:active,
#equipment-list-app #wishSubmenuOfg:active,
#equipment-list-app #wishSubmenuNew:active {
  background: #b91c1c !important;
  color: #fff !important;
}

#equipment-list-app #wishSubmenuOfg + #wishSubmenuNew {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

#equipment-list-app #inventorySubmenuRecommendations {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #equipment-list-app .wish-list-submenu.wl-dropdown__panel {
    transition: none;
  }
}

/* Slide-out drawers (desktop): unified shell — matches “Only from Gopher” chrome */
#sidebarRecommendationsPanel,
.sidebar-wish-catalog-panel,
.sidebar-faq-panel,
.sidebar-contact-panel {
  position: fixed;
  left: var(--el-sidebar-width);
  top: 125px !important;
  bottom: 0;
  width: 0;
  background: #f4f4f7;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms ease;
  /* Above #equipment-list-app .container > header (12000) so drawers cover titles + toolbar. */
  z-index: 15100;
}

/* Contact panel: pin to rail; top matches unified drawer shell (125px). */
#sidebarContactPanel,
.sidebar-contact-panel {
  left: var(--el-sidebar-width) !important;
  top: 125px !important;
}

/* FAQ panel: pin to rail; top matches unified drawer shell (125px). */
#sidebarFAQPanel,
.sidebar-faq-panel {
  left: var(--el-sidebar-width) !important;
  top: 125px !important;
}

/* Recommendations / OFG / What’s New: same unified drawer shell (top: 125px). */

#sidebarRecommendationsPanel.expanded,
.sidebar-wish-catalog-panel.expanded,
.sidebar-faq-panel.expanded,
.sidebar-contact-panel.expanded {
  width: 420px;
}

@media (max-width: 768px) {
  #sidebarRecommendationsPanel,
  .sidebar-wish-catalog-panel,
  .sidebar-faq-panel,
  .sidebar-contact-panel {
    border-top: none !important;
  }
}

/*
 * header and .app-layout are siblings under .container. header uses z-index 12000 so
 * Settings/Download menus beat the list. Without raising .app-layout while a rail drawer
 * is open, fixed panels inside the sidebar stay *below* that stacking context and the
 * header/titles/actions show through on top.
 */
#equipment-list-app .app-layout.recommendations-expanded,
#equipment-list-app .app-layout.wish-ofg-expanded,
#equipment-list-app .app-layout.wish-new-expanded,
#equipment-list-app .app-layout.faq-expanded,
#equipment-list-app .app-layout.contact-expanded {
  position: relative;
  z-index: 15150;
}

/*
 * Drawers live inside .left-sidebar; equipment header uses z-index 12000.
 * Page shell pins the sidebar at z-index 100, so raise the rail while open.
 */
@media (min-width: 769px) {
  #equipment-list-app .app-layout.recommendations-expanded .left-sidebar,
  #equipment-list-app .app-layout.wish-ofg-expanded .left-sidebar,
  #equipment-list-app .app-layout.wish-new-expanded .left-sidebar,
  #equipment-list-app .app-layout.faq-expanded .left-sidebar,
  #equipment-list-app .app-layout.contact-expanded .left-sidebar,
  body.el-equipment-page-shell #equipment-list-app .app-layout.recommendations-expanded .left-sidebar,
  body.el-equipment-page-shell #equipment-list-app .app-layout.wish-ofg-expanded .left-sidebar,
  body.el-equipment-page-shell #equipment-list-app .app-layout.wish-new-expanded .left-sidebar,
  body.el-equipment-page-shell #equipment-list-app .app-layout.faq-expanded .left-sidebar,
  body.el-equipment-page-shell #equipment-list-app .app-layout.contact-expanded .left-sidebar {
    z-index: 15300 !important;
  }

  #equipment-list-app .app-layout.recommendations-expanded .equipment-main-column > header,
  #equipment-list-app .app-layout.wish-ofg-expanded .equipment-main-column > header,
  #equipment-list-app .app-layout.wish-new-expanded .equipment-main-column > header,
  #equipment-list-app .app-layout.faq-expanded .equipment-main-column > header,
  #equipment-list-app .app-layout.contact-expanded .equipment-main-column > header {
    z-index: 1 !important;
  }
}

/*
 * When any rail drawer is expanded, push the floating action buttons below
 * the drawer on every viewport. The base FAB CSS uses z-index ~2147483647
 * so on desktop (where body.el-lock-scroll never gets added) the FAB sits
 * above the drawer and blocks taps inside its 56px region. On mobile the
 * body.el-lock-scroll rule already lowers FABs to 15060, but matching the
 * desktop rule here makes the behavior consistent.
 *
 * Also explicitly raise the drawer panels above any other in-app stacking
 * contexts so taps land on the panel chrome (close X, items, etc.).
 */
#equipment-list-app:has(.app-layout.recommendations-expanded) .el-rec-fab,
#equipment-list-app:has(.app-layout.wish-ofg-expanded) .el-rec-fab,
#equipment-list-app:has(.app-layout.wish-new-expanded) .el-rec-fab,
#equipment-list-app:has(.app-layout.faq-expanded) .el-rec-fab,
#equipment-list-app:has(.app-layout.contact-expanded) .el-rec-fab,
#equipment-list-app:has(.app-layout.recommendations-expanded) .el-wish-fab-group,
#equipment-list-app:has(.app-layout.wish-ofg-expanded) .el-wish-fab-group,
#equipment-list-app:has(.app-layout.wish-new-expanded) .el-wish-fab-group,
#equipment-list-app:has(.app-layout.faq-expanded) .el-wish-fab-group,
#equipment-list-app:has(.app-layout.contact-expanded) .el-wish-fab-group {
  z-index: 100 !important;
}

#equipment-list-app .app-layout.recommendations-expanded #sidebarRecommendationsPanel,
#equipment-list-app .app-layout.wish-ofg-expanded #sidebarWishOfgPanel,
#equipment-list-app .app-layout.wish-new-expanded #sidebarWishNewPanel,
#equipment-list-app .app-layout.faq-expanded #sidebarFAQPanel,
#equipment-list-app .app-layout.contact-expanded #sidebarContactPanel {
  pointer-events: auto !important;
  z-index: 15200 !important;
}

.app-layout.wish-ofg-expanded .content-wrapper,
.app-layout.wish-new-expanded .content-wrapper {
  margin-left: 420px;
  width: calc(100% - 420px);
}

.sidebar-wish-catalog-panel .essential-list-content,
.sidebar-wish-catalog-panel .lane-wish-catalog {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  background: transparent !important;
}

.sidebar-wish-catalog-panel .lane-wish-catalog .inventory-table-wrapper,
.sidebar-wish-catalog-panel .lane-wish-catalog table,
.sidebar-wish-catalog-panel .lane-wish-catalog tbody {
  background: transparent !important;
}
.sidebar-wish-catalog-panel .lane-wish-catalog .inventory-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: transparent !important;
}
.sidebar-wish-catalog-panel .lane-wish-catalog table {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}
.sidebar-wish-catalog-panel .lane-wish-catalog td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sidebar-wish-catalog-panel .inventory-table th:first-child,
.sidebar-wish-catalog-panel .inventory-table td:first-child {
  box-shadow: none !important;
}

/* ----- Equipment catalog suggestion rows (Needs “Suggested products” + OFG / What’s New) ----- */
.needs-catalog-suggestions {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-sizing: border-box;
}

.needs-catalog-suggestions-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 10px;
}

.needs-catalog-suggestion-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.needs-catalog-suggestion-row:last-child {
  margin-bottom: 0;
}

.needs-catalog-suggestion-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.needs-catalog-suggestion-name {
  color: #007aff;
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
  flex: 1;
  min-width: 0;
  font-size: inherit;
}

a.needs-catalog-suggestion-name:hover {
  text-decoration: underline;
}

.needs-catalog-suggestion-price {
  font-size: 0.75rem;
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.needs-catalog-suggestion-btn {
  padding: 6px 12px;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}

.needs-catalog-suggestion-btn:hover {
  background: #0062cc;
}

.needs-catalog-suggestion-btn:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.45);
  outline-offset: 2px;
}

/* Needs item "Suggested products": ensure Add button is primary blue */
.needs-catalog-suggestions .needs-catalog-suggestion-btn {
  background: #007aff !important;
  color: #ffffff !important;
  border: none !important;
}
.needs-catalog-suggestions .needs-catalog-suggestion-btn:hover {
  background: #0062cc !important;
  color: #ffffff !important;
}

/* Wish catalog drawers (Only from Gopher / What’s New) + Recommendations: primary "Add" styling */
#sidebarRecommendationsPanel .needs-catalog-suggestion-btn,
#sidebarWishOfgPanel .needs-catalog-suggestion-btn,
#sidebarWishNewPanel .needs-catalog-suggestion-btn {
  background: #007aff !important;
  color: #ffffff !important;
  border: none !important;
}
#sidebarRecommendationsPanel .needs-catalog-suggestion-btn:hover,
#sidebarWishOfgPanel .needs-catalog-suggestion-btn:hover,
#sidebarWishNewPanel .needs-catalog-suggestion-btn:hover {
  background: #0062cc !important;
  color: #ffffff !important;
}

/* OFG / What’s New: stacked rows per category (same spacing as needs suggestions) */
.wish-catalog-category-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wish-catalog-category-stack .needs-catalog-suggestion-row {
  margin-bottom: 0;
}

/* OFG / What’s New drawer: keep product rows and links within panel width */
.sidebar-wish-catalog-panel .wish-catalog-category-stack {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sidebar-wish-catalog-panel .needs-catalog-suggestion-row {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sidebar-wish-catalog-panel .needs-catalog-suggestion-left {
  min-width: 0;
}

.sidebar-wish-catalog-panel a.needs-catalog-suggestion-name,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Equipment Ideas: suggestion-style rows; equipment name is plain text (not link blue) */
.essential-equipment-name {
  color: #333333;
  font-weight: 500;
  word-break: break-word;
  flex: 1;
  min-width: 0;
  font-size: inherit;
}

.essential-equipment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.essential-equipment-inv-btn {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: #334155;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.essential-equipment-inv-btn:hover {
  background: #1f2937;
  color: #fff;
}

.essential-equipment-inv-btn:focus-visible {
  outline: 2px solid rgba(51, 65, 85, 0.45);
  outline-offset: 2px;
}

/*
 * Equipment Recommendations — warehouse / “add to inventory” control
 * Elementor Site Settings often style all `button` elements (e.g. kit accent);
 * scoped !important keeps slate + white icon on the published front end.
 */
#equipment-list-app .essential-equipment-inv-btn,
#equipment-list-app button.essential-equipment-inv-btn {
  background: #334155 !important;
  background-color: #334155 !important;
  color: #fff !important;
  border: none !important;
}

#equipment-list-app .essential-equipment-inv-btn:hover {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: #fff !important;
}

#equipment-list-app .essential-equipment-inv-btn:focus,
#equipment-list-app .essential-equipment-inv-btn:focus-visible,
#equipment-list-app .essential-equipment-inv-btn:active {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: #fff !important;
}

#equipment-list-app .essential-equipment-inv-btn:focus-visible {
  outline: 2px solid rgba(51, 65, 85, 0.45) !important;
  outline-offset: 2px !important;
}

#equipment-list-app .essential-equipment-inv-btn i,
#equipment-list-app .essential-equipment-inv-btn .fas,
#equipment-list-app .essential-equipment-inv-btn .fa-solid {
  color: #fff !important;
}

/* Mobile sheet lives on `body`, outside #equipment-list-app — same kit bleed */
#elEquipActionSheet .el-as-btn-primary {
  background: #334155 !important;
  background-color: #334155 !important;
  color: #fff !important;
  border: none !important;
}

#elEquipActionSheet .el-as-btn-primary:hover,
#elEquipActionSheet .el-as-btn-primary:focus,
#elEquipActionSheet .el-as-btn-primary:focus-visible,
#elEquipActionSheet .el-as-btn-primary:active {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: #fff !important;
}

#elEquipActionSheet .el-as-btn-primary i,
#elEquipActionSheet .el-as-btn-primary .fas,
#elEquipActionSheet .el-as-btn-primary .fa-solid {
  color: #fff !important;
}

.essential-equipment-action-btn {
  min-width: 36px;
}

.essential-equipment-mobile-affordance {
  color: #007aff;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}

/* OFG heading: uploads favicon (ofgIconUrl) left of title, single row */
#sidebarWishOfgPanel .wish-ofg-panel-heading-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

#sidebarWishOfgPanel .wish-ofg-panel-heading-logo {
  height: 28px;
  width: auto;
  max-width: 44px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  align-self: center;
}

#sidebarWishOfgPanel .wish-ofg-panel-heading-inner .recommendations-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

/* Slide-out catalog: keep “Only from Gopher” on one line */
#sidebarWishOfgPanel .recommendations-panel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommendations-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.recommendations-panel-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.recommendations-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  color: var(--text);
}

.recommendations-panel-close:hover {
  background: #e5e5e5;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.recommendations-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  background: var(--card);
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Slide-out panels — shared chrome (matches “Only from Gopher”)
   White title bar, #f4f4f7 scroll body, slim category accordion rows
   ------------------------------------------------------------ */
#sidebarRecommendationsPanel .recommendations-panel-header,
.sidebar-wish-catalog-panel .recommendations-panel-header,
.sidebar-faq-panel .recommendations-panel-header,
.sidebar-contact-panel .recommendations-panel-header {
  padding: 16px 18px;
  min-height: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid #e6e6ea;
  border-radius: 0;
  background: #ffffff;
}

#sidebarRecommendationsPanel .recommendations-panel-title,
.sidebar-wish-catalog-panel .recommendations-panel-title,
.sidebar-faq-panel .recommendations-panel-title,
.sidebar-contact-panel .recommendations-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333333;
}

#sidebarRecommendationsPanel .recommendations-panel-close,
.sidebar-wish-catalog-panel .recommendations-panel-close,
.sidebar-faq-panel .recommendations-panel-close,
.sidebar-contact-panel .recommendations-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e5e5ea;
  background: #f7f7f8;
  color: #555;
}

#sidebarRecommendationsPanel .recommendations-panel-close:hover,
.sidebar-wish-catalog-panel .recommendations-panel-close:hover,
.sidebar-faq-panel .recommendations-panel-close:hover,
.sidebar-contact-panel .recommendations-panel-close:hover {
  background: #eeeeee;
  border-color: #dcdce0;
  box-shadow: none;
}

#sidebarRecommendationsPanel .recommendations-panel-content,
.sidebar-wish-catalog-panel .recommendations-panel-content,
.sidebar-faq-panel .recommendations-panel-content,
.sidebar-contact-panel .recommendations-panel-content {
  margin: 0;
  padding: 16px 14px 24px;
  border: none;
  border-radius: 0;
  background: #f4f4f7;
}

/* Contact Us drawer — message field (global textarea rule forces 38px height) */
#sidebarContactPanel .contact-panel-content,
.sidebar-contact-panel .contact-panel-content,
#contactPanelContent {
  margin: 0;
  padding: 16px 14px 24px;
  border: none;
  border-radius: 0;
  background: #f4f4f7;
  flex: 1;
  overflow-y: auto;
}

#sidebarContactPanel textarea,
.sidebar-contact-panel textarea,
#contactPanelContent textarea {
  height: auto !important;
  min-height: 200px !important;
  padding: 12px 14px !important;
  line-height: 1.45 !important;
  resize: vertical;
}

#sidebarRecommendationsPanel.expanded,
.sidebar-wish-catalog-panel.expanded,
.sidebar-faq-panel.expanded,
.sidebar-contact-panel.expanded {
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.07);
}

/* Category accordion strips — Recommendations + OFG / What’s New (flat on panel gray) */
#sidebarRecommendationsPanel tbody tr.category-header-row td,
.sidebar-wish-catalog-panel tbody tr.category-header-row td {
  padding: 8px 10px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  background: transparent !important;
  border: none !important;
  color: #1d1d1f !important;
  vertical-align: middle !important;
  white-space: normal !important;
  box-shadow: none !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row:hover td,
.sidebar-wish-catalog-panel tbody tr.category-header-row:hover td {
  background: rgba(0, 0, 0, 0.025) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row .fa-solid,
.sidebar-wish-catalog-panel tbody tr.category-header-row .fa-solid {
  font-size: 0.68rem;
  width: 0.75em;
  margin-right: 6px !important;
  vertical-align: -0.05em;
  color: #aeaeb2 !important;
}

/* Allow long category names to wrap (Recommendations + OFG/New) */
#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 span,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal !important;
  overflow: visible;
  text-overflow: unset;
}

.sidebar-wish-catalog-panel thead.inventory-table-header {
  background: rgba(252, 252, 253, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-wish-catalog-panel .inventory-table-header th {
  padding: 7px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #636366 !important;
  border: none !important;
  background: transparent !important;
}


.sidebar-wish-catalog-panel .inventory-table-row td {
  border-bottom: none !important;
}

.sidebar-wish-catalog-panel thead.inventory-table-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #d4d4d8 !important;
}

.sidebar-wish-catalog-panel .inventory-table-header th {
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}

/* Category / accordion table; item lines use needs-catalog-suggestion-row (flex cards) */
.sidebar-wish-catalog-panel .lane-wish-catalog table.inventory-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Space before each category after the first (separate tbody per category) */
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group + tbody.wish-catalog-category-group tr.category-header-row td {
  padding-top: 14px !important;
}

/* OFG / What’s New: no table border frame on category headers */
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group:first-of-type tr.category-header-row td {
  border-top: none !important;
}

/* Air between category label and first stacked item row */
.sidebar-wish-catalog-panel tr.wish-catalog-gap-after-category td.wish-catalog-gap-cell {
  height: 10px;
  padding: 0 !important;
  line-height: 0;
  font-size: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.sidebar-wish-catalog-panel .lane-wish-catalog .inventory-table-wrapper {
  padding: 2px 4px 8px;
  overflow-x: hidden !important;
}

/* Shell cell holds stacked suggestion rows (no nested table) */
.sidebar-wish-catalog-panel tr.wish-catalog-card-shell td,
#sidebarRecommendationsPanel tr.wish-catalog-card-shell td,
#sidebarRecommendationsPanel tr.essential-category-shell td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top !important;
}

/* Equipment Recommendations drawer — match OFG catalog rows (desktop) */
@media (min-width: 769px) {
  #sidebarRecommendationsPanel .inventory-table-header,
  #sidebarRecommendationsPanel thead.inventory-table-header {
    display: none !important;
  }

  #sidebarRecommendationsPanel .inventory-table,
  #sidebarRecommendationsPanel .inventory-table-wrapper {
    background: transparent !important;
  }

  #sidebarRecommendationsPanel .inventory-table-wrapper {
    padding: 2px 4px 8px;
    overflow-x: hidden !important;
  }

  #sidebarRecommendationsPanel .wish-catalog-category-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-row.essential-equipment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    box-sizing: border-box;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-left,
  #sidebarRecommendationsPanel .essential-equipment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-name,
  #sidebarRecommendationsPanel .essential-equipment-name {
    color: #007aff;
    font-weight: 500;
    word-break: break-word;
    flex: 1;
    min-width: 0;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-btn {
    background: #007aff !important;
    color: #ffffff !important;
    border: none !important;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-btn:hover {
    background: #0062cc !important;
    color: #ffffff !important;
  }

  #sidebarRecommendationsPanel tr.essential-gap-after-category td.essential-gap-cell,
  #sidebarRecommendationsPanel tr.wish-catalog-gap-after-category td.wish-catalog-gap-cell {
    height: 10px;
    padding: 0 !important;
    line-height: 0;
    font-size: 0;
    border: none !important;
    background: transparent !important;
  }
}

/* OFG / What’s New — catalog search (no outer frame; control sits on panel gray) */
.el-catalog-search {
  margin-bottom: 14px;
}

.el-catalog-search__inner {
  display: flex;
  align-items: stretch;
  min-height: 38px;
  border: none !important;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.el-catalog-search__field {
  flex: 1 1 82%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 10px 18px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #333333;
  background: #ffffff;
  border: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}

.el-catalog-search__field::placeholder {
  color: #888888;
  font-style: italic;
  font-weight: 400;
}

.el-catalog-search__field:focus {
  outline: none;
  border-color: #c0c0c4;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  position: relative;
}

.el-catalog-search__btn {
  flex: 0 1 18%;
  min-width: 44px;
  max-width: 80px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none !important;
  border-left: 1px solid #d8d8dc !important;
  border-radius: 0 !important;
  background: #e8e8ef;
  color: #4a4a4d;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.el-catalog-search__btn:hover {
  background: #e8eaed;
  color: #222222;
}

.el-catalog-search__btn:active {
  background: #dde0e5;
}

.el-catalog-search__btn:focus-visible {
  outline: 2px solid rgba(43, 71, 216, 0.45);
  outline-offset: 2px;
  z-index: 1;
}

.el-wish-catalog-note {
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  color: #666666 !important;
  margin-bottom: 12px !important;
}

.faq-item {
  transition: background-color 150ms ease;
}

.faq-item:hover {
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 8px;
  margin: 0 -8px 10px -8px;
}

.faq-question {
  user-select: none;
}

.faq-question:hover {
  color: #2b47d8;
}

/* ============================================================
   LAYOUT: SIDEBAR + CONTENT
   ============================================================ */
.app-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  gap: 0;
  padding: 0;
  min-height: 520px;
}

.equipment-main-column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-layout .content-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  margin-left: 0;
  width: 100%;
  transition: margin-left 220ms ease, width 220ms ease;
}

.app-layout.recommendations-expanded .content-wrapper {
  margin-left: 420px;
  width: calc(100% - 420px);
}

.app-layout.faq-expanded .content-wrapper,
.app-layout.contact-expanded .content-wrapper {
  margin-left: 420px;
  width: calc(100% - 420px);
}

/* Hide top tabs - replaced by sidebar */
.top-tabs {
  display: none;
}

/* Essential Card Add Button */
.essential-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.essential-card-title {
  flex: 1;
}

.essential-card-add-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 160ms ease, transform 100ms ease;
  white-space: nowrap;
}

.essential-card-add-btn:hover {
  background: var(--accent-dark, #001f3f);
  color: #fff;
  transform: translateY(-1px);
}

.essential-card-add-btn:active {
  transform: translateY(0);
}

/* Animation for items added to needs list */
@keyframes itemAdded {
  0% {
    background-color: rgba(0, 113, 227, 0.2);
    transform: scale(1);
  }
  50% {
    background-color: rgba(0, 113, 227, 0.4);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

@keyframes itemUpdated {
  0% {
    background-color: rgba(0, 113, 227, 0.15);
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.4);
  }
  50% {
    background-color: rgba(0, 113, 227, 0.3);
    box-shadow: 0 0 0 8px rgba(0, 113, 227, 0);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0);
  }
}


.item-added-highlight {
  animation: itemAdded 2s ease-out;
  border: 2px solid var(--accent) !important;
}

.item-updated-highlight {
  animation: itemUpdated 2s ease-out;
  border: 2px solid var(--accent) !important;
}

/* --- Needs list helpers for set-based SKUs (e.g., "Set of 6") --- */
.shopping-card-pack-info {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.shopping-card-qty-hint {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 6px;
  line-height: 1.2;
}

input[type="number"] {
    width: 100px !important;
}

/* Inventory Table (Spreadsheet Layout) */
.inventory-table-wrapper {
  position: relative;
  overflow-y: auto;
  background: white;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.inventory-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
}

.inventory-table-header th {
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: #666666;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
  border: none;
  text-transform: uppercase;
}

.inventory-table-header th:hover {
  background: #e9ecef;
}

/*
 * Inventory filter dropdown: sits in .inventory-controls-container, which precedes
 * .inventory-table-wrapper in the DOM. Without z-index, the table (sticky header z-index 10)
 * paints on top and visually “clips” the menu. Keep the whole controls row above the table.
 */
#equipment-list-app .inventory-controls-container {
  position: relative;
  z-index: 25;
}

/* Target/ratio “Edit” controls: ghost buttons — no background fill on hover/active (themes often add blue) */
#equipment-list-app .edit-target-btn,
#equipment-list-app .edit-target-btn:hover,
#equipment-list-app .edit-target-btn:focus,
#equipment-list-app .edit-target-btn:focus-visible,
#equipment-list-app .edit-target-btn:active,
#equipment-list-app .item-ratio-edit-btn,
#equipment-list-app .item-ratio-edit-btn:hover,
#equipment-list-app .item-ratio-edit-btn:focus,
#equipment-list-app .item-ratio-edit-btn:focus-visible,
#equipment-list-app .item-ratio-edit-btn:active,
#equipment-list-app .inventory-card-edit-ratio,
#equipment-list-app .inventory-card-edit-ratio:hover,
#equipment-list-app .inventory-card-edit-ratio:focus,
#equipment-list-app .inventory-card-edit-ratio:focus-visible,
#equipment-list-app .inventory-card-edit-ratio:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #6c757d !important;
  -webkit-tap-highlight-color: transparent !important;
}

#equipment-list-app .edit-target-btn:hover span,
#equipment-list-app .edit-target-btn:hover i,
#equipment-list-app .item-ratio-edit-btn:hover i,
#equipment-list-app .inventory-card-edit-ratio:hover i {
  color: inherit !important;
}

#equipment-list-app .edit-target-btn:focus-visible,
#equipment-list-app .item-ratio-edit-btn:focus-visible,
#equipment-list-app .inventory-card-edit-ratio:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

/* “Add to Wish List” text control + inventory action icons: no theme blue fill on hover/focus/active */
#equipment-list-app .action-add-to-needs-btn,
#equipment-list-app .action-add-to-needs-btn:hover,
#equipment-list-app .action-add-to-needs-btn:focus,
#equipment-list-app .action-add-to-needs-btn:focus-visible,
#equipment-list-app .action-add-to-needs-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #007AFF !important;
  -webkit-tap-highlight-color: transparent !important;
}

#equipment-list-app .action-add-to-needs-btn:hover i,
#equipment-list-app .action-add-to-needs-btn:focus-visible i,
#equipment-list-app .action-add-to-needs-btn:active i {
  color: #007AFF !important;
}

#equipment-list-app .action-add-to-needs-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn,
#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn:hover,
#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn:focus,
#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn:focus-visible,
#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn:active {
  -webkit-tap-highlight-color: transparent !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-cart-btn,
#equipment-list-app .inventory-actions-cell .inventory-action-cart-btn:hover,
#equipment-list-app .inventory-actions-cell .inventory-action-cart-btn:focus-visible,
#equipment-list-app .inventory-actions-cell .inventory-action-cart-btn:active {
  color: #007AFF !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-cart-btn i {
  color: #007AFF !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-notes-btn,
#equipment-list-app .inventory-actions-cell .inventory-action-notes-btn:hover,
#equipment-list-app .inventory-actions-cell .inventory-action-notes-btn:focus-visible,
#equipment-list-app .inventory-actions-cell .inventory-action-notes-btn:active {
  color: #495057 !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-notes-btn i {
  color: #495057 !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-delete-btn,
#equipment-list-app .inventory-actions-cell .inventory-action-delete-btn:hover,
#equipment-list-app .inventory-actions-cell .inventory-action-delete-btn:focus-visible,
#equipment-list-app .inventory-actions-cell .inventory-action-delete-btn:active {
  color: #dc3545 !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-delete-btn i {
  color: #dc3545 !important;
}

#equipment-list-app .inventory-actions-cell .inventory-action-icon-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

.inventory-table-row {
  background: white !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s;
}

.inventory-table-row:hover {
  background-color: #f8f9fa;
}

.inventory-table-row.dragging {
  opacity: 0.5;
}

.inventory-table-row .drag-handle {
  cursor: grab;
}

.inventory-table-row .drag-handle:active {
  cursor: grabbing;
}

.inventory-table-row:hover .drag-handle {
  color: #007AFF;
}

.drop-indicator {
  box-shadow: 0 0 4px rgba(0, 122, 255, 0.5);
}

.inventory-table-row td {
  padding: 4px 6px;
  vertical-align: middle;
  border: none;
  font-size: 16px;
  color: #000000;
  font-weight: 400;
}

/* Condense ACTION column specifically */
.inventory-table-row td.action-cell {
  padding: 4px 4px;
}

/* Override any theme/WordPress styles for table rows - ensure all rows are white */
table tbody>tr:nth-child(odd)>td,
table tbody>tr:nth-child(odd)>th,
table tbody>tr:nth-child(even)>td,
table tbody>tr:nth-child(even)>th {
  background-color: white !important;
}

/* Input placeholder styles */
input::placeholder {
  font-weight: 300;
  font-style: italic;
  color: #A0A0A0;
  font-size: 15px;
}

/* Table content font sizes */
.inventory-table-row td {
  font-size: 16px;
  color: #000000;
  font-weight: 400;
}

.category-header-row {
  background: #e9ecef;
  font-weight: 600;
  cursor: pointer;
}

.category-header-row:hover {
  background: #dee2e6;
}

.category-header-row td {
  padding: 6px 8px;
  font-size: 0.9rem;
}

/* ============================================================
   SAVE REMINDER BANNER
   ============================================================ */
.save-reminder-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
  animation: slideDown 0.3s ease;
}

.save-reminder-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: #856404;
}

.save-reminder-content i {
  color: #ffc107;
  font-size: 1rem;
}

.save-reminder-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.save-reminder-btn:hover {
  background: #0056b3;
  color: #fff;
}

.save-reminder-close {
  background: transparent;
  border: none;
  color: #856404;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.save-reminder-close:hover {
  opacity: 1;
}

/* ============================================================
   SCHOOL NAME PROMPT
   ============================================================ */
.school-name-prompt {
  background: #e7f3ff;
  border: 1px solid #007AFF;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 12px 0;
  animation: slideDown 0.3s ease;
}

.school-name-prompt-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #004085;
}

.school-name-prompt-content i {
  color: #007AFF;
  font-size: 0.9rem;
}

.school-name-prompt-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #004085;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.school-name-prompt-close:hover {
  opacity: 1;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ITEMS NEEDED PROGRESS BAR
   ============================================================ */
/* ============================================================
   REQUIRED AND SHORT COLUMNS
   ============================================================ */
.required-value {
  font-weight: 600;
  font-size: 0.95rem;
  color: #495057;
}

.short-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.progress-bar-wrapper {
  flex: auto;
  height: 24px;
  background: #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  max-width: 200px;
}

.progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #007AFF;
  transition: width 0.3s ease;
  z-index: 1;
}

.progress-bar-remainder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #e9ecef;
  transition: width 0.3s ease, left 0.3s ease, background 0.3s ease;
  z-index: 0;
}

.progress-bar-remainder.warning {
  background: #ffc107;
}

.progress-bar-remainder.blocking {
  background: #dc3545;
}

.progress-numbers {
  position: absolute;
  z-index: 10;
  font-weight: 700;
  font-size: 0.85rem;
  color: #333;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 2px rgba(255,255,255,0.8);
}

/* Met / full target: white label on green (inline JS also sets this for desktop bar) */
#equipment-list-app .short-container[data-status="met"] .progress-numbers {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.add-chip {
  padding: 4px 8px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.add-chip:hover {
  background: #0056b3;
}

.complete-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #28a745;
  font-weight: 600;
  flex-shrink: 0;
}

.complete-indicator i {
  font-size: 0.85rem;
}

/* Gopher Attribution Icon - Super Subtle */
.page-header h1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Context Row - Compact School Setup */
/* ============================================================
   SETUP ROW - Redesigned for scannability and consistency
   ============================================================ */
.setup-row-wrapper {
  width: 100%;
}

.setup-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.setup-toggle-btn {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s;
  flex-shrink: 0;
}

.setup-toggle-btn:hover {
  color: var(--text);
}

.setup-caret {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

.setup-summary {
  font-size: 0.9rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-row-content {
  display: block;
}

.setup-grid {
  display: grid;
  grid-template-columns: 
    minmax(180px, 1fr) 
    minmax(140px, 1fr) 
    150px 
    110px 
    140px;
  gap: 12px;
  column-gap: 12px;
  align-items: start;
}

.setup-field-students {
  margin-right: -6px; /* Reduce gap between Students and State */
}

.setup-field-state {
  margin-left: -6px; /* Reduce gap between Students and State */
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.setup-field-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
  line-height: 1.2;
}

.setup-field-input,
.setup-field-select {
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.setup-field-input::placeholder {
  color: #999;
}

.setup-field-input:hover,
.setup-field-select:hover {
  border-color: #bbb;
  background: #fafafa;
}

.setup-field-input:focus,
.setup-field-select:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  background: white;
}

.setup-field-number {
  text-align: center;
  font-weight: 600;
}

.setup-field-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.setup-field-school .setup-field-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-field-teacher .setup-field-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1200px) {
  .setup-grid {
    grid-template-columns: 
      1fr 
      minmax(200px, 1fr) 
      150px 
      110px 
      140px;
  }
}

@media (max-width: 900px) {
  .setup-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .setup-field {
    width: 100%;
  }
}

/* Action icon buttons: keep neutral gray across site/app (prevent theme pink overrides) */
#equipment-list-app .inventory-card-action-btn,
#equipment-list-app .inventory-card-delete-btn,
#equipment-list-app .inventory-action-icon-btn,
#equipment-list-app .inventory-action-delete-btn,
#equipment-list-app .needs-card-action-btn,
#equipment-list-app .needs-card-remove-btn,
#equipment-list-app .inventory-card-action-btn:hover,
#equipment-list-app .inventory-card-delete-btn:hover,
#equipment-list-app .inventory-action-icon-btn:hover,
#equipment-list-app .inventory-action-delete-btn:hover,
#equipment-list-app .needs-card-action-btn:hover,
#equipment-list-app .needs-card-remove-btn:hover,
#equipment-list-app .inventory-card-action-btn:focus,
#equipment-list-app .inventory-card-delete-btn:focus,
#equipment-list-app .inventory-action-icon-btn:focus,
#equipment-list-app .inventory-action-delete-btn:focus,
#equipment-list-app .needs-card-action-btn:focus,
#equipment-list-app .needs-card-remove-btn:focus {
  color: #6b7280 !important;
  border-color: #d1d5db !important;
}

#equipment-list-app .inventory-card-action-btn i,
#equipment-list-app .inventory-card-delete-btn i,
#equipment-list-app .inventory-action-icon-btn i,
#equipment-list-app .inventory-action-delete-btn i,
#equipment-list-app .needs-card-action-btn i,
#equipment-list-app .needs-card-remove-btn i {
  color: #6b7280 !important;
}

/* Mobile card toolbar (camera / notes / delete): no blue iOS tap overlay or pressed fill */
#equipment-list-app .inventory-card-actions .inventory-card-action-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  tap-highlight-color: transparent;
}
#equipment-list-app .inventory-card-actions .inventory-card-action-btn:hover,
#equipment-list-app .inventory-card-actions .inventory-card-action-btn:focus,
#equipment-list-app .inventory-card-actions .inventory-card-action-btn:active {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: none !important;
  outline: none;
}
#equipment-list-app .inventory-card-actions .inventory-card-action-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.28);
  outline-offset: 2px;
}

/* ---- Mobile touch drag-and-drop feedback ---- */
.mobile-touch-drag-ghost {
  opacity: 0.92;
  transform: scale(1.01);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  border-radius: 10px;
}

.mobile-touch-drag-source {
  opacity: 0.45 !important;
}

.inventory-item-card.mobile-drop-target-before,
.needs-item-card.mobile-drop-target-before {
  box-shadow: inset 0 3px 0 #007aff;
}

.inventory-item-card.mobile-drop-target-after,
.needs-item-card.mobile-drop-target-after {
  box-shadow: inset 0 -3px 0 #007aff;
}

@media (max-width: 600px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }
  
  /* Line 1: School (full width) */
  .setup-field-school {
    grid-column: 1 / -1;
  }
  
  /* Line 2: Teacher, Students, State, Year (wrap) */
  .setup-field-teacher,
  .setup-field-students,
  .setup-field-state,
  .setup-field-year {
    grid-column: auto;
  }
}

.context-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.context-label {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.context-input,
.context-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.9rem;
  background: white;
  min-width: 80px;
  max-width: 150px;
}

.context-input:focus,
.context-select:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.context-input-number {
  width: 60px;
  text-align: center;
}

.context-select {
  padding: 4px 24px 4px 8px;
  cursor: pointer;
}

.context-separator {
  color: var(--muted);
  margin: 0 4px;
  font-weight: 300;
}

.context-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.context-edit-btn:hover {
  background: #f8f9fa;
  border-color: #007AFF;
  color: #007AFF;
}

.context-edit-btn i {
  font-size: 0.75rem;
}

/* Upload Excel Modal */
.upload-excel-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999998 !important;
  isolation: isolate;
}

.upload-excel-modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.upload-excel-modal-content--wide {
  max-width: 720px;
}

.import-equipment-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0;
}

.import-equipment-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6c757d;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 8px 12px;
}

.import-equipment-tab.is-active {
  border-bottom-color: #007AFF;
  color: #007AFF;
}

.import-equipment-tab-panel[hidden] {
  display: none !important;
}

.import-order-intro {
  line-height: 1.45;
  margin-bottom: 12px;
}

.import-order-steps {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 12px 1.25rem;
  padding: 0;
}

.import-order-steps li {
  margin-bottom: 6px;
}

.import-order-paste-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.import-order-paste {
  border: 1px solid #ced4da;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.import-order-actions-row {
  margin-bottom: 12px;
}

.import-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.import-order-meta-field {
  flex: 1 1 180px;
}

.import-order-meta-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.import-order-meta-field input {
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.875rem;
  padding: 8px 10px;
  width: 100%;
}

.import-order-preview-wrap {
  margin-top: 8px;
}

.import-order-preview-table {
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 10px;
  width: 100%;
}

.import-order-preview-table th,
.import-order-preview-table td {
  border: 1px solid #dee2e6;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.import-order-preview-table th {
  background: #f8f9fa;
  font-weight: 600;
}

.import-order-desc-input,
.import-order-qty-input {
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.875rem;
  padding: 6px 8px;
  width: 100%;
}

.import-order-qty-input {
  max-width: 90px;
}

.import-order-set-note {
  color: #6c757d;
  font-size: 0.75rem;
  margin-top: 4px;
}

.import-order-hint {
  color: #6c757d;
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0 0 12px;
}

.import-order-submit-btn {
  margin-top: 4px;
}

.import-order-message {
  font-size: 0.875rem;
  margin-top: 12px;
}

.import-order-message--error {
  color: #b42318;
}

.upload-excel-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #dee2e6;
}

.upload-excel-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
}

.upload-excel-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6c757d;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.upload-excel-modal-close:hover {
  color: #212529;
}

.upload-excel-modal-body {
  padding: 24px;
}

.upload-excel-modal-body p {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 0.95rem;
}

.upload-excel-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: 12px;
}

.upload-excel-download-template-btn,
.upload-excel-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-excel-download-template-btn {
  background: #6c757d;
  color: white;
}

.upload-excel-download-template-btn:hover {
  background: #5a6268;
}

.upload-excel-upload-btn {
  background: #28a745;
  color: white;
}

.upload-excel-upload-btn:hover {
  background: #218838;
}

.excel-file-name {
  display: block;
  margin-top: 8px;
  color: #495057;
  font-size: 0.9rem;
  font-style: italic;
}

/* Needs List Table Styles */
.needs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: none;
}

.needs-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
  border-top: none;
}

.needs-table-header-row {
  background: #f8f9fa;
}

.needs-table-header th,
.needs-header-drag,
.needs-header-item,
.needs-header-qty,
.needs-header-cost,
.needs-header-actions {
  border: none;
  border-top: none;
  padding: 8px 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #495057;
}

.needs-header-drag { text-align: center; width: 3%; }
.needs-header-item { text-align: left; width: 47%; }
.needs-header-qty { text-align: center; width: 15%; }
.needs-header-cost { text-align: right; width: 20%; }
.needs-header-actions { text-align: center; width: 15%; }

table caption+thead tr:first-child td, 
table caption+thead tr:first-child th, 
table colgroup+thead tr:first-child td, 
table colgroup+thead tr:first-child th, 
table thead:first-child tr:first-child td, 
table thead:first-child tr:first-child th {
  border-block-start: 0px;
}

.needs-table-row {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s;
  background: white !important;
}

.needs-table-row:hover {
  background-color: #f8f9fa;
}

.needs-table-row.dragging {
  opacity: 0.5;
}

/* Cell padding and alignment */
.needs-table-row td {
  padding: 6px 8px;
  vertical-align: top;
  border: none;
}

/* Item cell - allow 2 lines */
.needs-item-cell {
  max-width: 0; /* Enable text truncation */
  overflow: hidden;
  padding-left: 24px !important; /* Indent items under category */
}

.needs-item-cell > div {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Name line truncation with tooltip */
.needs-item-cell .needs-name-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Option cell - center align */
.needs-option-cell {
  text-align: center;
}

/* Qty cell - center align */
.needs-qty-cell {
  text-align: center !important;
}

/* Cost cell - right align and allow 2 lines */
.needs-cost-cell {
  text-align: right !important;
}

.needs-cost-cell > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  max-height: 2.6em; /* 2 lines */
  overflow: hidden;
  width: 100%;
}

/* Actions cell - hide by default, show on hover */
.needs-actions-cell {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.needs-table-row:hover .needs-actions-cell {
  opacity: 1;
}

/* Inventory actions cell - hide by default, show on hover */
.inventory-actions-cell {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.inventory-table-row:hover .inventory-actions-cell {
  opacity: 1;
}

/* Menu cell - always visible */
.needs-table-row .needs-menu-cell {
  display: table-cell;
}

/* Priority Items Total row - extend full width */
.priority-items-total-row {
  width: 100%;
}

.priority-items-total-row td {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.priority-items-total-row td > div {
  width: 100%;
  box-sizing: border-box;
}

/* Cost line styling */
.needs-cost-cell .needs-extended-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.needs-cost-cell .needs-order-qty {
  font-size: 0.8rem;
  color: #6c757d;
  white-space: nowrap;
}

.needs-cost-cell .needs-unit-price {
  font-size: 0.75rem;
  color: #6c757d;
  white-space: nowrap;
}

.needs-cost-cell .needs-overage-helper {
  font-size: 0.75rem;
  color: #6c757d;
  white-space: nowrap;
}

/* Gopher Item Checkbox Styling */
.needs-gopher-item-checkbox {
  background-color: white !important;
  border: 1px solid #ddd !important;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
}

.needs-gopher-item-checkbox:checked {
  background-color: #007AFF !important;
  border-color: #007AFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5 L4 7 L8 3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

.needs-gopher-item-checkbox:focus {
  outline: 2px solid #007AFF;
  outline-offset: 2px;
}

/* Needs Option Segmented Control */
.needs-option-segmented {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
}

.needs-option-btn {
  padding: 4px 8px;
  border: none;
  background: #f8f9fa;
  color: #495057;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #ddd;
  outline: none;
  position: relative;
  line-height: 1.2;
}

.needs-option-btn:last-child {
  border-right: none;
}

.needs-option-btn:hover {
  background: #e9ecef;
}

.needs-option-btn:focus {
  outline: 2px solid #007AFF;
  outline-offset: -2px;
  z-index: 1;
}

.needs-option-btn.needs-option-active {
  background: #007AFF;
  color: white;
  font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1;
}

.needs-option-btn.needs-option-active:hover {
  background: #0056b3;
}

.needs-option-btn.needs-option-active:focus {
  outline-color: #0056b3;
}

/* Needs Summary Bar */
.needs-summary-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  padding: 16px;
  margin-bottom: 16px;
}

.needs-summary-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.needs-summary-primary {
  background: #007AFF;
  color: white;
}

.needs-summary-primary:hover {
  background: #0056b3;
  color: #fff;
}

.needs-summary-secondary {
  background: #6c757d;
  color: white;
}

.needs-summary-secondary:hover {
  background: #5a6268;
}



/* ============================================================
 * At-a-glance Standards + Inventory Dashboard styles
 * ============================================================ */
.el-report{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:18px;
  margin:14px 0;
}
.el-report-header{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.el-report-title{font-size:20px; font-weight:800; letter-spacing:-0.2px;}
.el-report-meta{display:flex; gap:10px; flex-wrap:wrap; color:rgba(0,0,0,0.7); font-size:13px;}
.el-report-meta span{background:rgba(0,0,0,0.04); padding:3px 8px; border-radius:999px;}

.el-kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0 16px;}
@media (max-width: 820px){ .el-kpi{grid-template-columns:repeat(2,minmax(0,1fr));} }
.el-kpi-tile{border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:12px;}
.el-kpi-val{font-size:18px; font-weight:800;}
.el-kpi-lbl{font-size:12px; color:rgba(0,0,0,0.65); margin-top:2px;}

.el-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0;}
@media (max-width: 900px){ .el-grid2{grid-template-columns:1fr;} }

.el-card{border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:14px; background:#fff;}
.el-card-title{font-size:14px; font-weight:800; margin-bottom:2px;}
.el-card-sub{font-size:12px; color:rgba(0,0,0,0.65); margin-bottom:10px;}

.el-center{display:flex; justify-content:center; align-items:center; padding:6px 0;}
.el-donut{width:150px; height:150px;}

.el-smallrow{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:rgba(0,0,0,0.7); margin-top:6px;}
.el-smallrow b{color:#000;}

.el-std-tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:10px 0 12px;}
@media (max-width: 900px){ .el-std-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} }
.el-std-tile{border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:10px;}
.el-std-top{font-size:12px; color:rgba(0,0,0,0.7); margin-bottom:4px;}
.el-std-pct{font-size:18px; font-weight:800;}
.el-std-sub{font-size:12px; color:rgba(0,0,0,0.65);}

.el-heatmap{border:1px solid rgba(0,0,0,0.06); border-radius:12px; overflow:hidden;}
.el-heatmap-head, .el-heatmap-row{display:grid; grid-template-columns:100px repeat(6, 1fr);}
.el-heatmap-head{background:rgba(0,0,0,0.03); font-size:12px; color:rgba(0,0,0,0.7);}
.el-heatmap-col, .el-heatmap-rowlabel{padding:8px 10px; font-weight:700;}
.el-heatmap-rowlabel{background:rgba(0,0,0,0.02); border-top:1px solid rgba(0,0,0,0.04);}
.el-heatmap-cell{padding:8px 8px; text-align:center; font-size:12px; border-top:1px solid rgba(0,0,0,0.04); border-left:1px solid rgba(0,0,0,0.04);}

.el-bars{display:flex; flex-direction:column; gap:8px;}
.el-bar-row{display:grid; grid-template-columns: 1.2fr 2fr 60px; gap:10px; align-items:center;}
@media (max-width: 900px){ .el-bar-row{grid-template-columns: 1fr 2fr 50px;} }
.el-bar-label{font-size:12px; color:rgba(0,0,0,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.el-bar-track{height:10px; background:rgba(0,0,0,0.08); border-radius:999px; overflow:hidden;}
.el-bar-fill{height:10px; background:rgba(0,0,0,0.55); border-radius:999px;}
.el-bar-val{font-size:12px; text-align:right; color:rgba(0,0,0,0.75); font-variant-numeric: tabular-nums;}

.el-picks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:8px;}
@media (max-width: 900px){ .el-picks{grid-template-columns:1fr;} }
.el-pick{border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:12px; background:rgba(0,0,0,0.01);}
.el-pick-name{font-weight:800; font-size:13px; margin-bottom:4px;}
.el-pick-metrics{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:rgba(0,0,0,0.7); margin-bottom:6px;}
.el-pick-why{font-size:12px; color:rgba(0,0,0,0.72); line-height:1.35;}

.el-details{margin:12px 0; border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:10px 12px; background:#fff;}
.el-details summary{cursor:pointer; font-weight:800; font-size:13px;}
.el-list{margin-top:10px; display:flex; flex-direction:column; gap:10px;}
.el-list-row{border-top:1px solid rgba(0,0,0,0.06); padding-top:10px;}
.el-list-row:first-child{border-top:none; padding-top:0;}
.el-list-title{font-weight:800; font-size:12px; margin-bottom:4px;}
.el-list-text{font-size:12px; color:rgba(0,0,0,0.7); margin-bottom:6px;}
.el-chips{display:flex; flex-wrap:wrap; gap:6px;}
.el-chip{font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,0.06); color:rgba(0,0,0,0.8);}

.el-tablewrap{overflow:auto; margin-top:10px;}
.el-table{width:100%; border-collapse:collapse; font-size:12px;}
.el-table th, .el-table td{border-bottom:1px solid rgba(0,0,0,0.06); padding:8px 6px; text-align:left;}
.el-table th{font-weight:800; background:rgba(0,0,0,0.02);}
.el-footnote{margin-top:10px; font-size:11px; color:rgba(0,0,0,0.65);}

/* ============================================================
   MOBILE RESPONSIVE LAYOUT
   - Desktop stays exactly as-is.
   - On small screens, the left sidebar becomes a bottom nav
     and Equipment Ideas becomes a bottom drawer.
   ============================================================ */

@media (max-width: 768px) {
  /* Reserve space for the bottom nav so content isn't hidden */
  :root {
    --mobile-nav-height: 84px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Space for theme/site sticky header so Download & Run Report aren't cut off */
    --mobile-sticky-header-height: 88px;
  }

  /* Remove spacing and line between logo and buttons on mobile */
  #equipment-list-app {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
  }
  #equipment-list-app .container,
  #equipment-list-app .card,
  #equipment-list-app header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  #equipment-list-app header .page-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Remove divider line from Elementor section that wraps the app */
  .elementor-133:has(#equipment-list-app) {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #equipment-list-app header .heading-grade {
    display: block !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  #equipment-list-app .container {
    padding: 0 0 calc(var(--mobile-nav-height) + 16px) 0 !important;
  }

  /* Layout should not account for a left sidebar on mobile */
  .app-layout {
    display: block;
    min-height: 0;
  }

  .app-layout .content-wrapper {
    width: 100%;
    margin-left: 0;
  }

  /* When recommendations are open, don't shift the content on mobile */
  .app-layout.recommendations-expanded .content-wrapper {
    margin-left: 0;
    width: 100%;
  }

  /* When FAQ or Contact is open, don't shift the content on mobile */
  .app-layout.faq-expanded .content-wrapper,
  .app-layout.contact-expanded .content-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .app-layout.wish-ofg-expanded .content-wrapper,
  .app-layout.wish-new-expanded .content-wrapper {
    margin-left: 0;
    width: 100%;
  }

  /* Bottom navigation (replaces left sidebar) */
  .left-sidebar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 0;
    align-self: auto;
    flex: none;
    box-sizing: border-box;
    height: var(--mobile-nav-height);
    border-right: none;
    border-top: none !important;
    flex-direction: column;
    background: var(--card);
    overflow: visible;
  }

  .equipment-main-column {
    width: 100%;
  }

  .sidebar-toolbar {
    flex-direction: row;
    padding: 10px 10px;
    gap: 8px;
    align-items: stretch;
    justify-content: space-around;
    height: 100%;
    overflow: visible;
  }

  .sidebar-btn {
    width: auto;
    min-height: 56px;
    flex: 1;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 14px;
  }

  .sidebar-btn i { font-size: 1.25rem; }
  .sidebar-btn-label { font-size: 0.72rem; line-height: 1.05; }
  .sidebar-btn-count { font-size: 0.7rem; }

  /* Wish List: popover above the bar (bar height is fixed — in-flow would clip) */
  #equipment-list-app .wl-dropdown {
    flex: 1;
    justify-content: center;
    min-width: 0;
    overflow: visible !important;
    z-index: 40;
    position: relative;
  }

  #equipment-list-app .wish-list-submenu.wl-dropdown__panel {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 10px);
    width: min(248px, calc(100vw - 28px));
    transform: translate(-50%, 10px);
    border-radius: 10px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(0, 0, 0, 0.06);
    z-index: 50;
    transition: opacity 180ms ease, visibility 180ms ease, max-height 220ms ease, transform 180ms ease;
  }

  #equipment-list-app .wish-list-submenu.wish-submenu-open {
    transform: translate(-50%, 0);
    /* Upward shadow instead of desktop “drop-down” shadow */
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(0, 0, 0, 0.06);
  }

  /* Bottom drawer: all slide-outs (Recommendations, OFG, What’s New, FAQ, Contact) */
  #sidebarRecommendationsPanel,
  .sidebar-wish-catalog-panel,
  .sidebar-faq-panel,
  .sidebar-contact-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 0;
    border-right: none;
    background: #f4f4f7 !important;
    overflow: hidden;
    transition: height 220ms ease;
    z-index: 10020 !important;
    pointer-events: none !important;
    position: fixed !important;
    touch-action: pan-y !important;
  }

  div#sidebarFAQPanel,
  div#sidebarContactPanel {
    left: 0px !important;
  }
  div#sidebarFAQPanel:not(.expanded),
  div#sidebarContactPanel:not(.expanded) {
    top: auto !important;
  }

  #sidebarRecommendationsPanel.expanded,
  .sidebar-wish-catalog-panel.expanded,
  .sidebar-faq-panel.expanded,
  .sidebar-contact-panel.expanded {
    width: 100%;
    left: 0;
    right: 0;
    top: 125px !important;
    bottom: 0;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .recommendations-panel-header { 
    position: sticky; 
    top: 0;
    pointer-events: auto !important;
    z-index: 1 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
  }
  .recommendations-panel-content { 
    padding: 12px 16px calc(24px + var(--safe-bottom)) !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* Drawer chrome on mobile: white title bar + gray body (same as OFG catalog) */
  #sidebarRecommendationsPanel .recommendations-panel-header,
  .sidebar-wish-catalog-panel .recommendations-panel-header,
  .sidebar-faq-panel .recommendations-panel-header,
  .sidebar-contact-panel .recommendations-panel-header {
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #e6e6ea !important;
    border-radius: 0 !important;
  }

  #sidebarRecommendationsPanel .recommendations-panel-content,
  .sidebar-wish-catalog-panel .recommendations-panel-content,
  .sidebar-faq-panel .recommendations-panel-content,
  .sidebar-contact-panel .recommendations-panel-content {
    margin: 0 !important;
    padding: 14px 12px calc(20px + var(--safe-bottom)) !important;
    background: #f4f4f7 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .sidebar-wish-catalog-panel .recommendations-panel-content {
    overflow-x: hidden !important;
  }

  /* Slide-out drawers: titles + slim category bands (avoid bulky rows) */
  #sidebarRecommendationsPanel .recommendations-panel-title,
  .sidebar-wish-catalog-panel .recommendations-panel-title,
  .sidebar-faq-panel .recommendations-panel-title,
  .sidebar-contact-panel .recommendations-panel-title {
    font-size: 1.08rem !important;
  }
  #sidebarRecommendationsPanel .category-header-row,
  .sidebar-wish-catalog-panel .category-header-row {
    min-height: 0 !important;
  }
  #sidebarRecommendationsPanel .category-header-row td,
  .sidebar-wish-catalog-panel .category-header-row td {
    padding: 8px 10px !important;
    font-size: 0.8125rem !important;
  }
  /* OFG / What’s New: keep catalog cards and links inside the drawer (no horizontal bleed) */
  .sidebar-wish-catalog-panel .essential-list-content,
  .sidebar-wish-catalog-panel .lane-wish-catalog {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .sidebar-wish-catalog-panel .lane-wish-catalog .inventory-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #sidebarRecommendationsPanel .category-header-row td,
  #sidebarRecommendationsPanel .category-header-row span,
  .sidebar-wish-catalog-panel .category-header-row td,
  .sidebar-wish-catalog-panel .category-header-row span {
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8,
  .sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    max-width: 100% !important;
  }

  #sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 .fa-solid,
  .sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 .fa-solid {
    flex-shrink: 0 !important;
    margin-top: 0.2em !important;
  }

  #sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 span,
  .sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .needs-catalog-suggestion-row.essential-equipment-row.el-tappable {
    width: 100% !important;
  }

  /* Denser stacked catalog rows inside slide-out drawers (recommendations + OFG / What’s New) */
  #sidebarRecommendationsPanel .category-header-row td,
  .sidebar-wish-catalog-panel .category-header-row td {
    padding: 6px 8px !important;
  }

  #sidebarRecommendationsPanel .wish-catalog-category-stack,
  .sidebar-wish-catalog-panel .wish-catalog-category-stack {
    gap: 4px !important;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-row,
  .sidebar-wish-catalog-panel .needs-catalog-suggestion-row {
    padding: 5px 8px !important;
    margin-bottom: 0 !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    border-radius: 5px !important;
  }

.sidebar-wish-catalog-panel .needs-catalog-suggestion-row,
#sidebarRecommendationsPanel .needs-catalog-suggestion-row.essential-equipment-row {
  max-width: 100% !important;
  min-width: 0 !important;
}

.sidebar-wish-catalog-panel a.needs-catalog-suggestion-name,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-name,
#sidebarRecommendationsPanel a.needs-catalog-suggestion-name,
#sidebarRecommendationsPanel .needs-catalog-suggestion-name,
#sidebarRecommendationsPanel .essential-equipment-name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

  #sidebarRecommendationsPanel .needs-catalog-suggestion-left,
  .sidebar-wish-catalog-panel .needs-catalog-suggestion-left {
    gap: 6px !important;
  }

  #sidebarRecommendationsPanel .lane-essential .essential-equipment-row.el-tappable,
  .sidebar-wish-catalog-panel .needs-catalog-suggestion-row.el-tappable {
    min-height: 38px !important;
  }

  #sidebarRecommendationsPanel .essential-equipment-mobile-affordance,
  .sidebar-wish-catalog-panel .essential-equipment-mobile-affordance {
    font-size: 0.88rem !important;
  }

  #sidebarRecommendationsPanel .essential-equipment-actions,
  .sidebar-wish-catalog-panel .essential-equipment-actions {
    gap: 4px !important;
  }

  /* Recommendations drawer (mobile): show items as a grid of square-ish
     tappable button tiles. Tapping a tile adds the item directly via the
     rail-drawer-action shim, so the + affordance and the trailing actions
     area are hidden. */
  #sidebarRecommendationsPanel .wish-catalog-category-stack {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  /* Recommendations drawer (mobile): remove the divider line under the
     category header and collapse the spacer row above the tile grid so
     the buttons sit flush with the section title. */
  #sidebarRecommendationsPanel tbody tr.category-header-row td {
    border-bottom: none !important;
    padding-bottom: 4px !important;
  }
  #sidebarRecommendationsPanel tr.essential-gap-after-category,
  #sidebarRecommendationsPanel tr.essential-gap-after-category td.essential-gap-cell {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  /* On wider mobile (>=480px) fit 5 tiles per row. */
  @media (min-width: 480px) {
    #sidebarRecommendationsPanel .wish-catalog-category-stack {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
  }
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable {
    background: #f4f4f7 !important;
    border: 1px solid #e6e6ea !important;
    border-radius: 10px !important;
    padding: 4px 3px !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) !important;
    transition: background 120ms ease, transform 80ms ease, border-color 120ms ease !important;
  }
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable:active {
    background: #e9e9ee !important;
    border-color: #d4d4d8 !important;
    transform: scale(0.97) !important;
  }
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable .needs-catalog-suggestion-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable .essential-equipment-name {
    font-weight: 600 !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    color: #1d1d1f !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* Hide the + icon and the trailing actions wrapper — tapping the tile
     itself adds the item to the list. */
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable .essential-equipment-mobile-affordance,
  #sidebarRecommendationsPanel .essential-equipment-row.el-tappable .essential-equipment-actions {
    display: none !important;
  }

  .sidebar-wish-catalog-panel .needs-catalog-suggestion-btn {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    border-radius: 5px !important;
  }

  .sidebar-wish-catalog-panel .needs-catalog-suggestion-price {
    font-size: 0.7rem !important;
  }

  /* Mobile drawer search bar: no border + square corners */
  #sidebarRecommendationsPanel .el-catalog-search__inner,
  .sidebar-wish-catalog-panel .el-catalog-search__inner {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #sidebarRecommendationsPanel .el-catalog-search__btn,
  .sidebar-wish-catalog-panel .el-catalog-search__btn {
    border-left: none !important;
    border-radius: 0 !important;
  }

  /* Ensure ALL elements inside the FAQ / Contact panels are clickable on mobile */
  .sidebar-faq-panel *,
  .sidebar-contact-panel * {
    pointer-events: auto !important;
  }

  /* Inventory table: allow horizontal scrolling on small screens */
  .inventory-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-table {
    width: max-content;
    min-width: 720px;
  }

  .inventory-table-header th,
  .inventory-table-row td {
    white-space: nowrap;
  }

  /* Mobile: FABs overlap bottom nav (high z-index; JS drag bounds match viewport) */
  #equipment-list-app .el-rec-fab {
    left: 14px;
    right: auto;
    top: auto;
    bottom: max(10px, calc(var(--mobile-nav-height) - 36px));
  }

  /* Wish List FAB pair: right side on mobile (Recommendations basketball stays left) */
  #equipment-list-app .el-wish-fab-group {
    left: auto;
    right: 14px;
    bottom: max(10px, calc(var(--mobile-nav-height) - 36px));
  }
}

/* ============================================================
   MOBILE POLISH PACK (FINAL OVERRIDES)
   Placed at end of file so it wins over earlier responsive rules.
   Desktop is untouched.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --mobile-nav-height: calc(76px + var(--safe-bottom));
  }

  /* Hide empty Elementor spacer container above the app on mobile */
  .elementor-element.elementor-element-9ec89d9 {
    display: none !important;
  }

  .elementor-nav-menu ul {
    display: block !important;
  }

  .container {
    padding-bottom: calc(var(--mobile-nav-height) + 16px) !important;
  }

  .left-sidebar {
    box-sizing: border-box !important;
    height: var(--mobile-nav-height) !important;
    padding-bottom: 0 !important;
  }

  /* Drawers live inside .left-sidebar (desktop z-index 100). Header .share-button-wrapper uses 200,
     so children cannot paint above the header until this stacking context is raised. */
  #equipment-list-app .app-layout.recommendations-expanded .left-sidebar,
  #equipment-list-app .app-layout.wish-ofg-expanded .left-sidebar,
  #equipment-list-app .app-layout.wish-new-expanded .left-sidebar,
  #equipment-list-app .app-layout.faq-expanded .left-sidebar,
  #equipment-list-app .app-layout.contact-expanded .left-sidebar {
    z-index: 15090 !important;
  }

  .sidebar-toolbar {
    padding-bottom: calc(10px + var(--safe-bottom));
  }

  /* Rail drawers live inside #equipment-list-app; theme header stacking
     is a sibling outside the app. Lift main/content so drawer panels cover logo + nav too. */
  body.el-equipment-rail-drawer-open main#content,
  body.el-equipment-rail-drawer-open main.site-main,
  body.el-equipment-rail-drawer-open #content.site-main,
  body.el-equipment-rail-drawer-open .site-content,
  body.el-equipment-rail-drawer-open .elementor-location-single {
    position: relative !important;
    z-index: 10000 !important;
  }

  #elMobileBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 15070;
  }

  html.el-lock-scroll,
  body.el-lock-scroll {
    overflow: hidden !important;
    height: 100% !important;
  }

  body.el-lock-scroll #elMobileBackdrop {
    display: block;
    /* Make backdrop NOT intercept clicks - panel should receive all clicks */
    pointer-events: none !important;
    /* Above .container > header (12000) so the shield sits over titles, Run AI, settings, etc. */
    z-index: 15070 !important;
  }

  /* main is z-index 10000 while open, so the whole app (including fixed drawers) stacks as one
     layer and cannot beat 15070. ::after would sit on top and steal taps from the close X. */
  body.el-equipment-rail-drawer-open.el-lock-scroll #elMobileBackdrop {
    z-index: 9990 !important;
  }
  
  /* Tap-to-dismiss strip (panel is full-screen over bottom nav; backdrop stays under main) */
  body.el-lock-scroll #elMobileBackdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    z-index: 0;
    background: transparent;
  }
  
  /* Ensure panels are above backdrop and clickable when locked */
  body.el-lock-scroll #sidebarRecommendationsPanel.expanded,
  body.el-lock-scroll .sidebar-wish-catalog-panel.expanded,
  body.el-lock-scroll .sidebar-faq-panel.expanded,
  body.el-lock-scroll .sidebar-contact-panel.expanded {
    pointer-events: auto !important;
    z-index: 15110 !important;
    /* Below fixed mobile header; full width to bottom */
    top: 125px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-top: 1px solid var(--border) !important;
    border-right: none !important;
  }

  body.el-lock-scroll #sidebarRecommendationsPanel.expanded .recommendations-panel-content,
  body.el-lock-scroll .sidebar-wish-catalog-panel.expanded .recommendations-panel-content,
  body.el-lock-scroll .sidebar-faq-panel.expanded .recommendations-panel-content,
  body.el-lock-scroll .sidebar-contact-panel.expanded .recommendations-panel-content {
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }

  /* Floating action buttons must not sit above the drawer + backdrop while a rail drawer is open */
  body.el-lock-scroll #equipment-list-app .el-wish-fab-group,
  body.el-lock-scroll #equipment-list-app .el-rec-fab {
    z-index: 15060 !important;
  }

  /* Mobile header layout: Elementary and Equipment List on left, buttons on right */
  header {
    padding-bottom: 0 !important;
  }
  
  header .page-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px 0px !important;
    margin-bottom: 2px !important;
  }
  
  .setup-row-header {
    border-radius: 14px;
    padding: 12px 14px;
  }

  header .page-header-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  header .heading-grade {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 4px !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
  }

  header #equipmentHeading {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px 0 !important;
    white-space: normal !important;
  }

  header .heading-sub-row {
    display: block !important;
    min-width: 0 !important;
  }

  header .heading-sub {
    display: none !important;
  }

  header .share-button-wrapper {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }

  /* Save indicator: smaller and below settings button on mobile */
  header .save-indicator {
    font-size: 0.7rem !important;
    height: auto !important;
    padding: 4px 8px !important;
    margin-top: 0 !important;
    order: 2 !important;
    align-self: flex-end !important;
    background: rgba(0, 0, 0, 0.04) !important;
  }

  header .save-indicator i {
    font-size: 0.65rem !important;
  }

  header .save-indicator span:not(.save-indicator-date) {
    font-size: 0.7rem !important;
  }

  header .save-indicator-date {
    font-size: 0.65rem !important;
    margin-left: 2px !important;
  }

  header .action-group {
    order: 1 !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  #equipment-list-app header #generateAnalysisBtn {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
  }

  #equipment-list-app header #generateAnalysisBtn span {
    display: inline !important;
    overflow: visible !important;
    max-width: none !important;
    font-size: 14px !important;
  }

  /* Clean up wish list buttons and search on mobile */
  #needsList > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    align-items: center !important;
  }
  
  /* Ensure search container stays on one line */
  #needsList > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #needsList .needs-clear-btn {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    width: 100% !important;
    order: 2 !important;
  }

  #needsList .needs-search-input {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    order: 1 !important;
  }

  #needsList > div:nth-child(2) {
    display: block !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Needs table: fit screen width, no horizontal scroll */
  #needsList .inventory-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  #needsList .inventory-table,
  #needsList .needs-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }
  #needsList .inventory-table-row td,
  #needsList .needs-table-row td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Needs table column widths - space out to fit on screen */
  #needsList .inventory-table-header th {
    padding: 4px 2px !important;
    font-size: 10px !important;
  }
  #needsList .needs-table-row td {
    padding: 4px 4px !important;
  }
  #needsList .inventory-table-header th:nth-child(1),
  #needsList .needs-table-row td:nth-child(1) { width: 5% !important; min-width: 0 !important; }
  #needsList .inventory-table-header th:nth-child(2),
  #needsList .needs-table-row td:nth-child(2) { width: 38% !important; min-width: 0 !important; }
  #needsList .inventory-table-header th:nth-child(3),
  #needsList .needs-table-row td:nth-child(3) { width: 12% !important; min-width: 0 !important; }
  #needsList .inventory-table-header th:nth-child(4),
  #needsList .needs-table-row td:nth-child(4) { width: 25% !important; min-width: 0 !important; }
  #needsList .inventory-table-header th:nth-child(5),
  #needsList .needs-table-row td:nth-child(5) { width: 12% !important; min-width: 0 !important; }
  #needsList .needs-table-row .drag-handle-cell {
    width: 5% !important;
    min-width: 0 !important;
  }

  /* ----- Inventory cards (mobile) ----- */
  .inventory-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
  }
  .inventory-item-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px 16px 14px 10px;
    box-shadow: none;
  }

  /* Mail-style swipe left → reveal Delete (inventory + wish list cards) */
  .el-swipe-delete-host {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
  }
  .el-swipe-delete-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 88px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 0;
    background: #ff3b30;
  }
  .el-swipe-delete-btn {
    flex: 1;
    margin: 0;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .el-swipe-delete-btn:active {
    background: rgba(0, 0, 0, 0.12);
  }
  .el-swipe-delete-pane {
    position: relative;
    z-index: 1;
    background: #fff;
    transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    /* pan-y prevented reliably recognizing swipe-right to close; manipulation allows horizontal + vertical */
    touch-action: manipulation;
  }
  .el-swipe-delete-pane.el-swipe-delete--dragging {
    transition: none !important;
  }
  .inventory-item-card.el-swipe-delete-open .el-swipe-delete-pane,
  .needs-item-card.el-swipe-delete-open .el-swipe-delete-pane {
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08);
  }

  .inventory-card-col:first-child {
    padding-left: 0;
  }
  .inventory-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .inventory-card-name-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    box-sizing: border-box;
  }
  .inventory-card-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 12px;
    margin-bottom: 4px;
  }
  .inventory-card-section-label:first-of-type {
    margin-top: 6px;
  }
  .inventory-card-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
  }
  .inventory-card-col {
    min-width: 0;
  }
  /* Keep status box (Add to Wish List) from overflowing into the next column */
  .inventory-card-status {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Add to Wish List: contain text inside the button/box, wrap to multiple lines; closer to left */
  .inventory-card-add-wishlist {
    font-size: 0.72rem !important;
    line-height: 1.2;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding-left: 0 !important;
    margin-left: 0 !important;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left;
    padding: 2px 0;
    box-sizing: border-box;
  }
  .inventory-card-add-wishlist i {
    font-size: 0.7rem;
    flex-shrink: 0;
  }
  .inventory-card-col .inventory-card-section-label:first-child {
    margin-top: 0;
  }
  .inventory-card-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
  }
  .inventory-card-classsize-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    background: #fff5f5;
    color: #b42318;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }
  .inventory-card-classsize-hint i {
    font-size: 0.78rem;
    flex-shrink: 0;
  }
  .inventory-card-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .inventory-card-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
  }
  .inventory-stepper-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f8f9fa;
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inventory-stepper-btn:active {
    background: #e9ecef;
  }
  .inventory-stepper-val {
    min-width: 40px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
  }
  .inventory-card-level {
    padding: 1px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
  }
  .inventory-card-status {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 0.8rem;
  }
  .inventory-card-col .inventory-card-status {
    align-self: start;
  }
  .inventory-card-status-met {
    color: #34C759;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inventory-card-add-wishlist {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inventory-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .inventory-card-action-btn {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    color: #495057;
    font-size: 14px;
    cursor: pointer;
  }
  .inventory-card-delete-btn {
    color: #dc3545;
  }
  .inventory-card-notes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .inventory-card-notes-input {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
  }

  /* ----- Needs cards (mobile) ----- */
  .needs-cards-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 20px;
  }
  .needs-item-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: none;
    margin-bottom: 15px;
  }
  .needs-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .needs-card-name a {
    color: #007AFF;
    text-decoration: none;
  }
  .needs-card-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 10px;
  }
  /* Top row: name/meta on the left, kebab options menu on the right */
  .needs-card-top,
  .inventory-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }
  .needs-card-top-text,
  .inventory-card-top-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .needs-card-top-text .needs-card-name,
  .needs-card-top-text .needs-card-meta {
    margin-bottom: 0;
  }
  .needs-card-top-text .needs-card-name {
    margin-bottom: 4px;
  }
  .inventory-card-top-text .inventory-card-name {
    margin-bottom: 0;
  }
  .needs-card-menu-wrap,
  .inventory-card-menu-wrap {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .needs-card-menu,
  .inventory-card-menu {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .needs-card-menu:focus-visible,
  .needs-card-menu[aria-expanded="true"],
  .inventory-card-menu:focus-visible,
  .inventory-card-menu[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.8);
    outline: none;
  }
  .needs-card-menu:hover,
  .inventory-card-menu:hover {
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
  }
  .needs-card-menu[aria-expanded="true"]:hover,
  .inventory-card-menu[aria-expanded="true"]:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.8);
  }
  .needs-card-menu i,
  .inventory-card-menu i {
    color: inherit !important;
  }
  .needs-card-menu-list,
  .inventory-card-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 160px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  .needs-card-menu-list[hidden],
  .inventory-card-menu-list[hidden] {
    display: none;
  }
  .needs-card-menu-item,
  .inventory-card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: #1d1d1f;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .needs-card-menu-item i,
  .inventory-card-menu-item i {
    width: 14px;
    color: #6b7280 !important;
    font-size: 13px;
  }
  .needs-card-menu-item:focus-visible,
  .inventory-card-menu-item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
  }
  .needs-card-menu-item:hover,
  .inventory-card-menu-item:hover {
    background: transparent;
  }
  .needs-card-menu-item.is-danger,
  .inventory-card-menu-item.is-danger {
    color: #b42318;
  }
  .needs-card-menu-item.is-danger i,
  .inventory-card-menu-item.is-danger i {
    color: #b42318 !important;
  }
  .needs-card-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .needs-card-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: visible;
    vertical-align: top;
    margin-top: 0px;
  }
  .needs-stepper-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f8f9fa;
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .needs-stepper-btn:active {
    background: #e9ecef;
  }
  .needs-stepper-val {
    min-width: 40px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
  }
  .needs-card-total {
    text-align: right;
  }
  .needs-card-total-main {
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
  }
  .needs-card-total-sub {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 2px;
    white-space: break-spaces;
  }
  .needs-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .needs-card-action-btn {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    color: #495057;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .needs-card-remove-btn {
    color: #dc3545;
  }
  .needs-card-notes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .needs-card-notes-input {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
  }

  /* Suggested matches in card (mobile) */
  .needs-item-card [class*="matched-options-"] {
    margin-top: 20px !important;
    margin-bottom: 16px !important;
  }
  .needs-item-card .match-button-item {
    font-size: 0.8rem !important;
  }
  .needs-item-card .match-button-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    align-items: start !important;
  }
  .needs-item-card .match-item-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .needs-item-card .match-item-main .equipment-ofg-icon-wrap {
    align-self: flex-start !important;
    margin-top: 2px !important;
  }
  .needs-item-card .match-item-main a {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }
  .needs-item-card .match-price-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin-right: 0 !important;
    font-size: 0.85rem !important;
  }
  .needs-item-card .match-button-item .matches-select-btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    min-width: 92px !important;
    font-size: 0.95rem !important;
  }

  #needsList > div:nth-child(2) button {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    min-height: 30px !important;
  }

  #needsList .needs-create-btn {
    margin-top: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }

  .recommendations-panel-header {
    padding-top: 28px !important;
  }

  .recommendations-panel-header::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
  }

  .recommendations-panel-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .el-snackbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height) + 12px);
    z-index: 10050;
    background: rgba(29, 29, 31, 0.92);
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    font-size: 14px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .el-snackbar.el-toast-show {
    opacity: 1;
    transform: translateY(0);
  }

  .el-snackbar.el-hide {
    opacity: 0;
    transform: translateY(8px);
  }

  .inventory-table-wrapper { position: relative; }
  .inventory-table th:first-child,
  .inventory-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 2;
    box-shadow: 8px 0 12px rgba(0,0,0,0.05);
  }
  .inventory-table-header th:first-child { z-index: 3; }

  body.el-keyboard-open .left-sidebar {
    height: calc(52px + var(--safe-bottom)) !important;
  }
  body.el-keyboard-open .sidebar-toolbar {
    padding: 6px 10px calc(6px + var(--safe-bottom)) 10px;
  }
  body.el-keyboard-open .sidebar-btn {
    min-height: 40px;
    padding: 6px 6px;
  }
  body.el-keyboard-open .sidebar-btn-label,
  body.el-keyboard-open .sidebar-btn-count {
    display: none;
  }

  /* Mobile: Show FAB, hide desktop buttons */
  .needs-create-fab {
    display: flex !important;
  }

  /* Hide desktop action buttons on mobile */
  .needs-action-buttons .needs-clear-btn,
  .needs-action-buttons .needs-create-btn {
    display: none !important;
  }

  /* Ensure primary CTA and More button are visible */
  .needs-primary-cta,
  .needs-more-btn {
    display: flex !important;
  }
  
  /* Force search container to stay on one line */
  .needs-search-container,
  #needsList > div:first-child,
  .inventory-search-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  
  .needs-search-container > *,
  #needsList > div:first-child > *,
  .inventory-search-container > * {
    flex-shrink: 0 !important;
  }
  
  /* Improve item row tap target and information density on mobile */
  
  /* Make entire row tappable */
  .inventory-table-row,
  .needs-table-row {
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
  }
  
  .inventory-table-row:active,
  .needs-table-row:active {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Show drag handles on mobile - make them touch-friendly */
  .inventory-table-row .drag-handle-cell,
  .needs-table-row .drag-handle-cell {
    display: table-cell !important;
    min-width: 44px !important; /* Touch target size */
    padding: 10px 8px !important;
  }
  
  .inventory-table-row .drag-handle,
  .needs-table-row .drag-handle {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: grab !important;
    touch-action: none !important; /* Enable touch dragging */
  }
  
  .inventory-table-row .drag-handle:active,
  .needs-table-row .drag-handle:active {
    cursor: grabbing !important;
  }
  
  /* Hide revert button on mobile - move to menu */
  .needs-item-cell a[href="#"] {
    display: none !important;
  }
  
  /* Hide action buttons on mobile - move to menu */
  .needs-actions-cell {
    display: none !important;
  }
  
  /* Hide action buttons on mobile - move to menu */
  .needs-actions-cell {
    display: none !important;
  }
  
  /* Show menu button on mobile for needs items */
  .needs-table-row .needs-menu-cell {
    display: table-cell !important;
  }
  
  /* Improve typography: Title larger, 1-2 lines max */
  .needs-item-cell .needs-name-line,
  .inventory-table-row td:first-child {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important; /* 2 lines max */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
  }
  
  .needs-item-cell .needs-name-line a,
  .needs-item-cell .needs-name-line span {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  
  /* Metadata row: smaller, single line, truncate */
  .needs-item-cell > div > div:not(.needs-name-line) {
    font-size: 0.75rem !important;
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
  }
  
  /* Item info line (Item #, Pack/Sold as) - single line truncate */
  .needs-item-cell .needs-name-line > div > div:last-child {
    font-size: 0.7rem !important;
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin-top: 4px !important;
  }
  
  /* Ensure menu button is visible and accessible on mobile */
  .row-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.4rem !important;
    padding: 8px !important;
  }
  
  /* Reduce padding in table cells on mobile for better density */
  .inventory-table-row td,
  .needs-table-row td {
    padding: 10px 8px !important;
  }
  
  /* Make table cells more compact */
  .inventory-table-row td:first-child,
  .needs-table-row td:first-child {
    padding-left: 12px !important;
  }
  
  /* Ensure menu dropdown is accessible */
  .row-menu-dropdown {
    z-index: 10001 !important;
    min-width: 160px !important;
  }
  
  /* Add menu option for reorder on mobile */
  .row-menu-dropdown .menu-item-reorder {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .inv-card-fields {
    grid-template-columns: 1fr !important;
  }
  .shopping-card-middle {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .shopping-card-bottom {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  .shopping-card-price-section {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 768px) {
    #sidebarRecommendationsPanel,
    .sidebar-wish-catalog-panel,
    .sidebar-faq-panel,
    .sidebar-contact-panel,
    .left-sidebar,
    .el-snackbar {
      transition: none !important;
    }
  }
}

/* ============================================================
   School Name and Year Inline Styles
   Header layout: Line 1 = grade (ELEMENTARY), Line 2 = Equipment List, Line 3 = name + year
   ============================================================ */
#equipment-list-app header .page-header-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

#equipment-list-app header .heading-grade {
  display: block !important;
  font-size: 16px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e6e73 !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

#equipment-list-app header #equipmentHeading {
  max-width: 100%;
  min-width: 0;
  white-space: nowrap !important;
  overflow-wrap: normal;
  margin: 0 0 4px 0 !important;
}

#equipment-list-app header .heading-sub-row {
  display: block !important;
  line-height: 1.4 !important;
}

#equipment-list-app header .heading-sub-row .school-name-inline,
#equipment-list-app header .heading-sub-row .school-year-inline {
  display: inline !important;
}

/* When viewport narrows, allow title to wrap if needed */
@media (max-width: 1000px) {
  #equipment-list-app header #equipmentHeading {
    white-space: normal !important;
  }
}

/* Requested blue button overrides */
input[type="submit"] {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

input[type="submit"]:hover,
button#equipment_load_list_btn:hover,
a.es-import-btn:hover,
button.es-equipment-add-btn:hover,
button#es-switch-standards-btn:hover,
button#es-save-template-inline-btn:hover {
  color: #fff !important;
}

button#equipment_load_list_btn {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

a.es-import-btn {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

button.es-equipment-add-btn {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

button#es-switch-standards-btn {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

button#es-save-template-inline-btn {
  background-color: #2B47D8 !important;
  color: #fff !important;
}

.school-name-inline {
  font-weight: 400;
  color: #666666;
  font-size: 18px;
  margin-left: 4px;
  vertical-align: middle;
}

.school-name-edit-btn {
  font-size: 11px !important;
  padding: 1px 4px !important;
}

.school-name-edit-btn i {
  font-size: 10px !important;
}

.school-name-edit-btn:hover {
  color: #007AFF !important;
}

.school-name-edit-btn:focus {
  outline: none;
}

.school-name-edit-input {
  font: inherit !important;
  padding: 0 2px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #007AFF !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 30vw !important;
  min-width: 80px !important;
  max-width: 400px !important;
  box-sizing: border-box !important;
}

span#schoolYearInline {
  font-size: 18px !important;
  vertical-align: middle !important;
}

.school-year-inline {
  font-weight: 400;
  color: #666666;
  font-size: 18px;
  margin-left: 4px;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
}

.school-year-inline select {
  font-size: 18px !important;
  font-weight: normal;
  color: #666;
  border: none !important;
  background: transparent !important;
  padding: 2px 6px 2px 4px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  cursor: pointer !important;
  outline: none !important;
  display: inline-block !important;
  box-shadow: none !important;
}

/* ============================================================
   Image Tooltip Styles
   ============================================================ */
.equipment-image-tooltip {
  position: absolute;
  z-index: 10000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  max-width: 300px;
  max-height: 300px;
}

.equipment-image-tooltip img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  border-radius: 4px;
}

header {
  padding: 0px;
}

/* ============================================================
   CUSTOM ITEM STYLING
   ============================================================ */
/* Custom item toggle checkbox */
input[type="checkbox"][id^="custom-item-"],
input[type="checkbox"][id^="custom-item-card-"],
input[type="checkbox"][id^="gopher-item-"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: auto !important;
  accent-color: #007AFF;
  background: white;
  border: 1px solid #bfc5cc;
  opacity: 1 !important;
  visibility: visible !important;
}

label[for^="custom-item-"],
label[for^="gopher-item-"] {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

/* Custom item fields container */
.custom-item-fields-container {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  margin-top: 12px;
}

/* Custom item input fields */
.custom-item-fields-container input[type="text"],
.custom-item-fields-container input[type="url"] {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.custom-item-fields-container input[type="text"]:focus,
.custom-item-fields-container input[type="url"]:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.custom-item-fields-container label {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

/* Custom item badge indicator */
.custom-item-badge {
  font-size: 0.7rem;
  color: #fff;
  background: #6c757d;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}

/* Vendor badge */
.vendor-badge {
  font-size: 0.7rem;
  color: #6c757d;
  padding: 2px 6px;
  border-radius: 3px;
  background: #f0f0f0;
  font-weight: 400;
  white-space: nowrap;
}

/* Desktop: hide ratio below name (Target column is visible) */
@media (min-width: 769px) {
  #equipment-list-app .inventory-name-cell .item-ratio-below-name-wrapper {
    display: none !important;
  }
}

@media (min-width: 769px) {
  #equipment-list-app .inventory-controls-container {
    margin-top: -24px !important;
  }
}

@media (min-width: 769px) {
  .container {
    max-width: 100%;
    margin: 0 !important;
    padding: 10px 0 0 0;
    width: 100%;
  }
}

/* FAQ / Contact sidebar buttons full width */
button#sidebarBtnFAQ,
button#sidebarBtnContact {
  width: 100%;
}

/* ============================================================
   MOBILE IMPROVEMENTS - Enhanced Mobile Experience
   ============================================================ */

@media (max-width: 768px) {
  /* ============================================================
     MODALS - Full width, better positioning
     ============================================================ */
  .upload-excel-modal,
  .share-ownership-modal {
    padding: 16px !important;
    align-items: flex-end !important;
  }

  .upload-excel-modal-content,
  .share-ownership-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
  }

  .upload-excel-modal-header,
  .share-ownership-modal-header {
    padding: 16px 20px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--card) !important;
    z-index: 10 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .upload-excel-modal-body,
  .share-ownership-modal-body {
    padding: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ----- Ratio Editor modal: mobile spacing ----- */
  .ratio-editor-overlay {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .ratio-editor-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ratio-editor-box .ratio-editor-title {
    margin: 0 0 8px 0 !important;
    font-size: 1.1rem !important;
  }
  .ratio-editor-box .ratio-editor-subtitle {
    margin: 0 0 12px 0 !important;
    font-size: 0.95rem !important;
  }
  .ratio-editor-box .ratio-editor-ratio-group {
    margin-bottom: 14px !important;
  }
  .ratio-editor-box .ratio-editor-notes-group {
    margin-bottom: 14px !important;
  }
  .ratio-editor-box .ratio-editor-ratio-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    justify-content: flex-start !important;
  }
  .ratio-editor-box .ratio-editor-input {
    width: 48px !important;
    padding: 8px 4px !important;
    font-size: 1rem !important;
  }
  .ratio-editor-box .ratio-editor-examples {
    padding: 10px !important;
    margin-top: 8px !important;
    border-radius: 6px !important;
  }
  .ratio-editor-box .ratio-editor-examples > div {
    font-size: 0.8rem !important;
    margin-bottom: 3px !important;
  }
  .ratio-editor-box .ratio-editor-examples > div:last-child {
    margin-bottom: 0 !important;
  }
  .ratio-editor-box .ratio-editor-notes-group label {
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
  }
  .ratio-editor-box .ratio-editor-notes-textarea {
    padding: 10px !important;
    font-size: 0.9rem !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
  }
  .ratio-editor-box .ratio-editor-buttons {
    gap: 10px !important;
    margin-top: 4px !important;
    flex-wrap: wrap !important;
  }
  .ratio-editor-box .ratio-editor-buttons button {
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* ============================================================
     DROPDOWNS - Better mobile positioning
     (exclude #equipment-list-app header dropdowns - they use absolute below trigger)
     ============================================================ */
  .share-dropdown:not(#settingsDropdown):not(#downloadDropdown) {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--mobile-nav-height) + 20px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - var(--mobile-nav-height) - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
  }
  /* Equipment list app header dropdowns: do NOT use fixed bottom; use absolute below button; no scrollbar, overlay only */
  #equipment-list-app header .settings-menu-anchor #settingsDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  #equipment-list-app header #downloadDropdown {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 10002 !important;
  }
  #equipment-list-app header #downloadDropdown {
    left: 0 !important;
    right: auto !important;
  }

  .share-dropdown-submenu {
    position: fixed !important;
    right: 12px !important;
    left: 12px !important;
    top: auto !important;
    bottom: calc(var(--mobile-nav-height) + 20px) !important;
    width: auto !important;
    min-width: auto !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    margin-right: 0 !important;
  }

  /* ============================================================
     ACTION BUTTONS - Better touch targets
     ============================================================ */
  .action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    touch-action: manipulation !important;
  }

  .action-btn i {
    font-size: 1.1rem !important;
  }

  /* ============================================================
     FORM INPUTS - Better mobile experience
     ============================================================ */
  #equipment-list-app input[type="text"],
  #equipment-list-app input[type="number"],
  #equipment-list-app input[type="email"],
  #equipment-list-app select,
  #equipment-list-app textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0px;
    border-radius: 0 !important;
    touch-action: manipulation !important;
  }

  #equipment-list-app #sidebarContactPanel textarea,
  #equipment-list-app #contactPanelContent textarea {
    min-height: 200px !important;
    height: auto !important;
    padding: 12px 14px !important;
    line-height: 1.45 !important;
  }

  #equipment-list-app input[type="number"] {
    width: 100% !important;
    max-width: 120px !important;
  }

  /* Prevent iOS zoom on focus for class size (tour step 2) and setup fields */
  #equipment-list-app #averageClassSize,
  #equipment-list-app #averageClassSizeInline,
  #equipment-list-app .setup-field-students input,
  #equipment-list-app .setup-field-input,
  #equipment-list-app .setup-field-select {
    font-size: 16px !important;
  }

  .share-dropdown-item {
    min-height: 48px !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    touch-action: manipulation !important;
  }

  /* ============================================================
     HEADER IMPROVEMENTS
     ============================================================ */
  header .page-header {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
  }

  header #equipmentHeading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .school-name-inline,
  span#schoolYearInline,
  .school-year-inline {
    font-size: 14px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
  }

  /* ============================================================
     CARDS AND ITEMS - Better spacing
     ============================================================ */
  .inventory-card,
  .shopping-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  .inventory-card .inv-card-name,
  .shopping-card .shopping-card-equipment-name {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  /* ============================================================
     TABLES - Better mobile table layout
     ============================================================ */
  .inventory-table-row td,
  .needs-table-row td {
    padding: 12px 8px !important;
    font-size: 0.95rem !important;
  }

  .inventory-table-row td:first-child,
  .needs-table-row td:first-child {
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  /* ============================================================
     SEARCH AND FILTERS
     ============================================================ */
  .inventory-search-container input,
  .needs-search-container input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 16px !important;
    min-height: 44px !important;
  }

  /* ============================================================
     SAVE BUTTON AND ACTIONS
     ============================================================ */
  #saveBtn,
  .btn.primary {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
     NOTIFICATIONS - Better positioning
     ============================================================ */
  .el-snackbar {
    bottom: calc(var(--mobile-nav-height) + 16px) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
  }

  /* ============================================================
     SETUP ROW - Better mobile layout
     ============================================================ */
  .setup-row-header {
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  .setup-summary {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* ============================================================
     BOTTOM NAV - Ensure proper spacing (no top hairline / lift shadow)
     ============================================================ */
  #equipment-list-app .left-sidebar {
    box-shadow: none !important;
  }

  .sidebar-btn {
    min-height: 56px !important;
    padding: 10px 8px !important;
    gap: 4px !important;
  }

  .sidebar-btn i {
    font-size: 1.3rem !important;
  }

  .sidebar-btn-label {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  /* ============================================================
     IMPROVE READABILITY
     ============================================================ */
  #equipment-list-app {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  #equipment-list-app p,
  #equipment-list-app span:not(.sidebar-btn-label):not(.sidebar-btn-count) {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* ============================================================
     FIX OVERFLOW ISSUES + FULL-WIDTH MOBILE
     ============================================================ */
  .container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .stage {
    overflow-y: visible !important;
    padding: 0px !important;
  }

  .inventory-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ============================================================
     FULL-WIDTH MOBILE (no side margins/padding)
     ============================================================ */
  .card {
    margin: 0 !important;
  }

  header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ============================================================
     ACTION SHEETS - Better mobile experience
     ============================================================ */
  #elEquipActionSheet {
    border-radius: 18px 18px 0 0 !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important;
  }

  #elEquipActionSheet .el-equip-action-btn {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* ============================================================
   SMALL PHONES (<= 480px) - Extra adjustments
   ============================================================ */
@media (max-width: 480px) {
  header #equipmentHeading {
    font-size: 20px !important;
  }

  .action-btn {
    padding: 8px 10px !important;
    min-width: 40px !important;
  }

  .action-btn span {
    display: none !important;
  }

  .card {
    margin: 0 !important;
  }

  .inventory-card,
  .shopping-card {
    padding: 14px !important;
  }

  .sidebar-btn {
    padding: 8px 6px !important;
    min-height: 52px !important;
  }

  .sidebar-btn-label {
    font-size: 0.7rem !important;
  }
}

/* Share Ownership Modal Styles */
.share-ownership-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999998 !important;
  isolation: isolate;
  align-items: center;
  justify-content: center;
}

/* Site theme header can sit above app modals unless lowered while a modal is open. */
body.equipment-overlay-modal-open .elementor-location-header,
body.equipment-overlay-modal-open .elementor-sticky--active,
body.equipment-overlay-modal-open header[data-elementor-type="header"],
body.equipment-overlay-modal-open .site-header {
  z-index: 100 !important;
}

.share-ownership-modal-content {
  background: #fff;
  border-radius: 12px;
  max-width: 560px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.share-ownership-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.share-ownership-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.share-ownership-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.share-ownership-modal-close:hover {
  background: #f0f0f0;
  color: #000;
}

.share-ownership-modal-body {
  padding: 24px;
}

.share-ownership-modal-body > p {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 1.5;
}

.share-ownership-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-ownership-form label {
  font-weight: 600;
  font-size: 14px;
  color: #1d2327;
}

.share-ownership-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.share-ownership-form input[type="email"]:focus {
  outline: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

.share-ownership-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.share-ownership-actions .button {
  flex: 1;
  min-width: 140px;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.share-ownership-actions .button-primary {
  background: #2B47D8;
  color: #fff;
  border: none;
}

.share-ownership-actions .button-primary:hover {
  background: #1D4ED8;
  color: #fff;
}

.share-ownership-actions .button:not(.button-primary) {
  background: #f0f0f0;
  color: #1d2327;
  border: 1px solid #ddd;
}

.share-ownership-actions .button:not(.button-primary):hover {
  background: #e0e0e0;
}

.share-ownership-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

.share-ownership-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.share-ownership-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.co-owner-managers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.co-owner-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
}

.co-owner-manager-name {
  font-weight: 600;
  color: #111;
  font-size: 14px;
}

.co-owner-manager-meta {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.co-owner-manager-remove {
  border: 1px solid #d63638;
  background: #fff;
  color: #d63638;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.co-owner-manager-remove:hover:not(:disabled) {
  background: #d63638;
  color: #fff;
}

.co-owner-manager-remove:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.co-owner-managers-loading,
.co-owner-managers-empty {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.manage-owners-help {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.manage-owners-help-block {
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
}

.manage-owners-help-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

.manage-owners-help-block p {
  margin: 0 0 12px;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.manage-owners-help-block p:last-child {
  margin-bottom: 0;
}

.manage-owners-copy-link-btn {
  margin-top: 4px;
  background: #2B47D8 !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  flex: none;
  box-shadow: none;
}

.manage-owners-copy-link-btn:hover,
.manage-owners-copy-link-btn:focus {
  background: #1D4ED8 !important;
  color: #fff !important;
}

.manage-owners-list-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

.co-owner-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.co-owner-manager-transfer {
  background: #fff;
  border: 1px solid #007aff;
  color: #007aff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.co-owner-manager-transfer:hover:not(:disabled) {
  background: #f0f7ff;
}

.co-owner-manager-transfer:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  /* Side padding to match rest of page */
  #equipment-list-app .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ----- White content block (grade, title, school/year) ----- */
  #equipment-list-app header .page-header-left {
    padding: 6px 0 6px !important;
    background: #fff !important;
    order: 0 !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* ELEMENTARY - line 1 */
  #equipment-list-app header .heading-grade {
    display: block !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Equipment List - line 2, single line */
  #equipment-list-app header #equipmentHeading {
    display: block !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #1d1d1f !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  /* Name & Year - line 3, same row */
  #equipment-list-app header .heading-sub-row .school-name-inline,
  #equipment-list-app header .heading-sub-row .school-year-inline {
    display: inline !important;
    font-size: 13px !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
  }

  #equipment-list-app header .school-year-inline {
    margin-right: 4px !important;
  }
  #equipment-list-app header .school-year-inline::before {
    content: " | " !important;
    color: #6e6e73 !important;
  }

  /* ----- Filter row: Avg | Filter | New Item | Camera spread across full width -----
     Nested wrappers used to leave a huge empty gap on the right. Flatten with display:contents
     so four controls participate in one flex row with even spacing. */
  #equipment-list-app .inventory-controls-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: space-evenly !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #equipment-list-app .inventory-controls-container > div:first-of-type,
  #equipment-list-app .inventory-controls-container > div:last-of-type {
    display: contents !important;
  }

  #equipment-list-app .inventory-search-wrapper {
    display: none !important;
  }

  /* Control pills - label row + content row, all aligned */
  #equipment-list-app .inventory-control-pill,
  #equipment-list-app .avg-class-size-pill {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
  }

  #equipment-list-app .inventory-control-label-spacer {
    height: 20px !important;
    min-height: 20px !important;
  }

  #equipment-list-app .avg-class-size-pill label {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    line-height: 20px !important;
  }

  #equipment-list-app .avg-class-size-pill .average-class-size-inline {
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    width: 88px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  /* Filter: icon + label — JS sets flex:1 on pill/container; override so row doesn’t overlap */
  #equipment-list-app .inventory-controls-container .inventory-filter-btn-inline,
  #equipment-list-app .inventory-controls-container button.inventory-filter-btn-inline {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #equipment-list-app .inventory-controls-container .inventory-filter-btn-inline i.fa-filter {
    font-size: 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #equipment-list-app .inventory-control-pill .inventory-filter-btn-inline,
  #equipment-list-app .inventory-control-pill .inventory-create-btn-inline {
    height: 40px !important;
  }

  #equipment-list-app .inventory-controls-container .inventory-control-pill:has(.inventory-filter-btn-inline) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 34% !important;
  }

  #equipment-list-app .inventory-controls-container .inventory-control-pill:has(.inventory-filter-btn-inline) > div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #equipment-list-app .inventory-controls-container .inventory-control-pill:has(.inventory-quick-scan-btn) {
    flex: 0 0 auto !important;
  }

  /*
   * Filter dropdown: anchor from the left so the menu is not clipped by .container overflow.
   */
  #equipment-list-app .inventory-controls-container,
  #equipment-list-app .inventory-controls-container > div:first-of-type {
    overflow: visible !important;
  }
  #equipment-list-app .inventory-filter-container {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    min-width: min(260px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }

  /* + New Item: intrinsic width so space-evenly can distribute gaps (avoid width:100% swallowing row) */
  #equipment-list-app .inventory-controls-container .inventory-control-pill:has(.inventory-create-btn-inline) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 38% !important;
  }
  #equipment-list-app .inventory-controls-container .btn.primary#addBtn,
  #equipment-list-app .inventory-controls-container .inventory-create-btn-inline {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #007AFF !important;
    color: #fff !important;
    border: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 38px !important;
  }

  /* Hide Delete button on mobile */
  #equipment-list-app .inventory-delete-btn,
  #equipment-list-app .inventory-controls-container .inventory-delete-btn,
  #equipment-list-app button.inventory-delete-btn {
    display: none !important;
  }

  /* ----- Wish List panel: show search on mobile (catalog suggestions use it); wrap toolbar ----- */
  #equipment-list-app .needs-search-wrapper {
    display: block !important;
    flex: 1 1 160px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #equipment-list-app .needs-search-container {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  #equipment-list-app .needs-email-request-btn,
  #equipment-list-app .needs-get-quote-btn,
  #equipment-list-app .needs-create-btn-inline {
    padding: 8px 14px !important;
    font-size: 13px !important;
    gap: 6px !important;
  }
  #equipment-list-app .needs-clear-btn {
    display: none !important;
  }

  /* ----- Mobile Inventory Table ----- */
  #equipment-list-app .inventory-table,
  #equipment-list-app .inventory-table-wrapper .inventory-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
  #equipment-list-app .inventory-table-wrapper {
    overflow-x: hidden !important;
  }
  #equipment-list-app .inventory-table-header th,
  #equipment-list-app .inventory-table-row td {
    white-space: normal !important;
  }
  
  /* Break app out to full viewport width (overrides theme/Elementor container) */
  /* Wrapper: viewport breakout to escape parent max-width/padding */
  .equipment-app-full-width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  #equipment-list-app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  #equipment-list-app .inventory-table-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  
  #equipment-list-app .inventory-table-body {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Constrain table parent chain to viewport */
  
  #equipment-list-app .stage,
  #equipment-list-app .card,
  #equipment-list-app .content-wrapper,
  #equipment-list-app .lane,
  #equipment-list-app .lane.lane-my,
  #equipment-list-app .lane.lane-essential,
  #equipment-list-app #essentialList,
  #equipment-list-app .essential-list-content {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Override inline min-width on progress bars that can force table wider */
  #equipment-list-app .short-container .progress-bar-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* Th - very compact */
  #equipment-list-app .inventory-table-header th {
    padding: 4px 2px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    background: #f8f9fa !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Hide drag handle, Target, and Action columns */
  #equipment-list-app .inventory-table-header th:nth-child(1),
  #equipment-list-app .inventory-table-header th:nth-child(4),
  #equipment-list-app .inventory-table-header th:nth-child(6) {
    display: none !important;
  }
  
  /* Column widths: Item 25%, On Hand 22%, Inventory 53% - all visible */
  #equipment-list-app .inventory-table-header th:nth-child(2) { width: 25% !important; min-width: 0 !important; text-align: left !important; padding-left: 6px !important; }
  #equipment-list-app .inventory-table-header th:nth-child(3) { width: 22% !important; min-width: 0 !important; text-align: center !important; }
  #equipment-list-app .inventory-table-header th:nth-child(5) { width: 53% !important; min-width: 0 !important; text-align: center !important; }
  
  /* Table rows - hide drag handle, Target, and Action columns on mobile (main inventory only, not Equipment Ideas) */
  #equipment-list-app #myList .inventory-table-row td:nth-child(1),
  #equipment-list-app #myList .inventory-table-row td:nth-child(4),
  #equipment-list-app #myList .inventory-table-row td:nth-child(6) {
    display: none !important;
  }
  
  /* Row styling - compact */
  #equipment-list-app .inventory-table-row {
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  #equipment-list-app .inventory-table-row td {
    padding: 10px 10px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    background: white !important;
    min-width: 0 !important;
  }
  
  /* Item column - wrap long names to 2nd row */
  #equipment-list-app .inventory-table-row td.inventory-name-cell {
    text-align: left !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    color: #1d1d1f !important;
    padding-left: 6px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 25% !important;
  }

  /* Ratio and edit button below product name - single line */
  #equipment-list-app .inventory-name-cell .item-ratio-below-name-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #equipment-list-app .inventory-name-cell .item-ratio-below-name {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #6e6e73 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #equipment-list-app .inventory-name-cell .item-ratio-edit-btn {
    display: inline-flex !important;
    padding: 1px 2px !important;
    font-size: 9px !important;
    color: #6e6e73 !important;
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }
  
  /* On Hand column - compact input */
  #equipment-list-app .inventory-table-row td.items-owned-cell {
    text-align: center !important;
    padding: 4px 2px !important;
    width: 22% !important;
  }
  
  #equipment-list-app .inventory-table-row td.items-owned-cell input {
    width: 36px !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 3px 2px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
  }
  
  /* Inventory/Short column - compact pill, contain progress bar */
  #equipment-list-app .inventory-table-row td.short-cell {
    text-align: center !important;
    padding: 4px 2px !important;
    width: 53% !important;
    overflow: hidden !important;
  }

  #equipment-list-app .inventory-table-row td.short-cell .short-container {
    overflow: hidden !important;
  }

  /* Inventory container - compact, no overflow */
  #equipment-list-app .short-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  #equipment-list-app .short-container .progress-bar-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #equipment-list-app .short-container .progress-bar-fill,
  #equipment-list-app .short-container .progress-bar-remainder {
    display: none !important;
  }

  /* Compact pill - fit within column */
  #equipment-list-app .short-container .progress-numbers {
    position: static !important;
    display: inline-flex !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    background: #e5e7eb !important;
    color: #374151 !important;
    border: none !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #equipment-list-app .short-container[data-status="met"] .progress-numbers {
    background: #22c55e !important;
    color: #fff !important;
  }

  #equipment-list-app .short-container[data-status="short"] .progress-numbers {
    background: #f59e0b !important;
    color: #fff !important;
  }

  #equipment-list-app .short-container[data-status="zero"] .progress-numbers {
    background: #ef4444 !important;
    color: #fff !important;
  }

  /* Compact action row - no overflow */
  #equipment-list-app .inventory-levels-action-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
    margin-top: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #equipment-list-app .action-met,
  #equipment-list-app .action-wishlist-badge {
    font-size: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  #equipment-list-app .action-met { color: #22c55e !important; }
  #equipment-list-app .action-met i { font-size: 7px !important; }
  #equipment-list-app .action-wishlist-badge { color: #22c55e !important; }
  #equipment-list-app .action-wishlist-badge i { font-size: 7px !important; }
  #equipment-list-app .action-add-to-needs-btn { color: #007AFF !important; font-size: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
  #equipment-list-app .action-add-to-needs-btn i { font-size: 7px !important; }

  /* ----- Bottom nav: light background, 3 buttons only (Inventory, Wish List, Equipment Ideas) ----- */
  #equipment-list-app .left-sidebar {
    background: #fff !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  /* Hide FAQ & Contact in bottom nav — available from the settings dropdown */
  #equipment-list-app #sidebarBtnFAQ,
  #equipment-list-app #sidebarBtnContact {
    display: none !important;
  }

  #equipment-list-app .sidebar-toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 0 8px max(8px, var(--safe-bottom)) 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    overflow: visible !important;
  }

  #equipment-list-app .left-sidebar {
    overflow: visible !important;
  }

  #equipment-list-app .sidebar-btn {
    color: #6e6e73 !important;
    background: transparent !important;
    border-radius: 5px !important;
    min-height: 48px !important;
    min-width: 100%;
    overflow: visible !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 8px !important;
    flex: 1 1 0 !important;
  }

  #equipment-list-app .sidebar-btn i { color: #6e6e73 !important; }
  #equipment-list-app .sidebar-btn .sidebar-btn-label { color: #6e6e73 !important; }
  #equipment-list-app .sidebar-btn .sidebar-btn-count { color: #8e8e93 !important; }

  #equipment-list-app .sidebar-btn:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1d1d1f !important;
  }
  #equipment-list-app .sidebar-btn:hover i,
  #equipment-list-app .sidebar-btn:hover .sidebar-btn-label { color: #1d1d1f !important; }

  #equipment-list-app .sidebar-btn.active {
    background: #2B47D8 !important;
    color: #fff !important;
  }
  #equipment-list-app .sidebar-btn.active i,
  #equipment-list-app .sidebar-btn.active .sidebar-btn-label,
  #equipment-list-app .sidebar-btn.active .sidebar-btn-count { color: #fff !important; }

  /* Keep non-active nav items white/transparent (no light gray card fill) */
  #equipment-list-app .sidebar-btn:not(.active) {
    background: transparent !important;
  }

  #equipment-list-app .sidebar-btn:not(.active):hover {
    background: transparent !important;
    color: #2B47D8 !important;
  }

  #equipment-list-app .sidebar-btn:not(.active):hover i,
  #equipment-list-app .sidebar-btn:not(.active):hover .sidebar-btn-label,
  #equipment-list-app .sidebar-btn:not(.active):hover .sidebar-btn-count {
    color: #2B47D8 !important;
  }

  #equipment-list-app .sidebar-btn:not(.active):focus-visible {
    color: #2B47D8 !important;
  }

  #equipment-list-app .sidebar-btn:not(.active):focus-visible i,
  #equipment-list-app .sidebar-btn:not(.active):focus-visible .sidebar-btn-label,
  #equipment-list-app .sidebar-btn:not(.active):focus-visible .sidebar-btn-count {
    color: #2B47D8 !important;
  }

  #equipment-list-app .sidebar-btn .sidebar-btn-count {
    position: relative !important;
    margin-left: 4px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #equipment-list-app .sidebar-btn .sidebar-btn-label {
    overflow: visible !important;
    white-space: nowrap !important;
  }

  #equipment-list-app button#sidebarBtnNeeds .sidebar-btn-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background: rgba(0,0,0,0.08) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
  }
  #equipment-list-app button#sidebarBtnNeeds.active .sidebar-btn-count {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }
}

/* Login / Create account encouragement banner (guests only) */
#equipment-list-app .login-encouragement-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
  border: 1px solid rgba(43, 71, 216, 0.2);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 20px 0;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#equipment-list-app .login-encouragement-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

#equipment-list-app .login-encouragement-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

#equipment-list-app .login-encouragement-text strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1d1d1f;
}

#equipment-list-app .login-encouragement-text span {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #4a5568;
}

#equipment-list-app .login-encouragement-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#equipment-list-app .login-encouragement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

#equipment-list-app .login-encouragement-btn-primary {
  background: #2B47D8;
  color: #fff;
  border: none;
}

#equipment-list-app .login-encouragement-btn-primary:hover {
  background: #2340c4;
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 71, 216, 0.35);
}

#equipment-list-app .login-encouragement-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

#equipment-list-app .login-encouragement-btn-secondary:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #9ca3af;
}

#equipment-list-app .login-encouragement-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

#equipment-list-app .login-encouragement-dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #374151;
}

@media (max-width: 640px) {
  #equipment-list-app .login-encouragement-banner {
    padding: 16px 36px 16px 16px;
  }
  #equipment-list-app .login-encouragement-content {
    flex-direction: column;
    align-items: stretch;
  }
  #equipment-list-app .login-encouragement-actions {
    justify-content: flex-start;
  }
}

/* Login required modal (shown when guest tries to download report) */
.login-required-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.login-required-modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.login-required-modal-content.login-required-modal-with-iframe {
  max-width: 480px;
}

.login-required-modal-iframe-wrap {
  padding: 0 20px 20px 20px;
}

.login-required-modal-iframe-wrap iframe {
  display: block;
}

.login-required-modal-back:hover {
  text-decoration: underline;
}

.login-required-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
  gap: 12px;
}

.login-required-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
}

.login-required-modal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-required-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #374151;
}

.login-required-modal-body {
  padding: 16px 20px 24px 20px;
}

.login-required-modal-body p {
  margin: 0 0 20px;
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.45;
}

.login-required-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.login-required-modal-actions .login-encouragement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.login-required-modal-actions .login-encouragement-btn-primary {
  background: #2B47D8;
  color: #fff;
  border: none;
}

.login-required-modal-actions .login-encouragement-btn-primary:hover {
  background: #2340c4;
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 71, 216, 0.35);
}

.login-required-modal-actions .login-encouragement-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.login-required-modal-actions .login-encouragement-btn-secondary:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #9ca3af;
}

/* ---- Utility classes extracted from inline styles ---- */
.u-muted-sm { font-size: 0.75rem; color: #6c757d; font-weight: 500; }
.u-link-sm { font-size: 0.75rem; color: #007AFF; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.u-link-sm:hover { text-decoration: underline; }
.u-bg-muted { background: #f8f9fa; }
.u-col-gap8 { display: flex; flex-direction: column; gap: 8px; }
.u-col-gap4 { display: flex; flex-direction: column; gap: 4px; }
.u-row-gap8 { display: flex; align-items: center; gap: 8px; }
.u-row-gap8-flex1 { display: flex; align-items: center; gap: 8px; flex: 1; }
.u-row-gap8-flex1-minw0 { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.u-input-sm { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.85rem; }
.u-center-input { padding: 6px 8px; text-align: center; }
.u-muted-clickable { font-size: 0.75rem; color: #6c757d; cursor: pointer; user-select: none; }
.u-section-title { font-size: 0.9rem; font-weight: 600; color: #495057; }
.u-empty-state { text-align: center; padding: 40px 20px; color: #6c757d; }
.u-table-full { width: 100%; border-collapse: collapse; background: white; }
.u-scroll-panel { position: relative; overflow-y: auto; }
.u-divider { height: 1px; background: #e0e0e0; margin: 8px 0; }

/* ---- Mobile parity hardening for app/webview ---- */
@media (max-width: 900px) {
  .login-required-modal-overlay {
    padding: 10px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .login-required-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
  }

  #loginRequiredModalIframe {
    height: min(70vh, 520px) !important;
  }

  .inventory-controls-container,
  .needs-search-container {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .inventory-search-wrapper,
  .needs-search-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .essential-rec-search-input,
  .inventory-search-input,
  .needs-search-input,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 42px;
  }

  button,
  .btn,
  .share-dropdown-item,
  .login-encouragement-btn {
    min-height: 25px;
    touch-action: manipulation;
  }
}

/* ========================================================
   OFFLINE STATUS INDICATOR & SYNC TOAST
   ======================================================== */
.offline-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
  cursor: default;
}

.offline-status--offline {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.offline-status--syncing {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #60a5fa;
}

.offline-status--pending {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fb923c;
}

.offline-status i {
  font-size: 0.82rem;
  flex-shrink: 0;
}

.offline-status--offline .fa-exclamation-triangle {
  color: #d97706;
}

.offline-status--syncing .fa-sync {
  color: #3b82f6;
}

.offline-status--pending .fa-clock {
  color: #ea580c;
}

.offline-sync-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #065f46;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.offline-sync-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.offline-sync-toast i {
  margin-right: 6px;
  color: #34d399;
}

@media (max-width: 600px) {
  .offline-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    gap: 4px;
  }

  .offline-sync-toast {
    bottom: 16px;
    left: 12px;
    right: 12px;
    transform: translateX(0) translateY(20px);
    text-align: center;
  }
  .offline-sync-toast.visible {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 768px) {
  .inventory-card-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    height: 35px;
  }
}

@media (max-width: 768px) {
  .inventory-card-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    height: 20px;
  }
}

@media (max-width: 768px) {
  .inventory-card-level {
    padding: 4px 12px !important;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  /* Wish List mobile toolbar: show 4 actions in 2 rows */
  #equipment-list-app .needs-search-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #equipment-list-app .needs-search-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #equipment-list-app .needs-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #equipment-list-app .needs-action-buttons .needs-email-request-btn,
  #equipment-list-app .needs-action-buttons .needs-get-quote-btn,
  #equipment-list-app .needs-action-buttons .needs-create-btn-inline,
  #equipment-list-app .needs-action-buttons .needs-more-btn,
  #equipment-list-app .needs-action-buttons .needs-primary-cta,
  #equipment-list-app .needs-action-buttons .needs-clear-btn,
  #equipment-list-app .needs-action-buttons .needs-create-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  /* Final Wish List mobile layout:
     row 1: Email | Get Quote
     row 2: Search | + New Item */
  #equipment-list-app .needs-search-container {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Common case: Email/Get Quote wrapped in action group */
  #equipment-list-app .needs-action-buttons {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #equipment-list-app .needs-action-buttons .needs-email-request-btn,
  #equipment-list-app .needs-action-buttons .needs-get-quote-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #equipment-list-app .needs-search-wrapper {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #equipment-list-app .needs-create-btn-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 38px !important;
  }

  /* Fallback if buttons are direct children (no .needs-action-buttons wrapper) */
  #equipment-list-app .needs-search-container > .needs-email-request-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #equipment-list-app .needs-search-container > .needs-get-quote-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #equipment-list-app .needs-search-container > .needs-search-wrapper {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #equipment-list-app .needs-search-container > .needs-create-btn-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 768px) {
  /* Suggested matches mobile: right rail for price/select, name fills remaining area */
  .needs-item-card .match-button-item {
    position: relative !important;
    display: block !important;
    padding-right: 116px !important;
    min-height: 86px !important;
  }

  .needs-item-card .match-item-main {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 125%;
  }

  .needs-item-card .match-item-main a {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  .needs-item-card .match-price-text {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    margin-right: 0 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }

  .needs-item-card .match-button-item .matches-select-btn {
    position: absolute !important;
    right: 10px !important;
    bottom: 8px !important;
    min-width: 78px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 768px) {
  /* Suggested matches mobile final layout:
     Row 1: G + item name
     Row 2: price (left) + Select (right) */
  .needs-item-card .match-button-item {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "main main"
      "price select" !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
    padding-right: 8px !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  .needs-item-card .match-item-main {
    grid-area: main !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .needs-item-card .match-item-main .equipment-ofg-icon-wrap {
    align-self: start !important;
    margin-top: 2px !important;
  }

  .needs-item-card .match-item-main a {
    display: block !important;
    min-width: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  .needs-item-card .match-price-text {
    grid-area: price !important;
    position: static !important;
    justify-self: start !important;
    align-self: center !important;
    margin-right: 0 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }

  .needs-item-card .match-button-item .matches-select-btn {
    grid-area: select !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 78px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
  }

  span.match-price-text {
    margin-left: 22%;
  }
}

/* Left sidebar (toolbar, slide-outs, pseudo-element handles): no rounded corners */
#equipment-list-app .left-sidebar,
#equipment-list-app .left-sidebar *,
#equipment-list-app .left-sidebar ::before,
#equipment-list-app .left-sidebar ::after {
  border-radius: 0 !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

/* ============================================================
   Blue hover backgrounds → white text (theme/Elementor overrides)
   ============================================================ */
#equipment-list-app .btn.primary:hover,
#equipment-list-app .btn.primary:focus-visible,
#equipment-list-app .btn.primary:active,
#equipment-list-app .save-reminder-btn:hover,
#equipment-list-app .save-reminder-btn:focus-visible,
#equipment-list-app .needs-summary-primary:hover,
#equipment-list-app .needs-summary-primary:focus-visible,
#equipment-list-app .essential-card-add-btn:hover,
#equipment-list-app .essential-card-add-btn:focus-visible,
#equipment-list-app .inventory-controls-container .btn.primary#addBtn:hover,
#equipment-list-app .inventory-controls-container .inventory-create-btn-inline:hover,
#equipment-list-app .needs-create-btn-inline:hover,
#equipment-list-app .needs-get-quote-btn:hover,
#equipment-list-app .needs-email-request-btn:hover,
#equipment-list-app input[type="submit"]:hover,
#equipment-list-app button#equipment_load_list_btn:hover,
#equipment-list-app a.es-import-btn:hover,
#equipment-list-app button.es-equipment-add-btn:hover,
#equipment-list-app button#es-switch-standards-btn:hover,
#equipment-list-app button#es-save-template-inline-btn:hover,
#equipment-list-app .needs-option-btn.needs-option-active:hover,
#equipment-list-app .share-ownership-actions .button-primary:hover,
#equipment-list-app .login-encouragement-btn-primary:hover,
#equipment-list-app .sidebar-btn.active:hover,
#equipment-list-app .sidebar-btn.active:focus-visible,
#equipment-list-app .toggle-btn:hover,
#equipment-list-app .toggle-btn.active:hover,
#equipment-list-app .status-pill.active:hover,
#equipment-list-app .essential-equipment-inv-btn:hover,
#equipment-list-app .inventory-ai-tool-btn-primary:hover,
.login-required-modal-actions .login-encouragement-btn-primary:hover,
.equipment-my-lists .equipment-my-lists__btn--primary:hover,
.equipment-template-library .etl-use-btn:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
}

.equipment-template-library .etl-preview-btn,
.equipment-template-library .etl-preview-btn:hover,
.equipment-template-library .etl-preview-btn:focus,
.equipment-template-library .etl-preview-btn:focus-visible {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.equipment-template-library .etl-preview-btn:hover,
.equipment-template-library .etl-preview-btn:focus,
.equipment-template-library .etl-preview-btn:focus-visible {
  color: #1D4ED8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.equip-demo-fab .equip-demo-start:hover,
.equip-demo-tooltip .equip-demo-get-started:hover,
.equip-demo-tooltip .equip-demo-view-sample:hover,
.equip-demo-tooltip .equip-demo-next:hover,
#elEquipActionSheet .el-as-btn-primary:hover,
#elEquipActionSheet .el-as-btn-primary:focus-visible,
#elEquipActionSheet .el-as-btn-primary:active {
  color: #fff !important;
}

#equipment-list-app .btn.primary:hover i,
#equipment-list-app .btn.primary:hover .fa,
#equipment-list-app .btn.primary:hover .fas,
#equipment-list-app .btn.primary:hover .fa-solid,
#equipment-list-app .btn.primary:hover .sidebar-btn-label,
#equipment-list-app .save-reminder-btn:hover i,
#equipment-list-app .needs-summary-primary:hover i,
#equipment-list-app .sidebar-btn.active:hover i,
#equipment-list-app .sidebar-btn.active:hover .sidebar-btn-label,
#equipment-list-app .sidebar-btn.active:hover .sidebar-btn-count,
#equipment-list-app .essential-equipment-inv-btn:hover i,
#equipment-list-app .essential-equipment-inv-btn:hover .fa,
#equipment-list-app .essential-equipment-inv-btn:hover .fas,
#equipment-list-app .essential-equipment-inv-btn:hover .fa-solid,
#elEquipActionSheet .el-as-btn-primary:hover i,
#elEquipActionSheet .el-as-btn-primary:hover .fa,
#elEquipActionSheet .el-as-btn-primary:hover .fas,
#elEquipActionSheet .el-as-btn-primary:hover .fa-solid {
  color: #fff !important;
}

input[type="submit"]:hover,
button#equipment_load_list_btn:hover,
a.es-import-btn:hover,
button.es-equipment-add-btn:hover,
button#es-switch-standards-btn:hover,
button#es-save-template-inline-btn:hover {
  color: #fff !important;
}

/* Read-only share link (?view=1): inventory + wish list are view-only */
.equipment-readonly #sidebarBtnRecommendations,
.equipment-readonly .inventory-create-btn-inline,
.equipment-readonly .needs-create-btn-inline,
.equipment-readonly .inventory-delete-btn,
.equipment-readonly .needs-delete-all-btn,
.equipment-readonly .needs-email-request-btn,
.equipment-readonly .needs-get-quote-btn,
.equipment-readonly .drag-handle-cell,
.equipment-readonly .drag-handle,
.equipment-readonly .inventory-actions-cell,
.equipment-readonly .needs-actions-cell,
.equipment-readonly .edit-target-btn,
.equipment-readonly .action-add-to-needs-btn,
.equipment-readonly .essential-card-add-btn {
  display: none !important;
}

/* Read-only tables: hide drag + action columns in header and body so labels line up */
.equipment-readonly #myList .inventory-table-header th:first-child,
.equipment-readonly #myList .inventory-table-row td.drag-handle-cell,
.equipment-readonly #myList .inventory-table-header th:last-child,
.equipment-readonly #myList .inventory-table-row td.inventory-actions-cell,
.equipment-readonly #needsList .inventory-table-header th:first-child,
.equipment-readonly #needsList .needs-table-row td.drag-handle-cell,
.equipment-readonly #needsList .inventory-table-header th:last-child,
.equipment-readonly #needsList .needs-table-row td.needs-actions-cell {
  display: none !important;
}

.equipment-readonly .needs-option-select,
.equipment-readonly .needs-custom-fields,
.equipment-readonly .needs-vendor-input,
.equipment-readonly .needs-url-input,
.equipment-readonly .needs-pack-input,
.equipment-readonly .needs-price-input {
  display: none !important;
}

.equipment-readonly .inventory-name-cell input,
.equipment-readonly .needs-name-line input,
.equipment-readonly .inventory-card-name input,
.equipment-readonly .items-owned-cell input,
.equipment-readonly .needs-qty-cell input,
.equipment-readonly .setup-row input,
.equipment-readonly .setup-row textarea,
.equipment-readonly .setup-row select,
.equipment-readonly #schoolName,
.equipment-readonly #teacherName,
.equipment-readonly #averageClassSizeInline {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.equipment-readonly .inventory-search-input,
.equipment-readonly .needs-search-input {
  pointer-events: auto !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
}

.equipment-readonly .inventory-table-row,
.equipment-readonly .needs-table-row,
.equipment-readonly .inventory-item-card {
  cursor: default !important;
}

.equipment-readonly .inventory-name-cell div[title="Double-click to edit"] {
  cursor: default !important;
}

/* Read-only share link notice banner */
.equipment-readonly-notice-banner {
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e3a5f;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.equipment-co-owner-notice-banner {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  color: #14532d;
}

.equipment-co-owner-notice-banner .equipment-readonly-notice-banner__icon {
  background: #16a34a;
}

.equipment-readonly-notice-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.equipment-readonly-notice-banner__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
}

.equipment-readonly-notice-banner__content {
  flex: 1 1 auto;
  min-width: 0;
}

.equipment-readonly-notice-banner__content strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1e3a5f;
}

.equipment-readonly-notice-banner__content p {
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

.equipment-readonly-notice-banner__content p:last-of-type {
  margin-bottom: 0;
}

.equipment-readonly-notice-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.equipment-readonly-notice-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #93c5fd;
  background: #fff;
  color: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.equipment-readonly-notice-banner__btn:hover {
  background: #eff6ff;
  color: #1e40af;
}

.equipment-readonly-notice-banner__btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.equipment-readonly-notice-banner__btn--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

@media (max-width: 768px) {
  .equipment-readonly-notice-banner__inner {
    padding: 14px 14px;
    gap: 12px;
  }

  .equipment-readonly-notice-banner__content strong {
    font-size: 1rem;
  }

  .equipment-readonly-notice-banner__content p {
    font-size: 0.9rem;
  }
}

/* ============================================================
   PAGE SHELL: full-height sidebar rail (desktop)
   Theme header stays identical to other WordPress pages.
   Only the equipment app content is inset for the sidebar.
   ============================================================ */
@media (min-width: 769px) {
  body.el-equipment-page-shell {
    --el-sidebar-width: 115px;
    --el-content-padding-x: 18px;
    --el-theme-header-height: 70px;
    --el-column-left: calc(var(--el-sidebar-width) + var(--el-content-padding-x));
    --el-column-right: var(--el-content-padding-x);
    --el-app-height: calc(100vh - var(--el-theme-header-height));
  }

  body.admin-bar.el-equipment-page-shell {
    --el-app-height: calc(100vh - var(--el-theme-header-height) - 32px);
  }

  body.el-equipment-page-shell #equipment-list-app .left-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: var(--el-theme-header-height) !important;
    bottom: 0 !important;
    height: calc(100vh - var(--el-theme-header-height)) !important;
    min-height: calc(100vh - var(--el-theme-header-height)) !important;
    align-self: auto !important;
    flex: 0 0 var(--el-sidebar-width) !important;
    width: var(--el-sidebar-width) !important;
    z-index: 100 !important;
    margin-left: 0 !important;
    background: #fff !important;
  }

  body.admin-bar.el-equipment-page-shell #equipment-list-app .left-sidebar {
    top: calc(var(--el-theme-header-height) + 32px) !important;
    height: calc(100vh - var(--el-theme-header-height) - 32px) !important;
    min-height: calc(100vh - var(--el-theme-header-height) - 32px) !important;
  }

  /*
   * Fixed sidebar is out of document flow — pad the app shell so content
   * clears the rail. Theme header is not modified.
   */
  body.el-equipment-page-shell #equipment-list-app {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: var(--el-column-left) !important;
    padding-right: var(--el-column-right) !important;
    box-sizing: border-box !important;
  }

  body.el-equipment-page-shell #equipment-list-app .equipment-main-column > header,
  body.el-equipment-page-shell #equipment-list-app header {
    padding-left: var(--el-content-padding-x) !important;
    padding-right: var(--el-content-padding-x) !important;
    padding-top: 16px !important;
    box-sizing: border-box !important;
  }

  body.el-equipment-page-shell #equipment-list-app .equipment-main-column,
  body.el-equipment-page-shell #equipment-list-app .container > header,
  body.el-equipment-page-shell #equipment-list-app .container > .footer,
  body.el-equipment-page-shell #equipment-list-app .app-layout > .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.el-equipment-page-shell #equipment-list-app .container {
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  body.el-equipment-page-shell #equipment-list-app .app-layout {
    width: 100% !important;
    min-height: var(--el-app-height) !important;
    align-items: stretch !important;
  }

  body.el-equipment-page-shell #equipment-list-app .container,
  body.el-equipment-page-shell #equipment-list-app .card {
    min-height: var(--el-app-height) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.el-equipment-page-shell #equipment-list-app .equipment-main-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: var(--el-app-height) !important;
    min-width: 0 !important;
  }

  body.el-equipment-page-shell #equipment-list-app .equipment-main-column > header {
    flex: 0 0 auto !important;
  }

  body.el-equipment-page-shell #equipment-list-app .content-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.el-equipment-page-shell #equipment-list-app .stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
  }

  /* Tab visibility is controlled via inline display on #inventoryPanel / #needsPanel — do not set display here */
  body.el-equipment-page-shell #equipment-list-app .full-panel.equipment-panel,
  body.el-equipment-page-shell #equipment-list-app .full-panel.shopping-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
  }

  body.el-equipment-page-shell #equipment-list-app #myList,
  body.el-equipment-page-shell #equipment-list-app #needsList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.el-equipment-page-shell #equipment-list-app .inventory-controls-container,
  body.el-equipment-page-shell #equipment-list-app .needs-search-container {
    flex: 0 0 auto !important;
  }

  body.el-equipment-page-shell #equipment-list-app .inventory-table-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* Align list toolbars with page header (stage inset + toolbar padding) */
  #equipment-list-app .needs-search-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  body.el-equipment-page-shell {
    padding-left: 0 !important;
  }
}

/* ============================================================
   RAIL DRAWERS — Playbook Templates visual language
   Equipment Recommendations, OFG, What's New, FAQ
   (matches equipment-template-library.css / .etl-shell)
   ============================================================ */
#equipment-list-app {
  --el-drawer-bg: #F8FAFC;
  --el-drawer-surface: #ffffff;
  --el-drawer-border: rgba(226, 232, 240, 0.95);
  --el-drawer-title: #0F172A;
  --el-drawer-text: #334155;
  --el-drawer-muted: #64748B;
  --el-drawer-placeholder: #94A3B8;
  --el-drawer-brand: #2563EB;
  --el-drawer-brand-hover: #1D4ED8;
  --el-drawer-accent: #2B47D8;
  --el-drawer-card-radius: 16px;
  --el-drawer-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#sidebarRecommendationsPanel .el-catalog-search__field::placeholder,
#sidebarWishOfgPanel .el-catalog-search__field::placeholder,
#sidebarWishNewPanel .el-catalog-search__field::placeholder,
.sidebar-wish-catalog-panel .el-catalog-search__field::placeholder {
  color: var(--el-drawer-placeholder) !important;
  font-style: normal !important;
}

/* Drawer shell */
#sidebarRecommendationsPanel,
#sidebarWishOfgPanel,
#sidebarWishNewPanel,
.sidebar-wish-catalog-panel,
#sidebarFAQPanel,
.sidebar-faq-panel {
  background: var(--el-drawer-bg) !important;
  border-right: 1px solid var(--el-drawer-border) !important;
}

#sidebarRecommendationsPanel.expanded,
#sidebarWishOfgPanel.expanded,
#sidebarWishNewPanel.expanded,
.sidebar-wish-catalog-panel.expanded,
#sidebarFAQPanel.expanded,
.sidebar-faq-panel.expanded {
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.08) !important;
}

/* Header bar */
#sidebarRecommendationsPanel .recommendations-panel-header,
#sidebarWishOfgPanel .recommendations-panel-header,
#sidebarWishNewPanel .recommendations-panel-header,
.sidebar-wish-catalog-panel .recommendations-panel-header,
#sidebarFAQPanel .recommendations-panel-header,
.sidebar-faq-panel .recommendations-panel-header {
  padding: 18px 20px !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: var(--el-drawer-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--el-drawer-border) !important;
  border-radius: 0 !important;
}

#sidebarRecommendationsPanel .recommendations-panel-title,
#sidebarWishOfgPanel .recommendations-panel-title,
#sidebarWishNewPanel .recommendations-panel-title,
.sidebar-wish-catalog-panel .recommendations-panel-title,
#sidebarFAQPanel .recommendations-panel-title,
.sidebar-faq-panel .recommendations-panel-title,
#sidebarWishOfgPanel .wish-ofg-panel-heading-inner .recommendations-panel-title {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--el-drawer-title) !important;
  line-height: 1.25 !important;
}

#sidebarRecommendationsPanel .recommendations-panel-close,
#sidebarWishOfgPanel .recommendations-panel-close,
#sidebarWishNewPanel .recommendations-panel-close,
.sidebar-wish-catalog-panel .recommendations-panel-close,
#sidebarFAQPanel .recommendations-panel-close,
.sidebar-faq-panel .recommendations-panel-close {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--el-drawer-muted) !important;
  box-shadow: none !important;
}

#sidebarRecommendationsPanel .recommendations-panel-close:hover,
#sidebarWishOfgPanel .recommendations-panel-close:hover,
#sidebarWishNewPanel .recommendations-panel-close:hover,
.sidebar-wish-catalog-panel .recommendations-panel-close:hover,
#sidebarFAQPanel .recommendations-panel-close:hover,
.sidebar-faq-panel .recommendations-panel-close:hover {
  background: #F1F5F9 !important;
  color: var(--el-drawer-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Scroll body */
#sidebarRecommendationsPanel .recommendations-panel-content,
#sidebarWishOfgPanel .recommendations-panel-content,
#sidebarWishNewPanel .recommendations-panel-content,
.sidebar-wish-catalog-panel .recommendations-panel-content,
#sidebarFAQPanel .recommendations-panel-content,
.sidebar-faq-panel .recommendations-panel-content,
#sidebarFAQPanel .faq-panel-content,
.sidebar-faq-panel .faq-panel-content {
  margin: 0 !important;
  padding: 16px 18px 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--el-drawer-bg) !important;
}

/* Catalog search — match .etl-toolbar */
#sidebarRecommendationsPanel .el-catalog-search,
#sidebarWishOfgPanel .el-catalog-search,
#sidebarWishNewPanel .el-catalog-search,
.sidebar-wish-catalog-panel .el-catalog-search {
  margin-bottom: 10px !important;
}

#sidebarRecommendationsPanel .el-catalog-sort,
#sidebarWishOfgPanel .el-catalog-sort,
#sidebarWishNewPanel .el-catalog-sort,
.sidebar-wish-catalog-panel .el-catalog-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px !important;
}

#sidebarRecommendationsPanel .el-catalog-sort__label,
#sidebarWishOfgPanel .el-catalog-sort__label,
#sidebarWishNewPanel .el-catalog-sort__label,
.sidebar-wish-catalog-panel .el-catalog-sort__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--el-drawer-muted);
  white-space: nowrap;
}

#sidebarRecommendationsPanel .el-catalog-sort__select,
#sidebarWishOfgPanel .el-catalog-sort__select,
#sidebarWishNewPanel .el-catalog-sort__select,
.sidebar-wish-catalog-panel .el-catalog-sort__select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 0.875rem;
  color: var(--el-drawer-title);
  background: var(--el-drawer-surface);
  border: 1px solid var(--el-drawer-border);
  border-radius: 10px;
  box-shadow: var(--el-drawer-card-shadow);
  cursor: pointer;
}

#sidebarRecommendationsPanel .el-catalog-sort__select:focus,
#sidebarWishOfgPanel .el-catalog-sort__select:focus,
#sidebarWishNewPanel .el-catalog-sort__select:focus,
.sidebar-wish-catalog-panel .el-catalog-sort__select:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#sidebarRecommendationsPanel .el-catalog-search__inner,
#sidebarWishOfgPanel .el-catalog-search__inner,
#sidebarWishNewPanel .el-catalog-search__inner,
.sidebar-wish-catalog-panel .el-catalog-search__inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  min-height: 48px !important;
  background: var(--el-drawer-surface) !important;
  border: 1px solid var(--el-drawer-border) !important;
  border-radius: var(--el-drawer-card-radius) !important;
  box-shadow: var(--el-drawer-card-shadow) !important;
  overflow: hidden !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.1a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
}

#sidebarRecommendationsPanel .el-catalog-search__field,
#sidebarWishOfgPanel .el-catalog-search__field,
#sidebarWishNewPanel .el-catalog-search__field,
.sidebar-wish-catalog-panel .el-catalog-search__field {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 16px 0 42px !important;
  font-size: 14px !important;
  line-height: 48px !important;
  color: var(--el-drawer-title) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

#sidebarRecommendationsPanel .el-catalog-search__field:focus,
#sidebarWishOfgPanel .el-catalog-search__field:focus,
#sidebarWishNewPanel .el-catalog-search__field:focus,
.sidebar-wish-catalog-panel .el-catalog-search__field:focus {
  outline: none !important;
  box-shadow: none !important;
}

#sidebarRecommendationsPanel .el-catalog-search__btn,
#sidebarWishOfgPanel .el-catalog-search__btn,
#sidebarWishNewPanel .el-catalog-search__btn,
.sidebar-wish-catalog-panel .el-catalog-search__btn {
  display: none !important;
}

#sidebarWishOfgPanel .el-wish-catalog-note,
#sidebarWishNewPanel .el-wish-catalog-note,
.sidebar-wish-catalog-panel .el-wish-catalog-note {
  color: #475569 !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}

/* Category accordion headers — pill buttons (click to expand cards) */
#sidebarRecommendationsPanel tr.category-header-row,
#sidebarWishOfgPanel tr.category-header-row,
#sidebarWishNewPanel tr.category-header-row,
.sidebar-wish-catalog-panel tr.category-header-row {
  background: transparent !important;
  cursor: pointer !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td,
#sidebarWishOfgPanel tbody tr.category-header-row td,
#sidebarWishNewPanel tbody tr.category-header-row td,
.sidebar-wish-catalog-panel tbody tr.category-header-row td {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--el-drawer-title) !important;
}

#sidebarRecommendationsPanel tbody.wish-catalog-category-group + tbody.wish-catalog-category-group tr.category-header-row td,
#sidebarWishOfgPanel tbody.wish-catalog-category-group + tbody.wish-catalog-category-group tr.category-header-row td,
#sidebarWishNewPanel tbody.wish-catalog-category-group + tbody.wish-catalog-category-group tr.category-header-row td,
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group + tbody.wish-catalog-category-group tr.category-header-row td {
  padding-top: 0 !important;
  border-top: none !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row + tr.category-header-row td,
#sidebarWishOfgPanel tbody tr.category-header-row + tr.category-header-row td,
#sidebarWishNewPanel tbody tr.category-header-row + tr.category-header-row td,
.sidebar-wish-catalog-panel tbody tr.category-header-row + tr.category-header-row td {
  border-top: none !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8,
#sidebarRecommendationsPanel tbody tr.category-header-row td .el-drawer-category-btn,
#sidebarWishOfgPanel tbody tr.category-header-row td .el-drawer-category-btn,
#sidebarWishNewPanel tbody tr.category-header-row td .el-drawer-category-btn,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .el-drawer-category-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 8px !important;
  padding: 12px 14px !important;
  background: var(--el-drawer-surface) !important;
  border: 1px solid var(--el-drawer-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--el-drawer-card-shadow) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8::before,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8::before,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8::before,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8::before {
  content: none !important;
  display: none !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row:hover td .u-row-gap8,
#sidebarWishOfgPanel tbody tr.category-header-row:hover td .u-row-gap8,
#sidebarWishNewPanel tbody tr.category-header-row:hover td .u-row-gap8,
.sidebar-wish-catalog-panel tbody tr.category-header-row:hover td .u-row-gap8 {
  background: #F8FAFC !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-right),
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-right),
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-right),
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-right) {
  background: var(--el-drawer-surface) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down),
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down),
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down),
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down) {
  background: #EFF6FF !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 > .fa-solid,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8 > .fa-solid,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8 > .fa-solid,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 > .fa-solid {
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  font-size: 0.8rem !important;
  color: var(--el-drawer-muted) !important;
  flex-shrink: 0 !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down) > .fa-solid,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down) > .fa-solid,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down) > .fa-solid,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8:has(.fa-angle-down) > .fa-solid {
  color: var(--el-drawer-brand) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 span,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8 span,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8 span,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 1 !important;
  text-align: left !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--el-drawer-title) !important;
}

#sidebarRecommendationsPanel tbody tr.category-header-row td .u-row-gap8 span::before,
#sidebarWishOfgPanel tbody tr.category-header-row td .u-row-gap8 span::before,
#sidebarWishNewPanel tbody tr.category-header-row td .u-row-gap8 span::before,
.sidebar-wish-catalog-panel tbody tr.category-header-row td .u-row-gap8 span::before {
  content: none !important;
  display: none !important;
}

/* Strip table chrome from drawer catalog accordions */
#sidebarRecommendationsPanel .lane-wish-catalog table.inventory-table,
#sidebarWishOfgPanel .lane-wish-catalog table.inventory-table,
#sidebarWishNewPanel .lane-wish-catalog table.inventory-table,
.sidebar-wish-catalog-panel .lane-wish-catalog table.inventory-table,
#sidebarRecommendationsPanel .inventory-table {
  width: 100% !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

#sidebarRecommendationsPanel tr.category-header-row,
#sidebarWishOfgPanel tr.category-header-row,
#sidebarWishNewPanel tr.category-header-row,
.sidebar-wish-catalog-panel tr.category-header-row,
#sidebarRecommendationsPanel tbody.wish-catalog-category-group,
#sidebarWishOfgPanel tbody.wish-catalog-category-group,
#sidebarWishNewPanel tbody.wish-catalog-category-group,
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group {
  border: none !important;
  box-shadow: none !important;
}

#sidebarRecommendationsPanel .lane-wish-catalog td,
#sidebarRecommendationsPanel .lane-wish-catalog th,
#sidebarRecommendationsPanel .lane-essential td,
#sidebarRecommendationsPanel .lane-essential th,
#sidebarWishOfgPanel .lane-wish-catalog td,
#sidebarWishOfgPanel .lane-wish-catalog th,
#sidebarWishNewPanel .lane-wish-catalog td,
#sidebarWishNewPanel .lane-wish-catalog th,
.sidebar-wish-catalog-panel .lane-wish-catalog td,
.sidebar-wish-catalog-panel .lane-wish-catalog th,
#sidebarRecommendationsPanel .inventory-table td,
#sidebarRecommendationsPanel .inventory-table th,
#sidebarWishOfgPanel .inventory-table td,
#sidebarWishOfgPanel .inventory-table th,
#sidebarWishNewPanel .inventory-table td,
#sidebarWishNewPanel .inventory-table th,
.sidebar-wish-catalog-panel .inventory-table td,
.sidebar-wish-catalog-panel .inventory-table th {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#sidebarRecommendationsPanel tr.wish-catalog-gap-after-category,
#sidebarWishOfgPanel tr.wish-catalog-gap-after-category,
#sidebarWishNewPanel tr.wish-catalog-gap-after-category,
.sidebar-wish-catalog-panel tr.wish-catalog-gap-after-category {
  display: none !important;
}

#sidebarRecommendationsPanel tr.wish-catalog-card-shell td,
#sidebarWishOfgPanel tr.wish-catalog-card-shell td,
#sidebarWishNewPanel tr.wish-catalog-card-shell td,
.sidebar-wish-catalog-panel tr.wish-catalog-card-shell td,
#sidebarRecommendationsPanel tr.essential-category-shell td {
  padding: 4px 0 16px !important;
  border: none !important;
}

/* Extra breathing room before the next category after an expanded item list */
#sidebarRecommendationsPanel tr.wish-catalog-card-shell + tr.category-header-row td .el-drawer-category-btn,
#sidebarRecommendationsPanel tr.essential-category-shell + tr.category-header-row td .el-drawer-category-btn,
#sidebarWishOfgPanel tbody.wish-catalog-category-group:has(tr.wish-catalog-card-shell) + tbody.wish-catalog-category-group tr.category-header-row td .el-drawer-category-btn,
#sidebarWishNewPanel tbody.wish-catalog-category-group:has(tr.wish-catalog-card-shell) + tbody.wish-catalog-category-group tr.category-header-row td .el-drawer-category-btn,
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group:has(tr.wish-catalog-card-shell) + tbody.wish-catalog-category-group tr.category-header-row td .el-drawer-category-btn {
  margin-top: 12px !important;
}

/* Item cards — match .etl-card (single-line row) */
#sidebarRecommendationsPanel .needs-catalog-suggestion-row,
#sidebarWishOfgPanel .needs-catalog-suggestion-row,
#sidebarWishNewPanel .needs-catalog-suggestion-row,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-row,
#sidebarRecommendationsPanel .needs-catalog-suggestion-row.essential-equipment-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  background: var(--el-drawer-surface) !important;
  border: 1px solid var(--el-drawer-border) !important;
  border-radius: var(--el-drawer-card-radius) !important;
  box-shadow: var(--el-drawer-card-shadow) !important;
  font-size: 0.875rem !important;
}

#sidebarRecommendationsPanel .needs-catalog-suggestion-left,
#sidebarWishOfgPanel .needs-catalog-suggestion-left,
#sidebarWishNewPanel .needs-catalog-suggestion-left,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#sidebarRecommendationsPanel .needs-catalog-suggestion-name,
#sidebarWishOfgPanel .needs-catalog-suggestion-name,
#sidebarWishNewPanel .needs-catalog-suggestion-name,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-name,
#sidebarRecommendationsPanel .needs-catalog-suggestion-name.essential-equipment-name,
#sidebarRecommendationsPanel a.needs-catalog-suggestion-name,
#sidebarWishOfgPanel a.needs-catalog-suggestion-name,
#sidebarWishNewPanel a.needs-catalog-suggestion-name,
.sidebar-wish-catalog-panel a.needs-catalog-suggestion-name {
  color: var(--el-drawer-title) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#sidebarRecommendationsPanel a.needs-catalog-suggestion-name:hover,
#sidebarWishOfgPanel a.needs-catalog-suggestion-name:hover,
#sidebarWishNewPanel a.needs-catalog-suggestion-name:hover,
.sidebar-wish-catalog-panel a.needs-catalog-suggestion-name:hover {
  color: var(--el-drawer-brand) !important;
  text-decoration: none !important;
}

#sidebarRecommendationsPanel .needs-catalog-suggestion-price,
#sidebarWishOfgPanel .needs-catalog-suggestion-price,
#sidebarWishNewPanel .needs-catalog-suggestion-price,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-price {
  color: var(--el-drawer-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#sidebarRecommendationsPanel .needs-catalog-suggestion-btn,
#sidebarWishOfgPanel .needs-catalog-suggestion-btn,
#sidebarWishNewPanel .needs-catalog-suggestion-btn,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-btn {
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--el-drawer-brand) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#sidebarRecommendationsPanel .needs-catalog-suggestion-btn:hover,
#sidebarWishOfgPanel .needs-catalog-suggestion-btn:hover,
#sidebarWishNewPanel .needs-catalog-suggestion-btn:hover,
.sidebar-wish-catalog-panel .needs-catalog-suggestion-btn:hover {
  background: var(--el-drawer-brand-hover) !important;
  color: #fff !important;
}

#sidebarRecommendationsPanel .wish-catalog-category-stack,
#sidebarWishOfgPanel .wish-catalog-category-stack,
#sidebarWishNewPanel .wish-catalog-category-stack,
.sidebar-wish-catalog-panel .wish-catalog-category-stack {
  gap: 4px !important;
}

#sidebarWishOfgPanel .lane-wish-catalog .inventory-table-wrapper,
#sidebarWishNewPanel .lane-wish-catalog .inventory-table-wrapper,
.sidebar-wish-catalog-panel .lane-wish-catalog .inventory-table-wrapper,
#sidebarRecommendationsPanel .inventory-table-wrapper {
  padding: 0 !important;
  background: transparent !important;
}

#sidebarWishOfgPanel tbody.wish-catalog-category-group:first-of-type tr.category-header-row td,
#sidebarWishNewPanel tbody.wish-catalog-category-group:first-of-type tr.category-header-row td,
#sidebarRecommendationsPanel tbody.wish-catalog-category-group:first-of-type tr.category-header-row td,
.sidebar-wish-catalog-panel tbody.wish-catalog-category-group:first-of-type tr.category-header-row td,
#sidebarRecommendationsPanel tbody tr.category-header-row:first-child td {
  border-top: none !important;
}

#sidebarRecommendationsPanel .recommendations-panel-content,
#sidebarWishOfgPanel .recommendations-panel-content,
#sidebarWishNewPanel .recommendations-panel-content,
.sidebar-wish-catalog-panel .recommendations-panel-content {
  padding: 20px 20px 28px !important;
}

/* FAQ accordion — card style */
#sidebarFAQPanel .faq-empty-msg,
.sidebar-faq-panel .faq-empty-msg {
  margin: 0;
  padding: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  border-radius: 14px;
  background: transparent;
  color: var(--el-drawer-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

#sidebarFAQPanel .faq-item,
.sidebar-faq-panel .faq-item {
  margin: 0 0 10px !important;
  padding: 14px 16px !important;
  background: var(--el-drawer-surface) !important;
  border: 1px solid var(--el-drawer-border) !important;
  border-radius: var(--el-drawer-card-radius) !important;
  box-shadow: var(--el-drawer-card-shadow) !important;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

#sidebarFAQPanel .faq-item:hover,
.sidebar-faq-panel .faq-item:hover {
  border-color: rgba(203, 213, 225, 0.95) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 16px !important;
  margin: 0 0 10px !important;
}

#sidebarFAQPanel .faq-item.is-open,
.sidebar-faq-panel .faq-item.is-open {
  border-color: rgba(37, 99, 235, 0.25) !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08) !important;
}

#sidebarFAQPanel .faq-question,
.sidebar-faq-panel .faq-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--el-drawer-title);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

#sidebarFAQPanel .faq-question span,
.sidebar-faq-panel .faq-question span {
  flex: 1 1 auto;
  min-width: 0;
}

#sidebarFAQPanel .faq-chevron,
.sidebar-faq-panel .faq-chevron {
  flex-shrink: 0;
  margin-top: 0.2em;
  font-size: 0.7rem;
  color: var(--el-drawer-muted);
  transition: transform 200ms ease, color 160ms ease;
}

#sidebarFAQPanel .faq-item.is-open .faq-chevron,
.sidebar-faq-panel .faq-item.is-open .faq-chevron {
  transform: rotate(90deg);
  color: var(--el-drawer-brand);
}

#sidebarFAQPanel .faq-question:hover,
.sidebar-faq-panel .faq-question:hover {
  color: var(--el-drawer-accent);
}

#sidebarFAQPanel .faq-answer,
.sidebar-faq-panel .faq-answer {
  display: none;
  margin: 10px 0 0 22px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--el-drawer-muted);
}

#sidebarFAQPanel .faq-item.is-open .faq-answer,
.sidebar-faq-panel .faq-item.is-open .faq-answer {
  display: block;
}

#sidebarFAQPanel .faq-answer[hidden],
.sidebar-faq-panel .faq-answer[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  #sidebarRecommendationsPanel,
  #sidebarWishOfgPanel,
  #sidebarWishNewPanel,
  .sidebar-wish-catalog-panel,
  #sidebarFAQPanel,
  .sidebar-faq-panel {
    background: var(--el-drawer-bg) !important;
  }

  #sidebarRecommendationsPanel tr.category-header-row,
  #sidebarWishOfgPanel tr.category-header-row,
  #sidebarWishNewPanel tr.category-header-row,
  .sidebar-wish-catalog-panel tr.category-header-row {
    background: transparent !important;
  }

  #sidebarRecommendationsPanel .needs-catalog-suggestion-row,
  #sidebarWishOfgPanel .needs-catalog-suggestion-row,
  #sidebarWishNewPanel .needs-catalog-suggestion-row,
  .sidebar-wish-catalog-panel .needs-catalog-suggestion-row {
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
  }
}