/* Product Library Modal Styles */
/* Scoped to modal to avoid conflicts with main app styles */
/* Version 2.0 - Comprehensive alignment and styling improvements */

/* ==================================================
   1. MODAL CONTAINER & Z-INDEX HIERARCHY
   Above header (2000) and sidebar (1000) so modal is on top of menu
   ================================================== */

#productLibraryModal {
  z-index: 10050 !important; /* Above app header (2000) and sidebar (1000) */
}

#productLibraryModal.show {
  z-index: 10050 !important;
  display: block !important;
}

#productLibraryModal .modal-dialog {
  z-index: 10051 !important;
  max-width: 780px !important;
  width: 780px !important;
  margin: 60px auto 48px auto !important; /* More breathing room at bottom – less locked to frame */
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  height: calc(100vh - 108px) !important; /* 60px top + 48px bottom margin */
  min-height: 400px !important;
  max-height: calc(100vh - 108px) !important;
  pointer-events: auto !important;
}

#productLibraryModal .modal-content {
  z-index: 10051 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 12px 24px -8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  overflow: visible !important; /* So toolbar select dropdowns aren't clipped */
  display: flex;
  flex-direction: column;
  height: 100% !important;
  width: 100%;
  pointer-events: auto !important;
}

/* Ensure backdrop is below modal but over header/sidebar when Product Library is open */
body:has(#productLibraryModal.show) .modal-backdrop {
  z-index: 10049 !important; /* Above header (2000), below modal (10050) */
}

/* Product Library modal must be above backdrop and menu */
#productLibraryModal {
  z-index: 10050 !important; /* Above app header (2000) and sidebar (1000) */
}

#productLibraryModal.show {
  z-index: 10050 !important;
}

/* ==================================================
   2. MODAL BODY & MAIN CONTAINER
   ================================================== */

#productLibraryModal .product-library-modal-body {
  padding: 0 !important;
  background: #ffffff !important;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  overflow: visible !important; /* Changed from hidden to allow sub-modals to show */
  min-height: 0; /* Allow flex children to shrink */
  pointer-events: auto !important;
}

#productLibraryModal .product-library-container {
  padding: var(--pl-space-md) var(--pl-space-lg);
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pl-space);
  overflow: visible;
  min-height: 0;
  pointer-events: auto !important;
}

/* ==================================================
   3. MODAL HEADER - Classic Gray (Match Other Modals)
   ================================================== */

#productLibraryModal .modal-header {
  background: #e5e7eb !important;
  color: #374151 !important;
  padding: var(--pl-space-md) var(--pl-space-lg) !important;
  border-bottom: 1px solid #d1d5db !important;
  box-shadow: none !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

#productLibraryModal .modal-header .header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

#productLibraryModal .modal-header .header-icon {
  font-size: 20px !important;
  opacity: 0.9;
  color: #4b5563;
}

#productLibraryModal .modal-header .header-text {
  flex: 1;
  position: relative;
}

#productLibraryModal .modal-header .title-main {
  display: block;
  font-size: var(--pl-title-size) !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  color: #1f2937;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

#productLibraryModal .modal-header .title-subtitle {
  display: block;
  font-size: var(--pl-subtitle-size) !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding-left: 18px;
  position: relative;
  opacity: 1 !important;
}

/* Decorative accent line before subtitle */
#productLibraryModal .modal-header .title-subtitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1.5px;
  background: #9ca3af;
  border-radius: 2px;
}

#productLibraryModal .modal-header .close {
  color: #6b7280 !important;
  opacity: 0.9;
  font-size: 20px;
  padding: 4px;
  margin: -4px -4px 0 0;
  background: #d1d5db;
  border: 1px solid #9ca3af;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

#productLibraryModal .modal-header .close:hover {
  opacity: 1;
  background: #e5e7eb;
  color: #374151 !important;
}

#productLibraryModal .modal-header .close:focus {
  outline: none;
  box-shadow: 0 0 0 2px #9ca3af;
}

/* CRITICAL: Ensure all interactive elements are clickable */
/* Product Library modal is at body level - must always be interactive */
#productLibraryModal,
#productLibraryModal .modal-dialog,
#productLibraryModal .modal-content,
#productLibraryModal .modal-header,
#productLibraryModal .modal-body,
#productLibraryModal .modal-footer,
#productLibraryModal .pl-toolbar,
#productLibraryModal .pl-toolbar-row,
#productLibraryModal .pl-toolbar-left,
#productLibraryModal .pl-toolbar-right,
#productLibraryModal .filter-section,
#productLibraryModal .modal-footer-section,
#productLibraryModal button,
#productLibraryModal input,
#productLibraryModal select,
#productLibraryModal textarea,
#productLibraryModal .btn,
#productLibraryModal .action-button,
#productLibraryModal .back-button,
#productLibraryModal .close,
#productLibraryModal .folder,
#productLibraryModal .product-item,
#productLibraryModal .file-explorer,
#productLibraryModal #fileExplorer,
#productLibraryModal .breadcrumb-item,
#productLibraryModal .trash-icon-footer,
#productLibraryModal #trashIcon {
  pointer-events: auto !important;
}

/* ==================================================
   SUB-MODALS - CRITICAL INTERACTIVITY FIX
   These modals are at body level with inline styles
   ================================================== */

/* Portal: contains sub-modals so they render on top of Product Library modal */
#plSubModalPortal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}
#plSubModalPortal > * {
  pointer-events: auto !important;
}
/* Ensure Create Folder / Rename prompt modal and ALL descendants receive input (fix typing) */
#plSubModalPortal #plPromptModal,
#plSubModalPortal #plPromptModal * {
  pointer-events: auto !important;
}
#plSubModalPortal input,
#plSubModalPortal textarea,
#plSubModalPortal select,
#plSubModalPortal button {
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
}
#plSubModalPortal #plPromptInput {
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
}
#plSubModalPortal button {
  cursor: pointer !important;
  user-select: none !important;
}
#plSubModalPortal input[type="file"] {
  cursor: pointer !important;
}
/* Ensure modal content (Create Folder / Add Product) is above overlay and receives input */
#plPromptModal,
#plCreateProductModal {
  isolation: isolate !important;
  z-index: 100001 !important;
}
#plPromptModal input,
#plPromptModal textarea,
#plCreateProductModal input,
#plCreateProductModal textarea,
#plCreateProductModal select {
  pointer-events: auto !important;
  user-select: text !important;
}

/* Product Library overlay and modals (pl prefix = no conflict) */
#plModalOverlay,
#modalOverlay {
  pointer-events: auto !important;
  z-index: 99998 !important;
}

/* ALL pl-prefixed sub-modals - comprehensive styling */
#plPromptModal,
#plCreateProductModal,
#plNewFolderModal,
#plConfirmationModal,
#plMoveModal,
#plCustomizeProductModal,
#plPreviewModal {
  pointer-events: auto !important;
  z-index: 99999 !important;
  display: none;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* When shown via JavaScript, ensure visibility */
