/************************ FOR FILES MODAL *********************************/
    /* Minimal modal styling for compactness */
body { font-size: 0.9rem; }
.file-thumb { width: 80px; height: 80px; object-fit: cover; border: 1px solid #ccc; }
.file-thumb-small { width: 50px; height: 50px; object-fit: cover; border: 1px solid #ccc; }
.file-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.image-wrapper { /* NEW: Added to support new HTML structure */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px; /* Match grid-item width */
  /*min-height: 184px;*/ /* Ensure consistent height for dragging */
}
.grid-item {
  width: 80px;
  height: 80px; /* CHANGED: Fixed height to prevent stretching (was height: auto) */
  position: relative;
  display: inline-block;
  border: 1px solid #ccc; /* CHANGED: Added border to grid-item (previously on file-thumb) */
  box-sizing: border-box; /* NEW: Ensure border doesn’t increase size */
}
.drag-overlay {
  position: absolute; 
  inset: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 1.1rem; 
  color: rgba(255,255,255,0.7); 
  background: rgba(0,0,0,0.12); 
  border-radius: 4px;
  opacity: 0; 
  transition: opacity .2s;
}
.file-image-description { /* CHANGED: Removed .grid-item parent selector */
  width: 80px; /* Match grid-item width */
  word-wrap: break-word; /* Wrap long words */
  font-size: 0.6rem; /* Match .file-filename */
  color: black;
  text-align: center;
  margin-top: 4px;
  line-height: 1.3 !important; /* CHANGED: Increased from 1.2 to 1.3 for more text spacing */
  /*max-height: 56px;*/ /* CHANGED: Increased from 36px to 48px to fit ~3-4 lines */
  /*overflow: hidden;*/
  padding: 2px; /* NEW: Added padding to prevent text from touching edges */
}
.grid-item:hover .drag-overlay { opacity: 1; cursor: grab; }
.delete-icon { 
  position: absolute; 
  top: 2px; 
  right: 2px; 
  color: #dc3545; 
  background: #fff; 
  border-radius: 50%; 
  width: 18px !important; /* CHANGED: Removed !important for flexibility */
  height: 18px; 
  display: flex; /* NEW: Use flexbox for precise centering */
  align-items: center; /* NEW: Center vertically */
  justify-content: center; /* NEW: Center horizontally */
  font-size: 0.85rem; 
  cursor: pointer; 
  z-index: 2; 
}
.edit-section { display: none; margin-top: 8px; }
.file-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.file-label-container { flex: 1; display: flex; flex-direction: column; }
.file-filename { font-size: 0.75rem; color: #666; }
.file-actions { white-space: nowrap; }
.action-icon { font-size: .95rem; margin-left: 6px; cursor: pointer; }
.upload-area { border: 2px dashed #aaa; border-radius: 6px; padding: 10px; text-align: center; margin-bottom: 12px; }
.upload-area .hint { margin: 0; font-size: .85rem; color: #555; }
.compact-input { font-size: .85rem; padding: .25rem .4rem; }
    
    /******************* END FOR FILES MODAL ***********************************/