/* =========================================
   MOBILE-OPTIMIZED SYNCFUSION FILE MANAGER
   Clean, Spacious, No Overlapping
   ========================================= */

/* ==========================================
   CONTAINER - PREVENT OVERLAP
========================================== */

.e-filemanager {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: visible !important;
}

/* ==========================================
   TOOLBAR - SPACIOUS LAYOUT WITH PROPER PADDING
   ========================================== */

.e-filemanager .e-toolbar {
    padding: 16px !important;
    background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
    border-bottom: 2px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* First row: Breadcrumb navigation */
.e-filemanager .e-address {
    width: 100% !important;
    min-height: 48px !important;
 padding: 12px 16px !important;
    background: white !important;
 border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.e-filemanager .e-addressbar-ul {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.e-filemanager .e-address-list-item {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 200ms ease !important;
    white-space: nowrap !important;
font-size: 15px !important;
    font-weight: 500 !important;
}

.e-filemanager .e-address-list-item:hover {
    background: #f1f5f9 !important;
}

/* Second row: Search and Action Buttons */
.e-filemanager .e-toolbar-items {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Search box - flexible width */
.e-filemanager .e-search-wrap {
    flex: 1 1 200px !important;
    min-width: 200px !important;
    max-width: 400px !important;
}

.e-filemanager .e-search {
    height: 48px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 200ms ease !important;
    padding: 0 !important;
}

.e-filemanager .e-search:focus-within {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.e-filemanager .e-search .e-input {
    padding: 12px 16px !important;
    font-size: 15px !important;
    height: 48px !important;
    border: none !important;
}

.e-filemanager .e-search .e-input::placeholder {
    color: #94a3b8 !important;
}

/* Toolbar buttons - consistent size */
.e-filemanager .e-toolbar .e-btn,
.e-filemanager .e-tbar-btn {
    height: 48px !important;
min-width: 48px !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 200ms ease !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.e-filemanager .e-toolbar .e-btn:hover,
.e-filemanager .e-tbar-btn:hover {
    background: #f8fafc !important;
    border-color: #8b5cf6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

.e-filemanager .e-toolbar .e-btn:active,
.e-filemanager .e-tbar-btn:active {
 transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Icon sizing in buttons */
.e-filemanager .e-toolbar .e-btn .e-btn-icon,
.e-filemanager .e-tbar-btn .e-icons {
    font-size: 20px !important;
    color: #64748b !important;
}

.e-filemanager .e-toolbar .e-btn:hover .e-btn-icon,
.e-filemanager .e-tbar-btn:hover .e-icons {
    color: #8b5cf6 !important;
}

/* Upload button - prominent */
.e-filemanager .e-fe-upload,
.e-filemanager .upload-btn,
.e-filemanager .e-toolbar .e-btn.e-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white !important;
 border-color: transparent !important;
    font-weight: 700 !important;
}

.e-filemanager .e-fe-upload:hover,
.e-filemanager .upload-btn:hover,
.e-filemanager .e-toolbar .e-btn.e-primary:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}

/* ==========================================
   FILE MANAGER CONTENT AREA - NO OVERLAP
   ========================================== */

.e-filemanager .e-filemanager-content {
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.e-filemanager .e-splitter {
    margin-top: 0 !important;
    border-top: none !important;
}

/* ==========================================
   GRID/LARGE ICONS VIEW - SPACIOUS
   ========================================== */

.e-filemanager .e-large-icons {
    padding: 20px !important;
    gap: 16px !important;
}

.e-filemanager .e-large-icons .e-list-item {
  padding: 16px !important;
    margin: 8px !important;
    min-width: 120px !important;
    min-height: 140px !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: all 200ms ease !important;
}

.e-filemanager .e-large-icons .e-list-item:hover {
    border-color: #8b5cf6 !important;
    background: #f8f9ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

.e-filemanager .e-large-icons .e-list-img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.e-filemanager .e-list-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
 padding: 8px 4px !important;
 word-wrap: break-word !important;
    text-align: center !important;
}

/* ==========================================
   NAVIGATION TREE - SPACIOUS
   ========================================== */

.e-filemanager .e-navigation {
    padding: 16px !important;
    background: #f8fafc !important;
}

.e-filemanager .e-treeview {
    padding: 8px !important;
}

.e-filemanager .e-treeview .e-list-item {
    min-height: 44px !important;
  padding: 10px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    transition: all 150ms ease !important;
}

.e-filemanager .e-treeview .e-list-item:hover {
    background: #e0e7ff !important;
}

.e-filemanager .e-treeview .e-list-item.e-active {
    background: #ddd6fe !important;
    font-weight: 600 !important;
}

.e-filemanager .e-treeview .e-list-text {
  font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
}

/* ==========================================
   DETAILS VIEW - SPACIOUS ROWS
   ========================================== */

.e-filemanager .e-grid .e-row {
    min-height: 56px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.e-filemanager .e-grid .e-rowcell {
    padding: 16px 12px !important;
    font-size: 15px !important;
}

.e-filemanager .e-grid .e-row:hover {
    background: #f8f9ff !important;
}

/* ==========================================
   CONTEXT MENU - TOUCH FRIENDLY
   ========================================== */

.e-filemanager .e-contextmenu-wrapper {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.e-filemanager .e-menu-item {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    transition: all 150ms ease !important;
}

.e-filemanager .e-menu-item:active {
    background: #f1f5f9 !important;
    transform: scale(0.98) !important;
}

/* ==========================================
   DIALOGS - SPACIOUS AND CLEAR
   ========================================== */

.e-filemanager .e-dialog {
    border-radius: 16px !important;
    max-width: 90vw !important;
    margin: 20px auto !important;
    overflow: hidden !important;
}

.e-filemanager .e-dlg-header {
    padding: 20px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
 color: white !important;
}

.e-filemanager .e-dlg-content {
    padding: 24px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.e-filemanager .e-footer-content {
    padding: 16px 24px !important;
  gap: 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.e-filemanager .e-footer-content .e-btn {
    min-width: 100px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ==========================================
   PREVIEW CLOSE BUTTON - PROFESSIONAL
   ========================================== */

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn,
.e-dialog .e-dlg-closeicon-btn {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    background: white !important;
    border: 3px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 250ms ease !important;
}

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn *,
.e-dialog .e-dlg-closeicon-btn * {
    display: none !important;
}

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn::before,
.e-dialog .e-dialog .e-dlg-closeicon-btn::before {
 content: '' !important;
    position: absolute !important;
    width: 32px !important;
 height: 4px !important;
    background: #1e293b !important;
    border-radius: 2px !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    top: 50% !important;
    left: 50% !important;
  display: block !important;
}

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn::after,
.e-dialog .e-dialog .e-dlg-closeicon-btn::after {
    content: '' !important;
    position: absolute !important;
    width: 32px !important;
    height: 4px !important;
    background: #1e293b !important;
    border-radius: 2px !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
}

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn:hover,
.e-dialog .e-dlg-closeicon-btn:hover {
    transform: scale(1.1) rotate(90deg) !important;
    border-color: #8b5cf6 !important;
box-shadow: 0 6px 24px rgba(139, 92, 246, 0.3) !important;
}

.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn:hover::before,
.e-filemanager .e-dlg-header-content .e-dlg-closeicon-btn:hover::after,
.e-dialog .e-dlg-closeicon-btn:hover::before,
.e-dialog .e-dlg-closeicon-btn:hover::after {
    background: #8b5cf6 !important;
}

/* ==========================================
   RESPONSIVE - MOBILE FIRST
   ========================================== */

/* Small phones (< 640px) */
@media (max-width: 639px) {
    .e-filemanager .e-toolbar {
        padding: 12px !important;
        gap: 10px !important;
}
    
.e-filemanager .e-address {
        min-height: 44px !important;
        padding: 10px 14px !important;
    }
    
    .e-filemanager .e-search,
    .e-filemanager .e-toolbar .e-btn {
        height: 44px !important;
        min-width: 44px !important;
    }
    
    .e-filemanager .e-toolbar-items {
        gap: 8px !important;
    }
    
    .e-filemanager .e-search-wrap {
 flex: 1 1 auto !important;
        min-width: 150px !important;
    }
    
    /* Stack buttons that don't fit */
    .e-filemanager .e-toolbar .e-btn span:not(.e-btn-icon) {
        display: none !important;
 }
    
    .e-filemanager .e-large-icons {
        padding: 12px !important;
    }
}

/* Tablets (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1024px) {
    .e-filemanager .e-toolbar-items {
        flex-wrap: nowrap !important;
    }
    
    .e-filemanager .e-search-wrap {
        flex: 1 1 250px !important;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    .e-filemanager .e-toolbar {
      flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .e-filemanager .e-address {
        flex: 2 1 auto !important;
    }
    
    .e-filemanager .e-toolbar-items {
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }
    
    .e-filemanager .e-search-wrap {
      flex: 0 1 300px !important;
    }
}

/* ==========================================
   iOS SPECIFIC FIXES
   ========================================== */

@supports (-webkit-touch-callout: none) {
    .e-filemanager input,
    .e-filemanager textarea {
        font-size: 16px !important;
    }
}

.e-filemanager {
    -webkit-overflow-scrolling: touch !important;
}

.e-filemanager input,
.e-filemanager button {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ==========================================
   SMOOTH ANIMATIONS
   ========================================== */

.e-filemanager * {
    transition-duration: 200ms !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove default transitions for instant feedback */
.e-filemanager .e-btn:active,
.e-filemanager .e-list-item:active {
    transition-duration: 50ms !important;
}