#plPromptModal[style*="display: block"],
#plPromptModal[style*="display:block"],
#plCreateProductModal[style*="display: block"],
#plCreateProductModal[style*="display:block"],
#plNewFolderModal[style*="display: block"],
#plNewFolderModal[style*="display:block"],
#plConfirmationModal[style*="display: block"],
#plConfirmationModal[style*="display:block"],
#plMoveModal[style*="display: block"],
#plMoveModal[style*="display:block"],
#plCustomizeProductModal[style*="display: block"],
#plCustomizeProductModal[style*="display:block"],
#plPreviewModal[style*="display: block"],
#plPreviewModal[style*="display:block"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Input fields in pl-prefixed modals */
#plPromptModal input,
#plPromptModal #plPromptInput,
#plCreateProductModal input,
#plCreateProductModal textarea,
#plCreateProductModal select,
#plNewFolderModal input,
#plNewFolderModal #plNewFolderName,
#plMoveModal input,
#plMoveModal #moveSearchInput,
#plCustomizeProductModal input,
#plCustomizeProductModal textarea,
#plCustomizeProductModal select {
  pointer-events: auto !important;
  cursor: text !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Buttons in pl-prefixed modals */
#plPromptModal button,
#plCreateProductModal button,
#plNewFolderModal button,
#plConfirmationModal button,
#plMoveModal button,
#plCustomizeProductModal button,
#plPreviewModal button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* File inputs in pl-prefixed modals */
#plCreateProductModal input[type="file"],
#plCustomizeProductModal input[type="file"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* All sub-modals and their children must be interactive */
#promptModal,
#confirmationModal,
#createProductModal,
#customizeProductModal,
#moveModal,
#plMoveModal,
#newFolderModal,
#previewModal,
#trashProgressModal,
#moveProgressModal,
#restoreProgressModal,
#deleteForeverProgressModal {
  pointer-events: auto !important;
}

/* CRITICAL: Input fields in sub-modals must be fully interactive */
#promptModal input,
#promptModal textarea,
#promptModal select,
#promptModal button,
#promptInput,
#confirmationModal button,
#createProductModal input,
#createProductModal textarea,
#createProductModal select,
#createProductModal button,
#productName,
#productModelNumber,
#productPrice,
#productQuantity,
#productImage,
#productDescription,
#htmlFileInput,
#customizeProductModal input,
#customizeProductModal textarea,
#customizeProductModal select,
#customizeProductModal button,
#customProductName,
#customProductModelNumber,
#customProductPrice,
#customProductQuantity,
#customProductDescription,
#customProductImage,
#moveModal input,
#moveModal button,
#plMoveModal input,
#plMoveModal button,
#moveSearchInput,
#newFolderModal input,
#newFolderModal button,
#newFolderName {
  pointer-events: auto !important;
  cursor: text !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Buttons need pointer cursor */
#promptModal button,
#confirmationModal button,
#createProductModal button,
#customizeProductModal button,
#moveModal button,
#plMoveModal button,
#newFolderModal button,
#previewModal button {
  cursor: pointer !important;
}

/* File inputs need pointer cursor */
#productImage,
#customProductImage,
#htmlFileInput {
  cursor: pointer !important;
}

/* ==================================================
   4. RESPONSIVE BREAKPOINTS
   ================================================== */

@media (max-width: 992px) {
  #productLibraryModal .modal-dialog {
    margin: 20px auto !important;
    max-width: 95vw !important;
    width: 95vw !important;
  }
}

@media (max-width: 768px) {
  #productLibraryModal .modal-dialog {
    margin: 10px auto !important;
    max-width: 98vw !important;
    width: 98vw !important;
  }
  
  #productLibraryModal .modal-header {
    padding: 16px 20px !important;
    min-height: 70px;
  }
  
  #productLibraryModal .modal-header .header-icon {
    font-size: 24px !important;
    width: 40px;
    height: 40px;
  }
  
  #productLibraryModal .modal-header .title-main {
    font-size: 1.2rem;
  }
  
  #productLibraryModal .modal-header .title-subtitle {
    font-size: 0.8rem;
  }
  
  #productLibraryModal .product-library-container {
    padding: 16px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  #productLibraryModal .modal-dialog {
    margin: 5px auto !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  
  #productLibraryModal .modal-header .header-content {
    gap: 12px;
  }
  
  #productLibraryModal .modal-header .close {
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}

/* Typography & tokens: one place for hierarchy and spacing.
   Order of UI: (1) Modal title → (2) Toolbar: row1 = where you are + actions, row2 = select/search/filter/sort → (3) List → (4) Footer: trash + batch actions. */
#productLibraryModal {
  --pl-font: 'Roboto', 'Arial', sans-serif;
  --font-family: var(--pl-font);
  --border-radius: 8px;
  --pl-radius: 8px;
  --pl-space: 8px;
  --pl-space-md: 12px;
  --pl-space-lg: 16px;
  --pl-title-size: 1rem;
  --pl-subtitle-size: 0.75rem;
  --pl-toolbar-size: 0.875rem;
  --pl-control-size: 0.8125rem;
  --pl-list-name-size: 0.9375rem;
  --pl-list-meta-size: 0.75rem;
  --primary-color: #667eea;
  --primary-hover: #5a67d8;
  --transition-speed: 0.2s;
  font-family: var(--pl-font);
}

#productLibraryModal * {
  box-sizing: border-box;
}

#productLibraryModal *,
#productLibraryModal input,
#productLibraryModal select,
#productLibraryModal button,
#productLibraryModal textarea {
  font-family: inherit;
}

/*===============================================
  Base Modal Styles - Sleeker & More Polished
===============================================*/
/* Move Modal - scoped to Product Library */
#moveModal,
#plMoveModal {
  width: 650px;
  height: auto;
  max-width: 85%;
  max-height: 85vh;
  overflow: hidden;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0); /* Transparent container */
  padding: 0; /* No padding here, moved to content */
  z-index: 10010 !important; /* Above main modal (10000) and overlay (10005) */
  transition: opacity 0.2s ease-out;
  display: none; /* Hidden by default */
  flex-direction: column; /* Layout when shown, but not affecting visibility */
}

#productLibraryModal .move-breadcrumbs {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: #666;
}

#productLibraryModal .folder-list {
  flex: 1;
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  background-color: #f9fafc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

#productLibraryModal .folder-item {
  padding: 12px 18px;
  background-color: #ffffff;
  margin-bottom: 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
  border: 1px solid transparent;
}

#productLibraryModal .folder-item:hover {
  background-color: #eef2f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border: 1px solid var(--primary-color);
}

#productLibraryModal #moveSearchInput {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  font-size: 1rem;
  background: #fff;
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

#productLibraryModal #moveSearchInput:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.2);
  outline: none;
}

/*===============================================
  Spinner Styles - More Elegant
===============================================*/
#productLibraryModal .spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
}

#productLibraryModal .spinner {
  border: 5px solid #e9ecef;
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*===============================================
  Body & Main Container - Modern & Refined
===============================================*/
#productLibraryModal body {
  font-family: var(--font-family);
  background: transparent;
  position: relative;
}

#productLibraryModal .container {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all var(--transition-speed) ease;
  position: relative;
  padding: 10px;
}

#productLibraryModal h1 {
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

/* Toolbar: Row 1 = location (Back, breadcrumbs) + actions (New Folder, Add Product, Refresh). Row 2 = selection (Select All), then find (Search), then filter (Show All / type), then order (Sort). */
#productLibraryModal .pl-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-md);
  padding: var(--pl-space-md) var(--pl-space-lg);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--pl-radius);
  margin-bottom: var(--pl-space-md);
}

#productLibraryModal .pl-toolbar-row {
  display: flex;
  align-items: center;
  gap: var(--pl-space-md);
  flex-wrap: nowrap;
  min-height: 40px;
  font-size: var(--pl-toolbar-size);
  line-height: 1.4;
}

#productLibraryModal .pl-toolbar-row-1 {
  justify-content: space-between;
}

#productLibraryModal .pl-toolbar-row-2 {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--pl-space-md);
}

#productLibraryModal .pl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#productLibraryModal .pl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#productLibraryModal .pl-toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--pl-toolbar-size);
  font-weight: 500;
  color: #374151;
  margin: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  height: 36px;
  line-height: 36px;
}

#productLibraryModal .pl-toolbar-check input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

#productLibraryModal .pl-toolbar-check span {
  line-height: 1.4;
}

#productLibraryModal .pl-toolbar-row-2 .pl-toolbar-search {
  flex: 1;
  min-width: 200px;
  max-width: none;
  height: 36px;
}

#productLibraryModal .pl-toolbar-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: var(--pl-radius);
  font-size: var(--pl-toolbar-size);
  box-sizing: border-box;
  line-height: 1.4;
}

#productLibraryModal .pl-toolbar-search input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Toolbar selects: compact width so they don't overflow; override global modal select (width:100%; min-width:200px) */
#productLibraryModal .pl-toolbar-select {
  width: auto !important;
  height: 36px;
  padding: 6px 26px 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: var(--pl-radius);
  font-size: var(--pl-control-size);
  color: #374151;
  background: #fff;
  cursor: pointer;
  min-width: 95px !important;
  max-width: 180px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  box-sizing: border-box;
  line-height: 1.35;
}

#productLibraryModal .pl-toolbar-row-2 #filterType {
  min-width: 95px !important;
}

#productLibraryModal .pl-toolbar-row-2 #sortOption {
  min-width: 110px !important;
}

#productLibraryModal .pl-toolbar-select:focus {
  outline: none;
  border-color: #667eea;
}

#productLibraryModal .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

#productLibraryModal .breadcrumb-item {
  cursor: pointer;
  text-decoration: none;
  color: #667eea;
  font-size: var(--pl-control-size);
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 6px var(--pl-space-md);
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid transparent;
}

#productLibraryModal .breadcrumb-item:hover {
  color: #5a67d8;
  background: rgba(102, 126, 234, 0.18);
  border-color: rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

#productLibraryModal .breadcrumb-item:last-child {
  color: #374151;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  font-weight: 600;
  border-color: #d1d5db;
}

/* Breadcrumb separator */
#productLibraryModal .breadcrumbs .separator {
  color: #9ca3af;
  font-size: var(--pl-control-size);
  margin: 0 2px;
}

/*===============================================
  Button Styles - Modern & Consistent
===============================================*/
#productLibraryModal button {
  cursor: pointer;
  font-family: var(--font-family);
  border: none;
  border-radius: var(--border-radius);
  transition: all var(--transition-speed) ease;
  pointer-events: auto !important;
}

#productLibraryModal .back-button {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #d1d5db;
  color: #4b5563;
  padding: 8px var(--pl-space-lg);
  font-size: var(--pl-toolbar-size);
  font-weight: 500;
  min-width: auto;
  white-space: nowrap;
  border-radius: var(--pl-radius);
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#productLibraryModal .back-button:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  color: #fff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

#productLibraryModal .action-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 8px var(--pl-space-lg);
  font-size: var(--pl-toolbar-size);
  font-weight: 500;
  min-width: auto;
  white-space: nowrap;
  border-radius: var(--pl-radius);
  border: none;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
  transition: all 0.2s ease;
}

#productLibraryModal .action-button:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

#productLibraryModal .actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

#productLibraryModal .actions button {
  background: var(--primary-color);
  color: #fff;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

#productLibraryModal .actions button:hover {
  background: var(--primary-hover);
}

/* Confirmation buttons */
#productLibraryModal .confirmation-buttons .yes-btn {
  background: var(--success-color);
  color: #fff;
  padding: 10px 20px;
}

#productLibraryModal .confirmation-buttons .yes-btn:hover {
  background: var(--success-hover);
}

#productLibraryModal .confirmation-buttons .no-btn {
  background: var(--error-color);
  color: #fff;
  padding: 10px 20px;
}

#productLibraryModal .confirmation-buttons .no-btn:hover {
  background: var(--error-hover);
}

/* File explorer: main content area; scrolls independently so toolbar and footer stay fixed. */
#productLibraryModal .file-explorer,
#productLibraryModal .file-explorer-container,
#productLibraryModal #fileExplorer {
  width: 100%;
  flex: 1;
  min-height: 200px;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f8fafc;
  padding: var(--pl-space-md);
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  opacity: 1;
  position: relative;
  border-radius: var(--pl-radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  visibility: visible;
  box-sizing: border-box;
  pointer-events: auto !important;
}

/* Custom scrollbar for file explorer */
#productLibraryModal .file-explorer::-webkit-scrollbar,
#productLibraryModal #fileExplorer::-webkit-scrollbar {
  width: 6px;
}

#productLibraryModal .file-explorer::-webkit-scrollbar-track,
#productLibraryModal #fileExplorer::-webkit-scrollbar-track {
  background: transparent;
}

#productLibraryModal .file-explorer::-webkit-scrollbar-thumb,
#productLibraryModal #fileExplorer::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#productLibraryModal .file-explorer::-webkit-scrollbar-thumb:hover,
#productLibraryModal #fileExplorer::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Empty state message */
#productLibraryModal .file-explorer:empty::after,
#productLibraryModal #fileExplorer:empty::after {
  content: 'No items to display';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  color: #9ca3af;
  font-size: var(--pl-toolbar-size);
  font-style: italic;
}

/*===============================================
  Folder Items - Clean Aligned Style
===============================================*/
#productLibraryModal .folder {
  padding: 10px 14px;
  margin: 0;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  visibility: visible;
  opacity: 1;
  position: relative;
  min-height: 48px;
}

#productLibraryModal .folder:hover {
  background: #fffbeb;
  border-color: #fcd34d;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
}

/* Folder Content - Checkbox, Icon, Name in row */
#productLibraryModal .folder-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

#productLibraryModal .folder-content input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

/* Folder Icon */
#productLibraryModal .folder-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 6px;
  flex-shrink: 0;
}

#productLibraryModal .folder-icon i {
  font-size: 16px;
  color: #d97706;
}

/* Folder Name */
#productLibraryModal .folder-name {
  font-size: var(--pl-list-name-size);
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

#productLibraryModal .folder:hover .folder-name {
  color: #92400e;
}

/*===============================================
  Product Items - Aligned Layout
===============================================*/
#productLibraryModal .product-item {
  padding: 10px 14px;
  margin: 0;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  visibility: visible;
  opacity: 1;
  position: relative;
  min-height: 64px;
}

#productLibraryModal .product-item:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.12);
}

/* Product Info - Checkbox, Image, Details in row */
#productLibraryModal .product-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Product Thumbnail - Bigger and visible */
#productLibraryModal .product-thumb,
#productLibraryModal .product-info img,
#productLibraryModal .product-item img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* Product Details Container - Aligned */
#productLibraryModal .product-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Product Name - on top */
#productLibraryModal .product-name {
  font-size: var(--pl-list-name-size);
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
}

/* Product Meta - below name */
#productLibraryModal .product-meta,
#productLibraryModal [id^="preview-"],
#productLibraryModal [id^="trashPreview-"] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
  margin: 0;
}

/* Legacy product name support */
#productLibraryModal .product-info strong {
  font-size: var(--pl-list-name-size);
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}

/* Product Meta Info Container */
#productLibraryModal .product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  line-height: 1;
}

#productLibraryModal .product-meta .meta-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 8px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: var(--pl-list-meta-size);
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

/* Price - Fixed width, left aligned for flexibility */
#productLibraryModal .product-meta .meta-price {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
  min-width: 95px;
  text-align: left;
  justify-content: flex-start;
}

/* Model/SKU - Fixed width, left aligned with extra space */
#productLibraryModal .product-meta .meta-model {
  background: #f3f4f6;
  color: #4b5563;
  min-width: 120px;
  text-align: left;
  justify-content: flex-start;
}

/* Quantity - Fixed width, left aligned */
#productLibraryModal .product-meta .meta-qty {
  background: #dbeafe;
  color: #1d4ed8;
  min-width: 50px;
  text-align: left;
  justify-content: flex-start;
}

/* Description preview */
#productLibraryModal .meta-desc {
  font-size: var(--pl-list-meta-size);
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.3;
  font-style: italic;
  width: 100%;
}

/* Legacy preview-info support - also used for product-meta */
#productLibraryModal .preview-info,
#productLibraryModal [id^="preview-"],
#productLibraryModal [id^="trashPreview-"] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1;
  font-size: 0.72rem;
}

/*===============================================
  Checkboxes - Modern Styled
===============================================*/
#productLibraryModal .folder input[type="checkbox"],
#productLibraryModal .folder-content input[type="checkbox"],
#productLibraryModal .product-item input[type="checkbox"],
#productLibraryModal .product-info input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #667eea;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  position: relative;
}

#productLibraryModal .folder input[type="checkbox"]::after,
#productLibraryModal .product-item input[type="checkbox"]::after {
  content: '';
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#productLibraryModal .folder input[type="checkbox"]:checked::after,
#productLibraryModal .product-item input[type="checkbox"]:checked::after {
  display: block;
}

#productLibraryModal .folder input[type="checkbox"]:hover,
#productLibraryModal .product-item input[type="checkbox"]:hover {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#productLibraryModal .folder input[type="checkbox"]:checked,
#productLibraryModal .product-item input[type="checkbox"]:checked {
  border-color: #667eea;
  background-color: #667eea;
}

/* Select All checkbox - slightly larger */
#productLibraryModal .filter-section input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: #667eea;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  position: relative;
}

#productLibraryModal .filter-section input[type="checkbox"]::after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#productLibraryModal .filter-section input[type="checkbox"]:checked::after {
  display: block;
}

#productLibraryModal .filter-section input[type="checkbox"]:hover {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#productLibraryModal .filter-section input[type="checkbox"]:checked {
  border-color: #667eea;
  background-color: #667eea;
}

/*===============================================
  Actions Menu - Compact & Clean Design
===============================================*/
#productLibraryModal .folder {
  position: relative;
}

#productLibraryModal .product-item {
  position: relative;
}

#productLibraryModal .actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

#productLibraryModal .folder:hover .actions,
#productLibraryModal .product-item:hover .actions {
  opacity: 1;
}

#productLibraryModal .actions .ellipsis-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #6b7280;
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#productLibraryModal .actions .ellipsis-btn:hover {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}

#productLibraryModal .action-menu {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 6px;
  z-index: 100;
  min-width: auto;
  gap: 4px;
  flex-direction: row;
}

#productLibraryModal .actions .ellipsis-btn.active + .action-menu,
#productLibraryModal .action-menu.active {
  display: flex;
  animation: pop-out 0.2s ease forwards;
}

#productLibraryModal .action-menu button {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border-radius: 5px;
  color: #374151;
}

#productLibraryModal .action-menu button:hover {
  background: #667eea;
  border-color: #667eea;
  color: #ffffff;
}

@keyframes pop-out {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

#productLibraryModal .product-item .action-menu {
  right: 45px;
}

/* Footer: Trash (left, always visible) | divider | batch actions (Move / Send to Trash or Recover / Delete Forever when in Trash). */
#productLibraryModal .modal-footer-section {
  display: flex;
  align-items: center;
  padding: var(--pl-space-md) var(--pl-space-lg);
  min-height: 54px;
  background-color: #f1f5f9;
  border-top: 1px solid #e0e4e8;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
  gap: var(--pl-space-md);
  font-size: var(--pl-toolbar-size);
}

/* Trash Icon - Left side, clean button (no weird box) */
#productLibraryModal .trash-icon-footer,
#productLibraryModal #trashIcon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  color: #dc2626 !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#productLibraryModal .trash-icon-footer i,
#productLibraryModal #trashIcon i {
  font-size: 14px;
  flex-shrink: 0;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit;
}

#productLibraryModal .trash-icon-label {
  white-space: nowrap;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#productLibraryModal .trash-icon-footer:hover,
#productLibraryModal #trashIcon:hover {
  background: #fecaca !important;
  border-color: #f87171 !important;
}

#productLibraryModal .trash-icon-footer:focus,
#productLibraryModal #trashIcon:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* Divider between trash and batch actions */
#productLibraryModal .footer-actions-divider {
  width: 1px;
  height: 24px;
  background: #d1d5db;
  flex-shrink: 0;
}

/* Batch Actions - Centered/Flex area; collapse when hidden so no extra box */
#productLibraryModal .batch-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  flex: 0 0 0;
  min-width: 0;
  width: 0;
  overflow: hidden;
  justify-content: center;
  gap: 10px;
}

#productLibraryModal .batch-actions.show {
  opacity: 1;
  pointer-events: auto;
  flex: 1;
  width: auto;
  min-width: 0;
  overflow: visible;
}

#productLibraryModal .trash-batch-actions {
  display: none;
  align-items: center;
  flex: 0 0 0;
  min-width: 0;
  width: 0;
  overflow: hidden;
  justify-content: center;
  gap: 10px;
}

#productLibraryModal .trash-batch-actions.show,
#productLibraryModal .trash-batch-actions[style*="flex"] {
  display: flex !important;
  flex: 1;
  width: auto;
  overflow: visible;
}

/* Footer buttons - match modal footer button size */
#productLibraryModal .modal-footer-section .btn {
  padding: 8px 18px !important;
  font-size: 0.875rem !important;
  border-radius: 6px;
}

/*===============================================
  Filter Section - Compact & Clean
===============================================*/
#productLibraryModal .filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

#productLibraryModal .filter-section label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  color: #2c3e50;
}

#productLibraryModal .filter-section select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  background-color: #fff;
  font-size: 0.82rem;
  color: #2c3e50;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
  line-height: 1.4;
  height: 36px;
}

#productLibraryModal .filter-section select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.2);
}

#productLibraryModal .search-row {
  display: flex;
  flex: 1;
  min-width: 200px;
}

#productLibraryModal .search-row input {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
  transition: all var(--transition-speed) ease;
}

#productLibraryModal .search-row input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.2);
}

/*===============================================
  Product Info - Legacy Support
===============================================*/
#productLibraryModal .product-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 4px 0;
}

#productLibraryModal .product-info input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  transform: scale(1.1);
}

#productLibraryModal .product-info img {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f3f5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  flex-shrink: 0;
}

#productLibraryModal .preview-info {
  font-size: 0.85rem;
  color: #495057;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  text-align: left;
}

/*===============================================
  Form Inputs & Elements - Clean & Modern
===============================================*/
#productLibraryModal .modal-input {
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
  background: #fff;
  transition: all var(--transition-speed) ease;
  pointer-events: auto !important;
  cursor: text !important;
}

#productLibraryModal .modal-input[type="number"],
#productLibraryModal .modal-input[type="text"] {
  padding-top: 9px;
  padding-bottom: 9px;
}

#productLibraryModal textarea.modal-input {
  min-height: 80px;
}

#productLibraryModal .modal-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.2);
  outline: none;
}

#productLibraryModal input,
#productLibraryModal textarea,
#productLibraryModal select {
  pointer-events: auto !important;
  cursor: text !important;
}

#productLibraryModal input[type="checkbox"] {
  cursor: pointer !important;
}

/*===============================================
  Progress Bars - Modern & Smooth
===============================================*/
#productLibraryModal .progress-bar {
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  height: 20px;
  position: relative;
}

#productLibraryModal .progress-bar-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  text-align: center;
  line-height: 20px;
  color: #fff;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* Animated shine effect */
#productLibraryModal .progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/*===============================================
  Modals & Overlay - Elegant & Smooth
===============================================*/
#productLibraryModal .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1055 !important; /* Above main modal, below sub-modals */
  display: none;
  transition: opacity var(--transition-speed) ease;
}

/* ============================================== */
/* SUB-MODALS CONTAINER - Sits at body level     */
/* ============================================== */
#productLibrarySubModals {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1060; /* Above main modal */
  pointer-events: none;
}

/* Overlay for sub-modals */
#productLibrarySubModals .modal-overlay,
#modalOverlay,
#plModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1059;
  pointer-events: auto;
}

/* All sub-modals base styles */
.pl-submodal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 0;
  max-height: 85vh;
  overflow: visible;
  z-index: 1060;
  pointer-events: auto;
}

/* Sub-modal content */
.pl-submodal .modal-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

/* Sub-modal header */
.pl-submodal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 14px 20px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pl-submodal .modal-header span {
  font-size: 18px;
  font-weight: 700;
  color: white;
  flex: 1;
}

.pl-submodal .modal-header .close {
  color: white;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

.pl-submodal .modal-header .close:hover {
  background: rgba(255,255,255,0.25);
}

/* Sub-modal body */
.pl-submodal .modal-body {
  padding: 20px;
  background: #ffffff;
  pointer-events: auto;
}

/* Sub-modal footer */
.pl-submodal .modal-footer {
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Input fields in sub-modals */
.pl-submodal input[type="text"],
.pl-submodal input[type="number"],
.pl-submodal textarea,
.pl-submodal select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  background: #fafbfc;
  color: #374151;
  pointer-events: auto;
  cursor: text;
}

.pl-submodal input:focus,
.pl-submodal textarea:focus,
.pl-submodal select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  outline: none;
  background: #ffffff;
}

/* ==================================================
   CREATE PRODUCT MODAL - Nice Style (Match Other Modals)
   ================================================== */
#createProductModal {
  width: 520px;
  max-width: 95vw;
}

#createProductModal .modal-content {
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#createProductModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  padding: 18px 20px !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#createProductModal .modal-header span {
  flex: 1;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: white;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.3px;
  animation: plSubModalFadeIn 0.5s ease-out;
}

#createProductModal .modal-header .close {
  color: white !important;
  opacity: 0.9;
  font-size: 20px;
  font-weight: 300;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  cursor: pointer;
  position: static !important;
}

#createProductModal .modal-header .close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

#createProductModal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
}

#createProductModal .modal-footer {
  background: #f8fafc;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
}

/* ==================================================
   EDIT/CUSTOMIZE PRODUCT MODAL - Nice Style
   ================================================== */
#customizeProductModal {
  width: 520px;
  max-width: 95vw;
}

#customizeProductModal .modal-content {
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#customizeProductModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  padding: 18px 20px !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#customizeProductModal .modal-header span {
  flex: 1;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: white;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.3px;
  animation: plSubModalFadeIn 0.5s ease-out;
}

#customizeProductModal .modal-header .close {
  color: white !important;
  opacity: 0.9;
  font-size: 20px;
  font-weight: 300;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

#customizeProductModal .modal-header .close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

#customizeProductModal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
}

#customizeProductModal .modal-footer {
  background: #f8fafc;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
}

/* Sub-modal fade in animation */
@keyframes plSubModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================================================
   MOVE MODAL - Nice Style
   ================================================== */
#moveModal {
  width: 480px;
  max-width: 95vw;
}

#moveModal .modal-content {
  width: 100%;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#moveModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 18px 24px !important;
  border-radius: 16px 16px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#moveModal .modal-header span {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: white !important;
  flex: 1 !important;
}

#moveModal .modal-header .close {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  position: static !important;
  font-size: 18px;
}

#moveModal .modal-header .close:hover {
  background: rgba(255,255,255,0.25) !important;
}

#moveModal .modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #ffffff;
}

#moveModal .modal-footer {
  background: #f8fafc;
  padding: 14px 20px;
  border-radius: 0 0 16px 16px;
}

/* ==================================================
   NEW FOLDER MODAL - Nice Style
   ================================================== */
#newFolderModal {
  width: 400px;
  max-width: 95vw;
  max-height: none !important; /* Override base max-height */
}

#newFolderModal .modal-content {
  width: 100%;
  max-height: none !important; /* Let content determine height */
  height: auto !important;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#newFolderModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 14px 20px !important;
  border-radius: 16px 16px 0 0 !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#newFolderModal .modal-header span {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: white !important;
  flex: 1 !important;
}

#newFolderModal .modal-header .close {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  position: static !important;
  font-size: 18px;
}

#newFolderModal .modal-header .close:hover {
  background: rgba(255,255,255,0.25) !important;
}

#newFolderModal .modal-body {
  padding: 20px;
  background: #ffffff;
}

#newFolderModal .modal-body input,
#newFolderModal #newFolderName {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  background: #fafbfc;
  color: #374151;
  transition: all 0.2s ease;
}

#newFolderModal .modal-body input:focus,
#newFolderModal #newFolderName:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  outline: none;
  background: #ffffff;
}

#newFolderModal .modal-footer {
  background: #f8fafc;
  padding: 12px 16px;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid #e5e7eb;
}

/* ==================================================
   PROMPT MODAL (Rename/Create Folder) - Nice Style - Compact Height
   ================================================== */
/* Prompt Modal specific */
/* Prompt Modal width */
#promptModal {
  width: 420px;
  max-width: 95vw;
}

/* ==================================================
   CONFIRMATION MODAL - Nice Style - Compact Height
   ================================================== */
#confirmationModal {
  width: 420px;
  max-width: 95vw;
  max-height: none !important; /* Override base max-height */
}

#confirmationModal .modal-content {
  width: 100%;
  max-height: none !important; /* Let content determine height */
  height: auto !important;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#confirmationModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 14px 20px !important;
  border-radius: 16px 16px 0 0 !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#confirmationModal .modal-header span {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: white !important;
  flex: 1 !important;
}

#confirmationModal .modal-header .close {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  position: static !important;
  font-size: 18px;
}

#confirmationModal .modal-header .close:hover {
  background: rgba(255,255,255,0.25) !important;
}

#confirmationModal .modal-body {
  padding: 20px;
  background: #ffffff;
  font-size: 1rem;
  color: #374151;
  line-height: 1.5;
}

#confirmationModal .modal-footer {
  background: #f8fafc;
  padding: 12px 16px;
  border-radius: 0 0 16px 16px;
}

/* ==================================================
   PREVIEW MODAL - Nice Style
   ================================================== */
#previewModal {
  width: auto;
  max-width: 90vw;
}

#previewModal .modal-content {
  width: auto;
  max-width: 90vw;
  max-height: 85vh;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
  border: 1px solid #e0e4e8 !important;
}

#previewModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 16px 20px !important;
  border-radius: 16px 16px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#previewModal .modal-header span {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: white !important;
  flex: 1 !important;
}

#previewModal .modal-header .close {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  position: static !important;
  font-size: 18px;
}

#previewModal .modal-header .close:hover {
  background: rgba(255,255,255,0.25) !important;
}

#previewModal .modal-body {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

#previewModal img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ==================================================
   PROGRESS MODALS - Nice Style - Compact Height
   ================================================== */
#trashProgressModal,
#deleteProgressModal,
#moveProgressModal,
#restoreProgressModal,
#deleteForeverProgressModal {
  width: 380px;
  max-width: 95vw;
  max-height: none !important;
  z-index: 1075;
}

#trashProgressModal .modal-content,
#deleteProgressModal .modal-content,
#moveProgressModal .modal-content,
#restoreProgressModal .modal-content,
#deleteForeverProgressModal .modal-content {
  width: 100%;
  min-height: auto;
  max-height: none !important;
  height: auto !important;
  background: linear-gradient(135deg, #ffffff, #f0f4f8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e0e4e8 !important;
}

#trashProgressModal .modal-header,
#deleteProgressModal .modal-header,
#moveProgressModal .modal-header,
#restoreProgressModal .modal-header,
#deleteForeverProgressModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 14px 18px !important;
  border-radius: 16px 16px 0 0 !important;
  font-size: 1rem !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#trashProgressModal .modal-header span,
#deleteProgressModal .modal-header span,
#moveProgressModal .modal-header span,
#restoreProgressModal .modal-header span,
#deleteForeverProgressModal .modal-header span {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: white !important;
  flex: 1 !important;
}

#trashProgressModal .modal-header .close,
#deleteProgressModal .modal-header .close,
#moveProgressModal .modal-header .close,
#restoreProgressModal .modal-header .close,
#deleteForeverProgressModal .modal-header .close {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  position: static !important;
  font-size: 18px;
}

#trashProgressModal .modal-header .close:hover,
#deleteProgressModal .modal-header .close:hover,
#moveProgressModal .modal-header .close:hover,
#restoreProgressModal .modal-header .close:hover,
#deleteForeverProgressModal .modal-header .close:hover {
  background: rgba(255,255,255,0.25) !important;
}

#trashProgressModal .modal-body,
#deleteProgressModal .modal-body,
#moveProgressModal .modal-body,
#restoreProgressModal .modal-body,
#deleteForeverProgressModal .modal-body {
  padding: 20px;
  background: #ffffff;
  border-radius: 0 0 16px 16px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*===============================================
  Sub-Modal Content Styles - Compact & Clean
===============================================*/
/* Modal content container */
#productLibraryModal .modal .modal-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 
    0 10px 25px -5px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  border: none;
  overflow: hidden;
}

/* Modal Header - Purple gradient matching main modal - Compact */
#productLibraryModal .modal .modal-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
  text-align: left;
  color: #fff;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  padding: 14px 18px;
  border-radius: 16px 16px 0 0;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: auto;
  gap: 12px;
}

#productLibraryModal .modal .modal-header span {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

#productLibraryModal .modal-title {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

/* Modal Close Button - Properly positioned on right */
#productLibraryModal .modal .modal-header .close {
  color: #fff !important;
  opacity: 0.9;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  cursor: pointer;
}

#productLibraryModal .modal .modal-header .close:hover {
  opacity: 1;
  background: rgba(255,255,255,0.25);
}

/* Modal Body */
#productLibraryModal .modal .modal-body {
  padding: 20px;
  background: #ffffff;
  border-radius: 0;
}

/* Modal Footer */
#productLibraryModal .modal .modal-footer {
  padding: 12px 20px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
}

/* Modal Buttons - Consistent Sizing */
#productLibraryModal .modal .modal-footer button,
#productLibraryModal .modal button.btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  min-width: 100px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

/* Close Button in Modal Header */
#productLibraryModal .modal .close {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  opacity: 0.9;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 2;
  line-height: 1;
  padding: 5px;
}

#productLibraryModal .modal .close:hover,
#productLibraryModal .modal .close:focus { 
  color: #fff; 
  opacity: 1; 
}

/*===============================================
  Button Styles for Sub-Modals - Modern & Consistent
===============================================*/

/* Base button styles */
#productLibraryModal .modal .btn,
#productLibraryModal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary Button - Purple (matching theme) */
#productLibraryModal .modal .btn-primary,
#productLibraryModal .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 7px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2);
}

#productLibraryModal .modal .btn-primary:hover,
#productLibraryModal .btn-primary:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Secondary Button - Clean Gray */
#productLibraryModal .modal .btn-secondary,
#productLibraryModal .btn-secondary {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  border-radius: 7px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

#productLibraryModal .modal .btn-secondary:hover,
#productLibraryModal .btn-secondary:hover {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Success Button - Green */
#productLibraryModal .modal .btn-success,
#productLibraryModal .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}

#productLibraryModal .modal .btn-success:hover,
#productLibraryModal .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Danger Button - Red */
#productLibraryModal .modal .btn-danger,
#productLibraryModal .btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

#productLibraryModal .modal .btn-danger:hover,
#productLibraryModal .btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Info Button - Blue */
#productLibraryModal .modal .btn-info,
#productLibraryModal .btn-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
}

#productLibraryModal .modal .btn-info:hover,
#productLibraryModal .btn-info:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* Green Button (custom - for actions like refresh) */
#productLibraryModal .btn-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.25);
}

#productLibraryModal .btn-green:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* Action button in header (New Folder, Add Product, Refresh) */
#productLibraryModal .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#productLibraryModal .action-button svg {
  width: 16px;
  height: 16px;
}

/* Back button styling */
#productLibraryModal .back-button {
  background: transparent !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

#productLibraryModal .back-button:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* Form Controls in Modals */
#productLibraryModal .modal .form-group {
  margin-bottom: 18px;
}

#productLibraryModal .modal .form-control {
  border-radius: 8px;
  border: 1px solid #dfe4ea;
  padding: 12px 15px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

#productLibraryModal .modal .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.15);
  outline: none;
}

/*===============================================
  Preview Modal Specific Styles
===============================================*/
#previewModal {
  max-width: 95%;
  max-height: 95vh;
}

/*===============================================
  Create Product Form - Nice Polished Layout
===============================================*/
#productLibraryModal .create-product-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Form group container for label + input */
#productLibraryModal .create-product-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

#productLibraryModal .create-product-form label span[style*="red"] {
  color: #ef4444;
  font-weight: 500;
}

#productLibraryModal .create-product-form input,
#productLibraryModal .create-product-form select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  background: #fafbfc;
  color: #374151;
}

#productLibraryModal .create-product-form input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

#productLibraryModal .create-product-form input:hover,
#productLibraryModal .create-product-form select:hover {
  border-color: #c7d2fe;
  background: #ffffff;
}

#productLibraryModal .create-product-form input:focus,
#productLibraryModal .create-product-form select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  outline: none;
  background: #ffffff;
}

#productLibraryModal .create-product-form textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.25s ease;
  color: #374151;
  background: #fafbfc;
  line-height: 1.5;
}

#productLibraryModal .create-product-form textarea::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

#productLibraryModal .create-product-form textarea:hover {
  border-color: #c7d2fe;
  background: #ffffff;
}

#productLibraryModal .create-product-form textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  outline: none;
  background: #ffffff;
}

/* File input styling - Nice upload area */
#productLibraryModal .create-product-form input[type="file"] {
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px dashed #c7d2fe;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.25s ease;
  text-align: center;
}

#productLibraryModal .create-product-form input[type="file"]:hover {
  border-color: #667eea;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  transform: translateY(-1px);
}

#productLibraryModal .create-product-form input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 14px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

#productLibraryModal .create-product-form input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Fill from Page button - Nice styling */
#productLibraryModal .create-product-form button.btn-info {
  width: fit-content;
  margin-top: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: white;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
  transition: all 0.25s ease;
}

#productLibraryModal .create-product-form button.btn-info:hover {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

/* Progress bar styling */
#productLibraryModal .progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
}

#productLibraryModal .progress-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
  font-size: 0;
}

/*===============================================
  Product Add/Edit Modals - Improved (same purple theme)
===============================================*/

.pl-product-modal {
  pointer-events: auto !important;
}

.pl-product-modal .pl-product-modal-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.pl-product-modal .pl-product-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.pl-product-modal .pl-product-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pl-product-modal .pl-product-modal-header .close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.pl-product-modal .pl-product-modal-header .close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.pl-product-modal .pl-product-modal-body {
  padding: 20px 24px;
  background: #fff;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.pl-product-modal .pl-product-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: auto;
}

.pl-product-modal .pl-form-block {
  margin-bottom: 16px;
}

.pl-product-modal .pl-form-block:last-child {
  margin-bottom: 0;
}

.pl-product-modal .pl-form-block-muted {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.pl-product-modal .pl-form-block label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.pl-product-modal .pl-asterisk {
  color: #dc2626;
}

.pl-product-modal .pl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pl-product-modal .pl-form-block input[type="text"],
.pl-product-modal .pl-form-block input[type="number"],
.pl-product-modal .pl-form-block textarea {
  width: 100%;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.pl-product-modal .pl-form-block textarea {
  min-height: 76px;
}

.pl-product-modal .pl-form-block input::placeholder,
.pl-product-modal .pl-form-block textarea::placeholder {
  color: #9ca3af;
}

.pl-product-modal .pl-form-block input:hover,
.pl-product-modal .pl-form-block textarea:hover {
  border-color: #d1d5db;
}

.pl-product-modal .pl-form-block input:focus,
.pl-product-modal .pl-form-block textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.pl-product-modal .pl-form-block textarea {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
}

.pl-product-modal .pl-file-area {
  border: 1px dashed #c7d2fe;
  border-radius: 10px;
  padding: 12px 14px;
  background: #faf5ff;
  transition: border-color 0.15s, background 0.15s;
}

.pl-product-modal .pl-file-area:hover {
  border-color: #a78bfa;
  background: #f5f3ff;
}

.pl-product-modal .pl-file-area input[type="file"] {
  width: 100%;
  font-size: 0.875rem;
  cursor: pointer;
  pointer-events: auto;
}

.pl-product-modal .pl-import-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pl-product-modal .pl-import-row input[type="file"] {
  flex: 1;
  min-width: 140px;
  padding: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  pointer-events: auto;
}

.pl-product-modal .pl-import-row .btn-info {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  background: #0891b2;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.pl-product-modal .pl-import-row .btn-info:hover {
  background: #0e7490;
}

.pl-product-modal .pl-product-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-top: 16px;
  overflow: hidden;
}

.pl-product-modal .pl-product-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pl-product-modal .pl-product-modal-footer {
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.pl-product-modal .pl-product-modal-footer .btn-secondary {
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pl-product-modal .pl-product-modal-footer .btn-secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.pl-product-modal .pl-product-modal-footer .btn-primary {
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.pl-product-modal .pl-product-modal-footer .btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .pl-product-modal .pl-form-row {
    grid-template-columns: 1fr;
  }

  .pl-product-modal .pl-import-row {
    flex-direction: column;
  }

  .pl-product-modal .pl-import-row input[type="file"] {
    min-width: 0;
  }
}

/*===============================================
  Notifications - Eye-Catching & Smooth
===============================================*/
#productLibraryModal .notification-container {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1080; /* Above all modals */
  min-height: 0;
  padding: 0;
  pointer-events: none; /* allow clicks through when empty */
}
#productLibraryModal .notification-container:not(:empty) {
  pointer-events: auto;
}

#productLibraryModal .notification {
  padding: 12px 25px;
  margin-bottom: 12px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--transition-speed) ease;
  font-weight: 500;
}

#productLibraryModal .notification.show {
  opacity: 1;
  transform: translateY(0);
}

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

#productLibraryModal .notification.error {
  background-color: var(--error-color);
  color: #fff;
}

#productLibraryModal .notification.info {
  background-color: var(--primary-color);
  color: #fff;
}

/*===============================================
  File Input & Batch Actions - Polished
===============================================*/
#productLibraryModal .upload-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}
/* Footer batch-actions: no extra box (no padding/margin from generic rule) */
#productLibraryModal .modal-footer-section .batch-actions,
#productLibraryModal .modal-footer-section .trash-batch-actions {
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: nowrap;
}

#productLibraryModal .upload-section input[type="file"] {
  border: 1px solid #dfe4ea;
  border-radius: var(--border-radius);
  padding: 8px 12px;
  font-size: 1rem;
  background-color: #fff;
  color: #2c3e50;
  cursor: pointer;
}

#productLibraryModal .upload-section input[type="file"]::file-selector-button {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 10px 18px;
  margin-right: 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

#productLibraryModal .upload-section input[type="file"]::file-selector-button:hover {
  background: var(--primary-hover);
}

#productLibraryModal .upload-section button,
#productLibraryModal .batch-actions button,
#productLibraryModal .trash-batch-actions button {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  font-weight: 500;
}

#productLibraryModal .upload-section button:hover,
#productLibraryModal .batch-actions button:hover,
#productLibraryModal .trash-batch-actions button:hover {
  background: var(--primary-hover);
  transform: scale(1.03);
}

/*===============================================
  Compact Filter Section - Streamlined & Aligned
===============================================*/
#productLibraryModal .filter-section {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
  border: 1px solid #e5e7eb;
  margin: 0 0 12px 0;
  border-radius: 10px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Select All checkbox container */
#productLibraryModal .filter-section > label:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin-right: auto;
}

#productLibraryModal .filter-section > label:first-child:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

#productLibraryModal .filter-section select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  min-width: 140px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
  height: 36px;
}

#productLibraryModal .filter-section select:hover {
  border-color: #9ca3af;
}

#productLibraryModal .filter-section select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Search row within filter section */
#productLibraryModal .filter-section .search-row,
#productLibraryModal .search-row {
  display: flex;
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}

#productLibraryModal .filter-section .search-row input,
#productLibraryModal .search-row input {
  width: 100%;
  padding: 10px 14px;
  padding-left: 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #374151;
  transition: all 0.2s ease;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3e%3c/svg%3e");
  background-position: left 12px center;
  background-repeat: no-repeat;
  background-size: 18px;
}

#productLibraryModal .filter-section .search-row input::placeholder,
#productLibraryModal .search-row input::placeholder {
  color: #9ca3af;
}

#productLibraryModal .filter-section .search-row input:hover,
#productLibraryModal .search-row input:hover {
  border-color: #9ca3af;
}

#productLibraryModal .filter-section .search-row input:focus,
#productLibraryModal .search-row input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* (Duplicate styles removed - see earlier section for checkbox, actions, batch-actions, and trash icon styles) */

/* Confirmation Modal Message */
#confirmationModal .modal-body p,
#productLibraryModal .modal-body p#confirmationMessage {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #2c3e50;
  text-align: center;
  line-height: 1.5;
}

/* Progress Modal Messages */
#trashProgressModal .modal-body p,
#moveProgressModal .modal-body p,
#restoreProgressModal .modal-body p,
#deleteForeverProgressModal .modal-body p {
  font-size: 1rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 15px;
}

/*===============================================
  Move Modal - Folder List Styling
  (Apply to both #moveModal and #plMoveModal so Choose a Folder list is visible)
===============================================*/
#moveModal .folder-list,
#plMoveModal .folder-list {
  min-height: 250px;
  max-height: 350px;
  overflow-y: auto;
  padding: 15px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  background-color: #f9fafc;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

#moveModal .folder-item,
#plMoveModal .folder-item {
  padding: 14px 18px;
  background-color: #ffffff;
  color: #1f2937;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 10px;
}

#moveModal .folder-item:hover,
#plMoveModal .folder-item:hover {
  background-color: #eef2f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

#moveModal .folder-item:last-child,
#plMoveModal .folder-item:last-child {
  margin-bottom: 0;
}

/* Move modal: same folder icon as Product Library (amber background + icon) */
#moveModal .folder-icon,
#plMoveModal .folder-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 6px;
  flex-shrink: 0;
}

#moveModal .folder-icon i,
#plMoveModal .folder-icon i {
  font-size: 16px;
  color: #d97706;
}

#moveModal .folder-item .folder-name,
#plMoveModal .folder-item .folder-name {
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
}

#moveModal .move-breadcrumbs,
#plMoveModal .move-breadcrumbs {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: #666;
  padding: 8px 12px;
  background: #f0f4f8;
  border-radius: 6px;
}

#moveModal #moveSearchInput,
#plMoveModal #moveSearchInput {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  color: #111827;
  transition: all 0.2s ease;
}

#moveModal #moveSearchInput:focus,
#plMoveModal #moveSearchInput:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.15);
  outline: none;
}

/* Accessibility */
#productLibraryModal .folder-item:focus,
#productLibraryModal .breadcrumb-item:focus,
#productLibraryModal .actions .ellipsis-btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

#productLibraryModal .folder-item:focus {
  background-color: #eef2f7;
}

#productLibraryModal .breadcrumb-item:focus {
  background: rgba(0, 87, 217, 0.1);
}

#productLibraryModal .actions .ellipsis-btn:focus {
  background: #eaeaea;
}

#productLibraryModal .move-breadcrumbs {
  color: #444; /* Improved contrast */
}

/* Consistency */
#productLibraryModal .folder-item {
  border: 1px solid transparent; /* Prevents shift on hover */
}

#productLibraryModal .folder-item img {
  width: 35px;
  margin: -10px 5px -9px 0;
  vertical-align: middle;
}

/* Visual Polish */
#productLibraryModal .spinner-container {
  min-height: 300px; /* Matches .folder-list */
}

/* Performance */
#productLibraryModal .folder-item {
  transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/*===============================================
  Responsive Styles for Sub-Modals
===============================================*/
@media (max-width: 768px) {
  /* Sub-modals responsive sizing */
  #createProductModal,
  #customizeProductModal {
    width: 95vw;
    max-width: 95vw;
  }
  
  #moveModal {
    width: 95vw;
    max-width: 95vw;
  }
  
  #newFolderModal,
  #promptModal,
  #confirmationModal {
    width: 90vw;
    max-width: 90vw;
  }
  
  #trashProgressModal,
  #deleteProgressModal,
  #moveProgressModal,
  #restoreProgressModal,
  #deleteForeverProgressModal {
    width: 90vw;
    max-width: 90vw;
  }
  
  /* Create product form - single column on mobile */
  #productLibraryModal .create-product-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  #productLibraryModal .create-product-form textarea {
    grid-column: span 1;
  }
  
  #productLibraryModal .create-product-form input#htmlFileInput {
    grid-column: span 1;
  }
  
  /* Modal buttons - smaller on mobile */
  #productLibraryModal .modal .modal-footer button,
  #productLibraryModal .modal button.btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    min-width: 80px;
  }
  
  /* Modal header padding */
  #productLibraryModal .modal .modal-header {
    padding: 15px 20px;
  }
  
  /* Modal body padding */
  #productLibraryModal .modal .modal-body {
    padding: 20px;
  }
  
  /* Modal footer */
  #productLibraryModal .modal .modal-footer {
    padding: 15px 20px;
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Even smaller modals on very small screens */
  #createProductModal,
  #customizeProductModal,
  #moveModal {
    width: 98vw;
    max-width: 98vw;
  }
  
  /* Stack footer buttons on very small screens */
  .product-library-submodal .modal-footer {
    flex-direction: column;
    gap: 8px;
  }
  
  .product-library-submodal .modal-footer button {
    width: 100%;
  }
}