npm - @memberjunction/ng-file-storage - Versions diffs - 5.10.1 → 5.12.0 - Mend

@memberjunction/ng-file-storage 5.10.1 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/lib/file-browser/file-browser-demo.component.js CHANGED Viewed

@@ -7,7 +7,7 @@ import * as i1 from "./file-browser.component";
  */
 export class FileBrowserDemoComponent {
     static ɵfac = function FileBrowserDemoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileBrowserDemoComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileBrowserDemoComponent, selectors: [["mj-file-browser-demo"]], standalone: false, decls: 8, vars: 0, consts: [[2, "height", "100vh", "width", "100vw", "display", "flex", "flex-direction", "column"], [2, "padding", "16px", "background-color", "#f0f0f0", "border-bottom", "1px solid #ccc"], [2, "margin", "0", "font-size", "20px"], [2, "margin", "4px 0 0 0", "font-size", "14px", "color", "#666"], [2, "flex", "1", "overflow", "hidden"]], template: function FileBrowserDemoComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileBrowserDemoComponent, selectors: [["mj-file-browser-demo"]], standalone: false, decls: 8, vars: 0, consts: [[2, "height", "100vh", "width", "100vw", "display", "flex", "flex-direction", "column"], [2, "padding", "16px", "background-color", "var(--mj-bg-surface-sunken)", "border-bottom", "1px solid var(--mj-border-strong)"], [2, "margin", "0", "font-size", "20px"], [2, "margin", "4px 0 0 0", "font-size", "14px", "color", "var(--mj-text-secondary)"], [2, "flex", "1", "overflow", "hidden"]], template: function FileBrowserDemoComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
             i0.ɵɵtext(3, "File Browser Demo");
             i0.ɵɵelementEnd();
@@ -23,9 +23,9 @@ export class FileBrowserDemoComponent {
         type: Component,
         args: [{ standalone: false, selector: 'mj-file-browser-demo', template: `
     <div style="height: 100vh; width: 100vw; display: flex; flex-direction: column;">
-      <div style="padding: 16px; background-color: #f0f0f0; border-bottom: 1px solid #ccc;">
+      <div style="padding: 16px; background-color: var(--mj-bg-surface-sunken); border-bottom: 1px solid var(--mj-border-strong);">
         <h1 style="margin: 0; font-size: 20px;">File Browser Demo</h1>
-        <p style="margin: 4px 0 0 0; font-size: 14px; color: #666;">
+        <p style="margin: 4px 0 0 0; font-size: 14px; color: var(--mj-text-secondary);">
           Testing the Mac Finder-style file browser component
         </p>
       </div>

package/dist/lib/file-browser/file-browser-demo.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-browser-demo.component.js","sourceRoot":"","sources":["../../../src/lib/file-browser/file-browser-demo.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;AAE1C;;;GAGG;AAyBH,MAAM,OAAO,wBAAwB;kHAAxB,wBAAwB;6DAAxB,wBAAwB;YAlB7B,AADF,AADF,8BAAiF,~~aACO~~,~~YAC5C~~;YAAA,iCAAiB;YAAA,iBAAK;YAC9D,~~4BAA4D~~;~~YAC1D~~,qEACF;YACF,AADE,iBAAI,EACA;YACN,8BAAwC;YACtC,kCAAmC;YAEvC,AADE,iBAAM,EACF;;;iFAUG,wBAAwB;cAxBpC,SAAS;6BACI,KAAK,YACP,sBAAsB,YACtB;;;;;;;;;;;;GAYT;;kFASU,wBAAwB","sourcesContent":["import { Component } from '@angular/core';\n\n/*\n Demo wrapper component for testing the file browser UI.\n * Navigate to this component to see the file browser in action.\n */\n@Component({\n standalone: false,\n selector: 'mj-file-browser-demo',\n template: `\n <div style=\"height: 100vh; width: 100vw; display: flex; flex-direction: column;\">\n <div style=\"padding: 16px; background-color: ~~#f0f0f0~~; border-bottom: 1px solid ~~#ccc~~;\">\n <h1 style=\"margin: 0; font-size: 20px;\">File Browser Demo</h1>\n <p style=\"margin: 4px 0 0 0; font-size: 14px; color: ~~#666~~;\">\n Testing the Mac Finder-style file browser component\n </p>\n </div>\n <div style=\"flex: 1; overflow: hidden;\">\n <mj-file-browser></mj-file-browser>\n </div>\n </div>\n `,\n styles: [`\n :host {\n display: block;\n height: 100%;\n width: 100%;\n }\n `]\n})\nexport class FileBrowserDemoComponent {}\n"]}
1	+ {"version":3,"file":"file-browser-demo.component.js","sourceRoot":"","sources":["../../../src/lib/file-browser/file-browser-demo.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;AAE1C;;;GAGG;AAyBH,MAAM,OAAO,wBAAwB;kHAAxB,wBAAwB;6DAAxB,wBAAwB;YAlB7B,AADF,AADF,8BAAiF,aAC8C,YACnF;YAAA,iCAAiB;YAAA,iBAAK;YAC9D,4BAAgF;YAC9E,qEACF;YACF,AADE,iBAAI,EACA;YACN,8BAAwC;YACtC,kCAAmC;YAEvC,AADE,iBAAM,EACF;;;iFAUG,wBAAwB;cAxBpC,SAAS;6BACI,KAAK,YACP,sBAAsB,YACtB;;;;;;;;;;;;GAYT;;kFASU,wBAAwB","sourcesContent":["import { Component } from '@angular/core';\n\n/*\n Demo wrapper component for testing the file browser UI.\n * Navigate to this component to see the file browser in action.\n */\n@Component({\n standalone: false,\n selector: 'mj-file-browser-demo',\n template: `\n <div style=\"height: 100vh; width: 100vw; display: flex; flex-direction: column;\">\n <div style=\"padding: 16px; background-color: var(--mj-bg-surface-sunken); border-bottom: 1px solid var(--mj-border-strong);\">\n <h1 style=\"margin: 0; font-size: 20px;\">File Browser Demo</h1>\n <p style=\"margin: 4px 0 0 0; font-size: 14px; color: var(--mj-text-secondary);\">\n Testing the Mac Finder-style file browser component\n </p>\n </div>\n <div style=\"flex: 1; overflow: hidden;\">\n <mj-file-browser></mj-file-browser>\n </div>\n </div>\n `,\n styles: [`\n :host {\n display: block;\n height: 100%;\n width: 100%;\n }\n `]\n})\nexport class FileBrowserDemoComponent {}\n"]}

package/dist/lib/file-browser/file-browser.component.js CHANGED Viewed

@@ -119,11 +119,11 @@ export class FileBrowserComponent {
             i0.ɵɵproperty("account", ctx.selectedAccount);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("account", ctx.selectedAccount)("folderPath", ctx.selectedFolderPath);
-        } }, dependencies: [i1.StorageProvidersListComponent, i2.FolderTreeComponent, i3.FileGridComponent], styles: ["\n\n\n\n\n\n.file-browser[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f0f0f0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  border: 1px solid #ccc;\n}\n\n\n\n.mobile-header[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: #ffffff;\n  border-bottom: 1px solid #ccc;\n}\n\n.mobile-header[_ngcontent-%COMP%]   .browser-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #000;\n}\n\n.sidebar-toggle[_ngcontent-%COMP%] {\n  margin-right: 12px;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 6px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n}\n\n.sidebar-toggle[_ngcontent-%COMP%]:hover {\n  background-color: #f0f0f0;\n}\n\n\n\n.browser-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  gap: 0;\n}\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background-color: #f8f8f8;\n  border-right: 1px solid #ccc;\n  width: 220px;\n  min-width: 220px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.sidebar.collapsed[_ngcontent-%COMP%] {\n  width: 0;\n  min-width: 0;\n  border-right: none;\n  opacity: 0;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid #ddd;\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n  flex: 1;\n  border-bottom: none;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background-color: #e8e8e8;\n  border-bottom: 1px solid #ccc;\n}\n\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: #666;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n\n\n.main-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  background-color: #fff;\n  border-left: 1px solid #ccc;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f0f0f0;\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\n}\n\n\n\n\n\n\n\n\n@media screen and (max-width: 1024px) {\n  .sidebar[_ngcontent-%COMP%] {\n    width: 200px;\n    min-width: 200px;\n  }\n}\n\n\n\n@media screen and (max-width: 768px) {\n  .mobile-header[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .browser-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  \n\n  .sidebar[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 45px; \n\n    bottom: 0;\n    width: 280px;\n    min-width: 280px;\n    z-index: 1000;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .sidebar.collapsed[_ngcontent-%COMP%] {\n    transform: translateX(-100%);\n  }\n\n  \n\n  .main-panel[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n}\n\n\n\n@media screen and (max-width: 480px) {\n  .mobile-header[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n  }\n\n  .mobile-header[_ngcontent-%COMP%]   .browser-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .section-header[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n  }\n\n  .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .sidebar[_ngcontent-%COMP%] {\n    width: 260px;\n    min-width: 260px;\n  }\n}"] });
+        } }, dependencies: [i1.StorageProvidersListComponent, i2.FolderTreeComponent, i3.FileGridComponent], styles: ["\n\n\n\n\n\n.file-browser[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface-sunken);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  border: 1px solid var(--mj-border-strong);\n}\n\n\n\n.mobile-header[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.mobile-header[_ngcontent-%COMP%]   .browser-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.sidebar-toggle[_ngcontent-%COMP%] {\n  margin-right: 12px;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 6px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n}\n\n.sidebar-toggle[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n.browser-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  gap: 0;\n}\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-strong);\n  width: 220px;\n  min-width: 220px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.sidebar.collapsed[_ngcontent-%COMP%] {\n  width: 0;\n  min-width: 0;\n  border-right: none;\n  opacity: 0;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n  flex: 1;\n  border-bottom: none;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n\n\n.main-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  background-color: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.section-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n\n\n@media screen and (max-width: 1024px) {\n  .sidebar[_ngcontent-%COMP%] {\n    width: 200px;\n    min-width: 200px;\n  }\n}\n\n\n\n@media screen and (max-width: 768px) {\n  .mobile-header[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .browser-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  \n\n  .sidebar[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 45px; \n\n    bottom: 0;\n    width: 280px;\n    min-width: 280px;\n    z-index: 1000;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .sidebar.collapsed[_ngcontent-%COMP%] {\n    transform: translateX(-100%);\n  }\n\n  \n\n  .main-panel[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n}\n\n\n\n@media screen and (max-width: 480px) {\n  .mobile-header[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n  }\n\n  .mobile-header[_ngcontent-%COMP%]   .browser-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .section-header[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n  }\n\n  .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .sidebar[_ngcontent-%COMP%] {\n    width: 260px;\n    min-width: 260px;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileBrowserComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-file-browser', template: "<div class=\"file-browser\">\n  <!-- Mobile header with sidebar toggle -->\n  <div class=\"mobile-header\">\n    <button (click)=\"toggleSidebar()\" class=\"sidebar-toggle\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n    <h2 class=\"browser-title\">File Browser</h2>\n  </div>\n\n  <!-- Main two-panel layout -->\n  <div class=\"browser-container\">\n    <!-- Left Sidebar: Accounts + Categories -->\n    <div class=\"sidebar\" [class.collapsed]=\"isSidebarCollapsed\">\n      <!-- Accounts Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>ACCOUNTS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-storage-providers-list\n            (accountSelected)=\"onAccountSelected($event)\"\n          ></mj-storage-providers-list>\n        </div>\n      </div>\n\n      <!-- Categories Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>FOLDERS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-folder-tree\n            [account]=\"selectedAccount\"\n            (folderSelected)=\"onFolderSelected($event)\"\n          ></mj-folder-tree>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: File Grid -->\n    <div class=\"main-panel\">\n      <mj-file-grid\n        [account]=\"selectedAccount\"\n        [folderPath]=\"selectedFolderPath\"\n        (folderNavigate)=\"onFolderNavigate($event)\"\n        (folderStructureChanged)=\"onFolderStructureChanged()\"\n      ></mj-file-grid>\n    </div>\n  </div>\n</div>\n", styles: ["/* ===========================\n   File Browser Shell Styles\n   Traditional dual-pane file manager layout\n   =========================== */\n\n.file-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f0f0f0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  border: 1px solid #ccc;\n}\n\n/* Mobile Header */\n.mobile-header {\n  display: none;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: #ffffff;\n  border-bottom: 1px solid #ccc;\n}\n\n.mobile-header .browser-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #000;\n}\n\n.sidebar-toggle {\n  margin-right: 12px;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 6px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n}\n\n.sidebar-toggle:hover {\n  background-color: #f0f0f0;\n}\n\n/* Main Container - Two Panel Layout */\n.browser-container {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  gap: 0;\n}\n\n/* Left Sidebar */\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  background-color: #f8f8f8;\n  border-right: 1px solid #ccc;\n  width: 220px;\n  min-width: 220px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.sidebar.collapsed {\n  width: 0;\n  min-width: 0;\n  border-right: none;\n  opacity: 0;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid #ddd;\n}\n\n.sidebar-section:last-child {\n  flex: 1;\n  border-bottom: none;\n}\n\n.section-header {\n  padding: 8px 12px;\n  background-color: #e8e8e8;\n  border-bottom: 1px solid #ccc;\n}\n\n.section-header h3 {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: #666;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Right Main Panel */\n.main-panel {\n  flex: 1;\n  background-color: #fff;\n  border-left: 1px solid #ccc;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Custom Scrollbar Styling */\n.section-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.section-content::-webkit-scrollbar-track {\n  background: #f0f0f0;\n}\n\n.section-content::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n.section-content::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\n}\n\n/* ===========================\n   Responsive Design\n   =========================== */\n\n/* Tablet (768px - 1024px) */\n@media screen and (max-width: 1024px) {\n  .sidebar {\n    width: 200px;\n    min-width: 200px;\n  }\n}\n\n/* Mobile (below 768px) */\n@media screen and (max-width: 768px) {\n  .mobile-header {\n    display: flex;\n  }\n\n  .browser-container {\n    flex-direction: column;\n  }\n\n  /* Sidebar becomes overlay on mobile */\n  .sidebar {\n    position: absolute;\n    left: 0;\n    top: 45px; /* Height of mobile header */\n    bottom: 0;\n    width: 280px;\n    min-width: 280px;\n    z-index: 1000;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .sidebar.collapsed {\n    transform: translateX(-100%);\n  }\n\n  /* File grid takes full space on mobile */\n  .main-panel {\n    flex: 1;\n  }\n}\n\n/* Small Mobile (below 480px) */\n@media screen and (max-width: 480px) {\n  .mobile-header {\n    padding: 6px 10px;\n  }\n\n  .mobile-header .browser-title {\n    font-size: 14px;\n  }\n\n  .section-header {\n    padding: 6px 10px;\n  }\n\n  .section-header h3 {\n    font-size: 10px;\n  }\n\n  .sidebar {\n    width: 260px;\n    min-width: 260px;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-file-browser', template: "<div class=\"file-browser\">\n  <!-- Mobile header with sidebar toggle -->\n  <div class=\"mobile-header\">\n    <button (click)=\"toggleSidebar()\" class=\"sidebar-toggle\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n    <h2 class=\"browser-title\">File Browser</h2>\n  </div>\n\n  <!-- Main two-panel layout -->\n  <div class=\"browser-container\">\n    <!-- Left Sidebar: Accounts + Categories -->\n    <div class=\"sidebar\" [class.collapsed]=\"isSidebarCollapsed\">\n      <!-- Accounts Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>ACCOUNTS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-storage-providers-list\n            (accountSelected)=\"onAccountSelected($event)\"\n          ></mj-storage-providers-list>\n        </div>\n      </div>\n\n      <!-- Categories Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>FOLDERS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-folder-tree\n            [account]=\"selectedAccount\"\n            (folderSelected)=\"onFolderSelected($event)\"\n          ></mj-folder-tree>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: File Grid -->\n    <div class=\"main-panel\">\n      <mj-file-grid\n        [account]=\"selectedAccount\"\n        [folderPath]=\"selectedFolderPath\"\n        (folderNavigate)=\"onFolderNavigate($event)\"\n        (folderStructureChanged)=\"onFolderStructureChanged()\"\n      ></mj-file-grid>\n    </div>\n  </div>\n</div>\n", styles: ["/* ===========================\n   File Browser Shell Styles\n   Traditional dual-pane file manager layout\n   =========================== */\n\n.file-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface-sunken);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  border: 1px solid var(--mj-border-strong);\n}\n\n/* Mobile Header */\n.mobile-header {\n  display: none;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.mobile-header .browser-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.sidebar-toggle {\n  margin-right: 12px;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 6px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n}\n\n.sidebar-toggle:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Main Container - Two Panel Layout */\n.browser-container {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  gap: 0;\n}\n\n/* Left Sidebar */\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-strong);\n  width: 220px;\n  min-width: 220px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.sidebar.collapsed {\n  width: 0;\n  min-width: 0;\n  border-right: none;\n  opacity: 0;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-section:last-child {\n  flex: 1;\n  border-bottom: none;\n}\n\n.section-header {\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.section-header h3 {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Right Main Panel */\n.main-panel {\n  flex: 1;\n  background-color: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Custom Scrollbar Styling */\n.section-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.section-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.section-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.section-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ===========================\n   Responsive Design\n   =========================== */\n\n/* Tablet (768px - 1024px) */\n@media screen and (max-width: 1024px) {\n  .sidebar {\n    width: 200px;\n    min-width: 200px;\n  }\n}\n\n/* Mobile (below 768px) */\n@media screen and (max-width: 768px) {\n  .mobile-header {\n    display: flex;\n  }\n\n  .browser-container {\n    flex-direction: column;\n  }\n\n  /* Sidebar becomes overlay on mobile */\n  .sidebar {\n    position: absolute;\n    left: 0;\n    top: 45px; /* Height of mobile header */\n    bottom: 0;\n    width: 280px;\n    min-width: 280px;\n    z-index: 1000;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .sidebar.collapsed {\n    transform: translateX(-100%);\n  }\n\n  /* File grid takes full space on mobile */\n  .main-panel {\n    flex: 1;\n  }\n}\n\n/* Small Mobile (below 480px) */\n@media screen and (max-width: 480px) {\n  .mobile-header {\n    padding: 6px 10px;\n  }\n\n  .mobile-header .browser-title {\n    font-size: 14px;\n  }\n\n  .section-header {\n    padding: 6px 10px;\n  }\n\n  .section-header h3 {\n    font-size: 10px;\n  }\n\n  .sidebar {\n    width: 260px;\n    min-width: 260px;\n  }\n}\n"] }]
     }], () => [], { folderTree: [{
             type: ViewChild,
             args: [FolderTreeComponent]

package/dist/lib/file-browser/file-grid.component.js CHANGED Viewed

@@ -2342,7 +2342,7 @@ export class FileGridComponent {
         return new Date(dateStr).toLocaleString();
     }
     static ɵfac = function FileGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileGridComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "breadcrumb-bar"], [1, "multi-provider-search-panel"], [1, "loading-state"], [1, "error-state"], [1, "file-table-wrapper"], [1, "file-grid-wrapper"], [1, "empty-state"], [1, "bottom-toolbar"], [1, "drag-overlay"], [1, "upload-progress"], [1, "modal-overlay"], [1, "nav-buttons"], ["title", "Go up to parent folder", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Refresh", 1, "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "breadcrumb-path"], [1, "fa-solid", "fa-folder"], [1, "path-text"], [1, "search-bar"], ["type", "text", "placeholder", "Search files and folders...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear search", 1, "search-clear-btn"], [1, "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["title", "Search across all storage providers", 1, "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "search-panel-header"], [1, "fa-solid", "fa-magnifying-glass"], [1, "close-panel-btn", 3, "click"], [1, "search-panel-body"], [1, "search-input-row"], ["type", "text", "placeholder", "Enter search term...", 1, "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], [1, "provider-checkbox", 3, "disabled", "title"], [1, "search-results-container"], [1, "searching-state"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], [1, "no-search-badge"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], [1, "failed-count"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], [1, "provider-result-group", 3, "failed"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], [1, "error-badge"], [1, "provider-result-files"], [1, "no-results-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], ["text", "Searching across providers..."], ["text", "Loading files..."], [1, "error-icon"], [1, "fa-solid", "fa-circle-exclamation"], [1, "error-message"], [1, "retry-btn", 3, "click"], [1, "file-table"], [1, "col-name", 3, "click"], [1, "fa-solid", "sort-icon"], [1, "col-type"], [1, "col-size", 3, "click"], [1, "col-modified", 3, "click"], [1, "file-row", 3, "selected"], [1, "file-row", 3, "click", "dblclick"], [1, "col-name"], [1, "item-icon"], [1, "item-name"], [1, "item-type"], [1, "col-size"], [1, "item-size"], [1, "col-modified"], [1, "item-date"], [1, "file-grid"], [1, "grid-item", 3, "selected"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], [1, "grid-meta"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "empty-message"], [1, "upload-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "toolbar-left"], [1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], ["title", "Copy file to another storage account", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-cloud-arrow-up"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "fa-solid", "fa-trash"], [1, "toolbar-right"], [1, "view-toggle"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th"], [1, "item-count"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "progress-content"], [1, "progress-info"], [1, "progress-bar-wrap"], [1, "progress-bar"], [1, "progress-percent"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], ["type", "text", "placeholder", "Enter folder name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "modal-footer"], [3, "click", "disabled"], [1, "warning"], [1, "danger", 3, "click", "disabled"], ["type", "text", "placeholder", "Enter new name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination path", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination folder (e.g., folder1/folder2/)", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [2, "font-size", "11px", "color", "#666", "margin-top", "8px"], [2, "font-size", "12px", "color", "#666", "margin-bottom", "16px"], [1, "account-checkbox-list"], [1, "account-checkbox-item"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "breadcrumb-bar"], [1, "multi-provider-search-panel"], [1, "loading-state"], [1, "error-state"], [1, "file-table-wrapper"], [1, "file-grid-wrapper"], [1, "empty-state"], [1, "bottom-toolbar"], [1, "drag-overlay"], [1, "upload-progress"], [1, "modal-overlay"], [1, "nav-buttons"], ["title", "Go up to parent folder", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Refresh", 1, "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "breadcrumb-path"], [1, "fa-solid", "fa-folder"], [1, "path-text"], [1, "search-bar"], ["type", "text", "placeholder", "Search files and folders...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear search", 1, "search-clear-btn"], [1, "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["title", "Search across all storage providers", 1, "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "search-panel-header"], [1, "fa-solid", "fa-magnifying-glass"], [1, "close-panel-btn", 3, "click"], [1, "search-panel-body"], [1, "search-input-row"], ["type", "text", "placeholder", "Enter search term...", 1, "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], [1, "provider-checkbox", 3, "disabled", "title"], [1, "search-results-container"], [1, "searching-state"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], [1, "no-search-badge"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], [1, "failed-count"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], [1, "provider-result-group", 3, "failed"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], [1, "error-badge"], [1, "provider-result-files"], [1, "no-results-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], ["text", "Searching across providers..."], ["text", "Loading files..."], [1, "error-icon"], [1, "fa-solid", "fa-circle-exclamation"], [1, "error-message"], [1, "retry-btn", 3, "click"], [1, "file-table"], [1, "col-name", 3, "click"], [1, "fa-solid", "sort-icon"], [1, "col-type"], [1, "col-size", 3, "click"], [1, "col-modified", 3, "click"], [1, "file-row", 3, "selected"], [1, "file-row", 3, "click", "dblclick"], [1, "col-name"], [1, "item-icon"], [1, "item-name"], [1, "item-type"], [1, "col-size"], [1, "item-size"], [1, "col-modified"], [1, "item-date"], [1, "file-grid"], [1, "grid-item", 3, "selected"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], [1, "grid-meta"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "empty-message"], [1, "upload-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "toolbar-left"], [1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], ["title", "Copy file to another storage account", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-cloud-arrow-up"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "fa-solid", "fa-trash"], [1, "toolbar-right"], [1, "view-toggle"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th"], [1, "item-count"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "progress-content"], [1, "progress-info"], [1, "progress-bar-wrap"], [1, "progress-bar"], [1, "progress-percent"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], ["type", "text", "placeholder", "Enter folder name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "modal-footer"], [3, "click", "disabled"], [1, "warning"], [1, "danger", 3, "click", "disabled"], ["type", "text", "placeholder", "Enter new name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination path", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination folder (e.g., folder1/folder2/)", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [2, "font-size", "11px", "color", "var(--mj-text-secondary)", "margin-top", "8px"], [2, "font-size", "12px", "color", "var(--mj-text-secondary)", "margin-bottom", "16px"], [1, "account-checkbox-list"], [1, "account-checkbox-item"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("dragenter", function FileGridComponent_Template_div_dragenter_0_listener($event) { return ctx.onDragEnter($event); })("dragover", function FileGridComponent_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function FileGridComponent_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function FileGridComponent_Template_div_drop_0_listener($event) { return ctx.onDrop($event); });
             i0.ɵɵconditionalCreate(1, FileGridComponent_Conditional_1_Template, 22, 9, "div", 1);
@@ -2395,11 +2395,11 @@ export class FileGridComponent {
             i0.ɵɵconditional(ctx.showMoveDialog && ctx.itemToMove ? 15 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showCopyToProviderDialog && ctx.itemToCopyToProvider ? 16 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.LabelDirective], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #fff;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #e8e8e8;\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #333;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\n}\n\n.path-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #999;\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: #fff;\n  cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid #ccc;\n}\n\n.file-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background-color: #f0f0f0;\n  z-index: 10;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid #ccc;\n  font-weight: 600;\n  color: #333;\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background-color: #e8e8e8;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  margin-right: 4px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #666;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #e8e8e8;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f8f8;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n  background-color: #cce8ff;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]:hover {\n  background-color: #b3d9ff;\n}\n\n.file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  color: #333;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  width: 50%;\n}\n\n.col-type[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-size[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-modified[_ngcontent-%COMP%] {\n  width: 20%;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  flex-shrink: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.fa-folder[_ngcontent-%COMP%] {\n  color: #FFB84D;\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n  color: #2B579A;\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n  color: #217346;\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n  color: #673AB7;\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n  color: #F57C00;\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n  color: #795548;\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n  color: #388E3C;\n}\n\n\n\n\n\n\n.file-grid-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n}\n\n.file-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid #e8e8e8;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: #fff;\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n  background-color: #f8f8f8;\n  border-color: #ccc;\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n  background-color: #cce8ff;\n  border-color: #007AFF;\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: #666;\n}\n\n.grid-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.grid-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #333;\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #666;\n  margin-top: 4px;\n}\n\n\n\n\n\n\n.bottom-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: #f8f8f8;\n  border-top: 1px solid #ccc;\n  min-height: 36px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #e8e8e8;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: #fff;\n  border: none;\n  border-right: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.view-btn[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  background-color: #f0f0f0;\n  color: #333;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background-color: #007AFF;\n  color: #fff;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #666;\n}\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.error-icon[_ngcontent-%COMP%], \n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: #999;\n  margin-bottom: 16px;\n}\n\n.error-message[_ngcontent-%COMP%], \n.empty-message[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  margin-bottom: 16px;\n}\n\n.retry-btn[_ngcontent-%COMP%], \n.upload-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover, \n.upload-btn[_ngcontent-%COMP%]:hover {\n  background-color: #f0f0f0;\n}\n\n\n\n\n\n\n.drag-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0.95);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed #007AFF;\n}\n\n.drag-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #007AFF;\n  margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 600;\n  color: #007AFF;\n  margin: 0;\n}\n\n\n\n\n\n\n.upload-progress[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: #333;\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 6px;\n  background-color: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n  height: 100%;\n  background-color: #007AFF;\n  transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  text-align: right;\n}\n\n\n\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: #fff;\n  border: 1px solid #999;\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.modal-body[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: #fff;\n  cursor: pointer;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:disabled {\n  background-color: #f5f5f5;\n  cursor: not-allowed;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #333;\n}\n\n.modal-body[_ngcontent-%COMP%]   .warning[_ngcontent-%COMP%] {\n  color: #D32F2F;\n  font-size: 12px;\n}\n\n\n\n.account-checkbox-list[_ngcontent-%COMP%] {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 8px;\n  background: #fafafa;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]:hover {\n  background-color: #e8f4fd;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: #007AFF;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #666;\n  background: #e0e0e0;\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: #e8f4fd;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #0066cc;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: #f8f8f8;\n  border-top: 1px solid #ccc;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border: 1px solid #ccc;\n  background: #fff;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #f0f0f0;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%] {\n  background-color: #D32F2F;\n  color: #fff;\n  border-color: #D32F2F;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #B71C1C;\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f0f0f0;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border: 2px solid #f0f0f0;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\n}\n\n\n\n\n\n\n@media screen and (max-width: 768px) {\n  .file-table[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 4px 6px;\n  }\n\n  .col-type[_ngcontent-%COMP%], \n   .col-size[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .col-name[_ngcontent-%COMP%] {\n    width: 60%;\n  }\n\n  .col-modified[_ngcontent-%COMP%] {\n    width: 40%;\n  }\n\n  .toolbar-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .modal-dialog[_ngcontent-%COMP%] {\n    min-width: 90%;\n  }\n}\n\n\n\n\n\n\n.multi-search-btn[_ngcontent-%COMP%] {\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n  background-color: #e8e8e8;\n  color: #333;\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n  background-color: #007AFF;\n  color: #fff;\n  border-color: #007AFF;\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n  background: #fff;\n  border-bottom: 1px solid #ccc;\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: #f0f7ff;\n  border-bottom: 1px solid #cce8ff;\n}\n\n.search-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #007AFF;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.search-panel-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.search-input-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #007AFF;\n  color: #fff;\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #0056b3;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #333;\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fafafa;\n  transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: #007AFF;\n  background: #f0f7ff;\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: #f5f5f5;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   .provider-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.no-search-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #999;\n  font-style: italic;\n}\n\n\n\n.search-results-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid #e0e0e0;\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: #f8f8f8;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .provider-stats[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .failed-count[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n.provider-results-list[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.provider-result-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.provider-result-group[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: #f5f5f5;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007AFF;\n}\n\n.provider-result-header[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: normal;\n  color: #666;\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%] {\n  background: #fff5f5;\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.error-badge[_ngcontent-%COMP%] {\n  color: #D32F2F;\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid #f0f0f0;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n  background-color: #f8f8f8;\n}\n\n.search-result-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #666;\n  flex-shrink: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-path[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #999;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-size[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message[_ngcontent-%COMP%] {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: #999;\n  font-style: italic;\n}\n\n.searching-state[_ngcontent-%COMP%] {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.LabelDirective], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n}\n\n.breadcrumb-path[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.path-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background-color: var(--mj-bg-surface-sunken);\n  z-index: 10;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  margin-right: 4px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  color: var(--mj-text-primary);\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  width: 50%;\n}\n\n.col-type[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-size[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-modified[_ngcontent-%COMP%] {\n  width: 20%;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.fa-folder[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.file-grid-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: var(--mj-bg-surface);\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.grid-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.grid-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n}\n\n\n\n\n\n\n.bottom-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n  min-height: 36px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: none;\n  border-right: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.view-btn[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.error-icon[_ngcontent-%COMP%], \n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.error-message[_ngcontent-%COMP%], \n.empty-message[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  margin-bottom: 16px;\n}\n\n.retry-btn[_ngcontent-%COMP%], \n.upload-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover, \n.upload-btn[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n.drag-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  margin: 0;\n}\n\n\n\n\n\n\n.upload-progress[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 6px;\n  background-color: var(--mj-border-default);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n\n\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-text-disabled);\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.modal-body[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:disabled {\n  background-color: var(--mj-bg-surface-card);\n  cursor: not-allowed;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   .warning[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 12px;\n}\n\n\n\n.account-checkbox-list[_ngcontent-%COMP%] {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-border-default);\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-error);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n@media screen and (max-width: 768px) {\n  .file-table[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 4px 6px;\n  }\n\n  .col-type[_ngcontent-%COMP%], \n   .col-size[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .col-name[_ngcontent-%COMP%] {\n    width: 60%;\n  }\n\n  .col-modified[_ngcontent-%COMP%] {\n    width: 40%;\n  }\n\n  .toolbar-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .modal-dialog[_ngcontent-%COMP%] {\n    min-width: 90%;\n  }\n}\n\n\n\n\n\n\n.multi-search-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.search-panel-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.search-input-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface-card);\n  transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   .provider-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.no-search-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n\n\n.search-results-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .provider-stats[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .failed-count[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.provider-results-list[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.provider-result-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.provider-result-group[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: normal;\n  color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.error-badge[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-path[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-size[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message[_ngcontent-%COMP%] {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n.searching-state[_ngcontent-%COMP%] {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileGridComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <!-- Breadcrumb Navigation Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"breadcrumb-bar\">\n      <div class=\"nav-buttons\">\n        <button class=\"nav-btn\"\n          [disabled]=\"!canNavigateUp()\"\n          (click)=\"navigateUp()\"\n          title=\"Go up to parent folder\">\n          <i class=\"fa-solid fa-arrow-up\"></i>\n        </button>\n        <button class=\"nav-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n        </button>\n      </div>\n      <div class=\"breadcrumb-path\">\n        <i class=\"fa-solid fa-folder\"></i>\n        <span class=\"path-text\">{{ folderPath || 'Root' }} /</span>\n      </div>\n      <div class=\"search-bar\">\n        <input type=\"text\"\n          class=\"search-input\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          placeholder=\"Search files and folders...\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n        @if (searchQuery && !isMultiProviderSearchMode) {\n          <button class=\"search-clear-btn\"\n            (click)=\"clearSearch()\"\n            title=\"Clear search\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n        <select class=\"file-type-filter\"\n          [(ngModel)]=\"fileTypeFilter\"\n          (ngModelChange)=\"onFileTypeFilterChange($event)\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n          <option value=\"all\">All</option>\n          <option value=\"files\">Files</option>\n          <option value=\"folders\">Folders</option>\n        </select>\n        <button class=\"multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage providers\">\n          <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-provider-search-panel\">\n      <div class=\"search-panel-header\">\n        <h3><i class=\"fa-solid fa-magnifying-glass\"></i> Search Across Providers</h3>\n        <button class=\"close-panel-btn\" (click)=\"toggleMultiAccountSearchMode()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"search-panel-body\">\n        <div class=\"search-input-row\">\n          <input type=\"text\"\n            class=\"multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Enter search term...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\">\n          <button class=\"search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!isSearching) {\n              <i class=\"fa-solid fa-search\"></i>\n            }\n            {{ isSearching ? 'Searching...' : 'Search' }}\n          </button>\n        </div>\n        <div class=\"provider-selection\">\n          <label class=\"provider-selection-label\">Select accounts to search:</label>\n          <div class=\"provider-checkboxes\">\n            @for (a of availableAccounts; track a) {\n              <label\n                class=\"provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [title]=\"accountSupportsSearch(a) ? '' : 'This account does not support search'\">\n                <input type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\">\n                <span class=\"provider-name\">{{ a.account.Name }}</span>\n                <span class=\"provider-type\">({{ a.provider.Name }})</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"search-results-container\">\n          <div class=\"search-results-summary\">\n            <span class=\"result-count\">{{ multiProviderSearchResults.totalResultsReturned }} result(s) found</span>\n            <span class=\"provider-stats\">\n              ({{ multiProviderSearchResults.successfulAccounts }} account(s) searched\n              @if (multiProviderSearchResults.failedAccounts > 0) {\n                <span class=\"failed-count\">\n                  , {{ multiProviderSearchResults.failedAccounts }} failed\n                </span>\n                })\n              </span>\n              <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear\n              </button>\n            </div>\n            <div class=\"provider-results-list\">\n              @for (accountResult of multiProviderSearchResults.accountResults; track accountResult) {\n                <div\n                  class=\"provider-result-group\"\n                  [class.failed]=\"!accountResult.success\">\n                  <div class=\"provider-result-header\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    <span class=\"provider-name\">{{ accountResult.accountName }}</span>\n                    @if (accountResult.success) {\n                      <span class=\"result-count\">\n                        ({{ accountResult.results.length }} result(s))\n                      </span>\n                    }\n                    @if (!accountResult.success) {\n                      <span class=\"error-badge\">\n                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                        {{ accountResult.errorMessage }}\n                      </span>\n                    }\n                  </div>\n                  @if (accountResult.success && accountResult.results.length > 0) {\n                    <div class=\"provider-result-files\">\n                      @for (file of accountResult.results; track file) {\n                        <div class=\"search-result-item\">\n                          <i [class]=\"getSearchResultIcon(file)\" class=\"file-icon\"></i>\n                          <div class=\"file-info\">\n                            <span class=\"file-name\">{{ file.name }}</span>\n                            <span class=\"file-path\">{{ file.path }}</span>\n                          </div>\n                          <span class=\"file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                          <span class=\"file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (accountResult.success && accountResult.results.length === 0) {\n                    <div class=\"no-results-message\">\n                      No matching files found\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Searching State -->\n        @if (isSearching) {\n          <div class=\"searching-state\">\n            <mj-loading text=\"Searching across providers...\"></mj-loading>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Loading State -->\n    @if (isLoading && !isMultiProviderSearchMode) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading files...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !isLoading) {\n      <div class=\"error-state\">\n        <div class=\"error-icon\">\n          <i class=\"fa-solid fa-circle-exclamation\"></i>\n        </div>\n        <p class=\"error-message\">{{ errorMessage }}</p>\n        <button class=\"retry-btn\" (click)=\"refresh()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Retry\n        </button>\n      </div>\n    }\n\n    <!-- List View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n      <div class=\"file-table-wrapper\">\n        <table class=\"file-table\">\n          <thead>\n            <tr>\n              <th class=\"col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Name</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n              </th>\n              <th class=\"col-type\">Type</th>\n              <th class=\"col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Size</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n              </th>\n              <th class=\"col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Modified</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredItems; track item) {\n              <tr\n                class=\"file-row\"\n                [class.selected]=\"selectedItems.includes(item.key)\"\n                (click)=\"onTileClick(item, $event)\"\n                (dblclick)=\"onItemDoubleClick(item)\">\n                <td class=\"col-name\">\n                  <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  <span class=\"item-name\">{{ item.name }}</span>\n                </td>\n                <td class=\"col-type\">\n                  <span class=\"item-type\">{{ getFileType(item) }}</span>\n                </td>\n                <td class=\"col-size\">\n                  <span class=\"item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n                </td>\n                <td class=\"col-modified\">\n                  <span class=\"item-date\">{{ formatDate(item.lastModified) }}</span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <!-- Grid View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n      <div class=\"file-grid-wrapper\">\n        <div class=\"file-grid\">\n          @for (item of filteredItems; track item) {\n            <div\n              class=\"grid-item\"\n              [class.selected]=\"selectedItems.includes(item.key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <div class=\"grid-icon\">\n                <i [class]=\"getItemIcon(item)\"></i>\n              </div>\n              <div class=\"grid-name\">{{ item.name }}</div>\n              @if (item.type === 'file') {\n                <div class=\"grid-meta\">{{ formatFileSize(item.size) }}</div>\n              }\n              @if (item.type === 'folder') {\n                <div class=\"grid-meta\">Folder</div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Empty State -->\n    @if (!isLoading && !errorMessage && filteredItems.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </div>\n        <p class=\"empty-message\">This folder is empty</p>\n        <button class=\"upload-btn\" (click)=\"onUploadClick()\">\n          <i class=\"fa-solid fa-upload\"></i>\n          Upload Files\n        </button>\n      </div>\n    }\n\n    <!-- Bottom Toolbar -->\n    @if (!isLoading && !errorMessage) {\n      <div class=\"bottom-toolbar\">\n        <div class=\"toolbar-left\">\n          <button class=\"toolbar-btn\" (click)=\"onUploadClick()\">\n            <i class=\"fa-solid fa-upload\"></i>\n            Upload\n          </button>\n          <button class=\"toolbar-btn\" (click)=\"onNewFolderClick()\">\n            <i class=\"fa-solid fa-folder-plus\"></i>\n            New Folder\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onDownloadClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n            Download\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onRenameClick()\">\n            <i class=\"fa-solid fa-pen\"></i>\n            Rename\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onCopyClick()\">\n            <i class=\"fa-solid fa-copy\"></i>\n            Copy\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1 || getSelectedItem()?.type === 'folder'\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy file to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            Copy to...\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onMoveClick()\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            Move\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length === 0\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete\n          </button>\n        </div>\n        <div class=\"toolbar-right\">\n          <!-- View Toggle -->\n          <div class=\"view-toggle\">\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'list'\"\n              (click)=\"viewMode = 'list'\"\n              title=\"List View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'grid'\"\n              (click)=\"viewMode = 'grid'\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-th\"></i>\n            </button>\n          </div>\n          <span class=\"item-count\">\n            {{ filteredItems.length }} {{ filteredItems.length === 1 ? 'item' : 'filteredItems' }}\n          </span>\n        </div>\n      </div>\n    }\n\n    <!-- Drag & Drop Overlay -->\n    @if (isDragging) {\n      <div class=\"drag-overlay\">\n        <div class=\"drag-content\">\n          <div class=\"drag-icon\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          </div>\n          <h2 class=\"drag-title\">Drop files to upload</h2>\n        </div>\n      </div>\n    }\n\n    <!-- Upload Progress -->\n    @if (isUploading) {\n      <div class=\"upload-progress\">\n        <div class=\"progress-content\">\n          <div class=\"progress-info\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Uploading {{ uploadingFileName }}...</span>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <div class=\"progress-bar\" [style.width.%]=\"uploadProgress\"></div>\n          </div>\n          <span class=\"progress-percent\">{{ uploadProgress }}%</span>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- New Folder Modal -->\n  @if (showNewFolderDialog) {\n    <div class=\"modal-overlay\" (click)=\"onCancelNewFolder()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Create New Folder</h3>\n          <button class=\"modal-close\" (click)=\"onCancelNewFolder()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>Folder name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newFolderName\"\n            [disabled]=\"isCreatingFolder\"\n            placeholder=\"Enter folder name\"\n            (keydown.enter)=\"onCreateFolder()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelNewFolder()\" [disabled]=\"isCreatingFolder\">Cancel</button>\n          <button (click)=\"onCreateFolder()\" [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n            @if (isCreatingFolder) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Modal -->\n  @if (showDeleteDialog && itemToDelete) {\n    <div class=\"modal-overlay\" (click)=\"onCancelDelete()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n          <button class=\"modal-close\" (click)=\"onCancelDelete()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?</p>\n          @if (itemToDelete.type === 'folder') {\n            <p class=\"warning\">This will delete the folder and all its contents.</p>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n          <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n            @if (isDeleting) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isDeleting ? 'Deleting...' : 'Delete' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Rename Modal -->\n  @if (showRenameDialog && itemToRename) {\n    <div class=\"modal-overlay\" (click)=\"onCancelRename()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelRename()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>New name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newItemName\"\n            [disabled]=\"isRenaming\"\n            placeholder=\"Enter new name\"\n            (keydown.enter)=\"onConfirmRename()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelRename()\" [disabled]=\"isRenaming\">Cancel</button>\n          <button (click)=\"onConfirmRename()\" [disabled]=\"isRenaming || !newItemName.trim()\">\n            @if (isRenaming) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isRenaming ? 'Renaming...' : 'Rename' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy Modal -->\n  @if (showCopyDialog && itemToCopy) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopy()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopy()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopy.name }}</strong></p>\n          <label>Destination path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyDestinationPath\"\n            [disabled]=\"isCopying\"\n            placeholder=\"Enter destination path\"\n            (keydown.enter)=\"onConfirmCopy()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopy()\" [disabled]=\"isCopying\">Cancel</button>\n          <button (click)=\"onConfirmCopy()\" [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n            @if (isCopying) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopying ? 'Copying...' : 'Copy' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Move Modal -->\n  @if (showMoveDialog && itemToMove) {\n    <div class=\"modal-overlay\" (click)=\"onCancelMove()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelMove()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Moving: <strong>{{ itemToMove.name }}</strong></p>\n          <label>Destination folder path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"moveDestinationPath\"\n            [disabled]=\"isMoving\"\n            placeholder=\"Enter destination folder (e.g., folder1/folder2/)\"\n            (keydown.enter)=\"onConfirmMove()\">\n          <p style=\"font-size: 11px; color: #666; margin-top: 8px;\">\n            File will be moved to: {{ moveDestinationPath }}{{ itemToMove.name }}\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelMove()\" [disabled]=\"isMoving\">Cancel</button>\n          <button (click)=\"onConfirmMove()\" [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n            @if (isMoving) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isMoving ? 'Moving...' : 'Move' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy to Account Modal -->\n  @if (showCopyToProviderDialog && itemToCopyToProvider) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopyToAccount()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy to Another Account</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopyToAccount()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopyToProvider.name }}</strong></p>\n          <p style=\"font-size: 12px; color: #666; margin-bottom: 16px;\">\n            From: <strong>{{ account?.account?.Name }}</strong>\n          </p>\n          <label>Select destination account(s):</label>\n          <div class=\"account-checkbox-list\">\n            @for (a of availableAccounts; track a) {\n              <div class=\"account-checkbox-item\">\n                <input type=\"checkbox\"\n                  [id]=\"'dest-account-' + a.account.ID\"\n                  [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                  [disabled]=\"isCopyingToAccount\"\n                  (change)=\"toggleDestinationAccount(a.account.ID)\">\n                <label [for]=\"'dest-account-' + a.account.ID\">\n                  {{ a.account.Name }} <span class=\"provider-badge\">{{ a.provider.Name }}</span>\n                </label>\n              </div>\n            }\n          </div>\n          <label style=\"margin-top: 16px;\">Destination filename:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyToAccountDestinationPath\"\n            [disabled]=\"isCopyingToAccount\"\n            placeholder=\"Enter destination filename\"\n            (keydown.enter)=\"onConfirmCopyToAccount()\">\n          @if (copyToAccountProgress) {\n            <div class=\"copy-progress\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...\n            </div>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopyToAccount()\" [disabled]=\"isCopyingToAccount\">Cancel</button>\n          <button (click)=\"onConfirmCopyToAccount()\"\n            [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n            @if (isCopyingToAccount) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* ===========================\n   File Grid - Traditional File Manager Style\n   =========================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #fff;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n/* ===========================\n   Breadcrumb Navigation Bar\n   =========================== */\n\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn {\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n  background-color: #e8e8e8;\n}\n\n.nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #333;\n}\n\n.breadcrumb-path i {\n  color: #666;\n}\n\n.path-text {\n  font-weight: 500;\n}\n\n.search-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.search-clear-btn {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #999;\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn:hover {\n  color: #333;\n}\n\n.file-type-filter {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: #fff;\n  cursor: pointer;\n}\n\n.file-type-filter:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n/* ===========================\n   File Table\n   =========================== */\n\n.file-table-wrapper {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid #ccc;\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table thead {\n  position: sticky;\n  top: 0;\n  background-color: #f0f0f0;\n  z-index: 10;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid #ccc;\n  font-weight: 600;\n  color: #333;\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table th:hover {\n  background-color: #e8e8e8;\n}\n\n.file-table th span {\n  margin-right: 4px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: #666;\n}\n\n.file-table tbody tr {\n  border-bottom: 1px solid #e8e8e8;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n  background-color: #f8f8f8;\n}\n\n.file-table tbody tr.selected {\n  background-color: #cce8ff;\n}\n\n.file-table tbody tr.selected:hover {\n  background-color: #b3d9ff;\n}\n\n.file-table td {\n  padding: 6px 10px;\n  color: #333;\n}\n\n/* Column Widths */\n.col-name {\n  width: 50%;\n}\n\n.col-type {\n  width: 15%;\n}\n\n.col-size {\n  width: 15%;\n}\n\n.col-modified {\n  width: 20%;\n}\n\n/* Name Column with Icon */\n.col-name {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon {\n  font-size: 14px;\n  color: #666;\n  flex-shrink: 0;\n}\n\n.item-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folder Icons */\n.fa-folder {\n  color: #FFB84D;\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n  color: #D32F2F;\n}\n\n.fa-file-word {\n  color: #2B579A;\n}\n\n.fa-file-excel {\n  color: #217346;\n}\n\n.fa-file-image {\n  color: #673AB7;\n}\n\n.fa-file-video {\n  color: #F57C00;\n}\n\n.fa-file-audio {\n  color: #D32F2F;\n}\n\n.fa-file-archive {\n  color: #795548;\n}\n\n.fa-file-code {\n  color: #388E3C;\n}\n\n/* ===========================\n   Grid View\n   =========================== */\n\n.file-grid-wrapper {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n}\n\n.file-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid #e8e8e8;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: #fff;\n}\n\n.grid-item:hover {\n  background-color: #f8f8f8;\n  border-color: #ccc;\n}\n\n.grid-item.selected {\n  background-color: #cce8ff;\n  border-color: #007AFF;\n}\n\n.grid-icon {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: #666;\n}\n\n.grid-icon i {\n  display: block;\n}\n\n.grid-name {\n  font-size: 12px;\n  color: #333;\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta {\n  font-size: 11px;\n  color: #666;\n  margin-top: 4px;\n}\n\n/* ===========================\n   Bottom Toolbar\n   =========================== */\n\n.bottom-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: #f8f8f8;\n  border-top: 1px solid #ccc;\n  min-height: 36px;\n}\n\n.toolbar-left {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n  background-color: #e8e8e8;\n}\n\n.toolbar-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn i {\n  font-size: 12px;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle {\n  display: flex;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn {\n  background: #fff;\n  border: none;\n  border-right: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.view-btn:last-child {\n  border-right: none;\n}\n\n.view-btn:hover {\n  background-color: #f0f0f0;\n  color: #333;\n}\n\n.view-btn.active {\n  background-color: #007AFF;\n  color: #fff;\n}\n\n.item-count {\n  font-size: 11px;\n  color: #666;\n}\n\n/* ===========================\n   Loading / Error / Empty States\n   =========================== */\n\n.loading-state,\n.error-state,\n.empty-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.error-icon,\n.empty-icon {\n  font-size: 48px;\n  color: #999;\n  margin-bottom: 16px;\n}\n\n.error-message,\n.empty-message {\n  font-size: 14px;\n  color: #666;\n  margin-bottom: 16px;\n}\n\n.retry-btn,\n.upload-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.retry-btn:hover,\n.upload-btn:hover {\n  background-color: #f0f0f0;\n}\n\n/* ===========================\n   Drag & Drop Overlay\n   =========================== */\n\n.drag-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0.95);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed #007AFF;\n}\n\n.drag-content {\n  text-align: center;\n}\n\n.drag-icon {\n  font-size: 64px;\n  color: #007AFF;\n  margin-bottom: 16px;\n}\n\n.drag-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #007AFF;\n  margin: 0;\n}\n\n/* ===========================\n   Upload Progress\n   =========================== */\n\n.upload-progress {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: #333;\n}\n\n.progress-bar-wrap {\n  width: 100%;\n  height: 6px;\n  background-color: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar {\n  height: 100%;\n  background-color: #007AFF;\n  transition: width 0.3s ease;\n}\n\n.progress-percent {\n  font-size: 12px;\n  color: #666;\n  text-align: right;\n}\n\n/* ===========================\n   Modal Dialogs\n   =========================== */\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog {\n  background: #fff;\n  border: 1px solid #999;\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.modal-close:hover {\n  color: #333;\n}\n\n.modal-body {\n  padding: 16px;\n}\n\n.modal-body label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-body input[type=\"text\"] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body input[type=\"text\"]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.modal-body select,\n.modal-body .provider-select {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: #fff;\n  cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n  background-color: #f5f5f5;\n  cursor: not-allowed;\n}\n\n.modal-body p {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #333;\n}\n\n.modal-body .warning {\n  color: #D32F2F;\n  font-size: 12px;\n}\n\n/* Checkbox list for multi-account selection */\n.account-checkbox-list {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 8px;\n  background: #fafafa;\n}\n\n.account-checkbox-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item:hover {\n  background-color: #e8f4fd;\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: #007AFF;\n}\n\n.account-checkbox-item label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge {\n  font-size: 11px;\n  color: #666;\n  background: #e0e0e0;\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: #e8f4fd;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #0066cc;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: #f8f8f8;\n  border-top: 1px solid #ccc;\n}\n\n.modal-footer button {\n  padding: 6px 16px;\n  border: 1px solid #ccc;\n  background: #fff;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer button:hover:not(:disabled) {\n  background-color: #f0f0f0;\n}\n\n.modal-footer button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer button.danger {\n  background-color: #D32F2F;\n  color: #fff;\n  border-color: #D32F2F;\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n  background-color: #B71C1C;\n}\n\n/* ===========================\n   Scrollbars\n   =========================== */\n\n.file-table-wrapper::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper::-webkit-scrollbar-track {\n  background: #f0f0f0;\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border: 2px solid #f0f0f0;\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\n}\n\n/* ===========================\n   Responsive Design\n   =========================== */\n\n@media screen and (max-width: 768px) {\n  .file-table {\n    font-size: 11px;\n  }\n\n  .file-table th,\n  .file-table td {\n    padding: 4px 6px;\n  }\n\n  .col-type,\n  .col-size {\n    display: none;\n  }\n\n  .col-name {\n    width: 60%;\n  }\n\n  .col-modified {\n    width: 40%;\n  }\n\n  .toolbar-btn span {\n    display: none;\n  }\n\n  .modal-dialog {\n    min-width: 90%;\n  }\n}\n\n/* ===========================\n   Multi-Provider Search\n   =========================== */\n\n.multi-search-btn {\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n  background-color: #e8e8e8;\n  color: #333;\n}\n\n.multi-search-btn.active {\n  background-color: #007AFF;\n  color: #fff;\n  border-color: #007AFF;\n}\n\n.multi-provider-search-panel {\n  background: #fff;\n  border-bottom: 1px solid #ccc;\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: #f0f7ff;\n  border-bottom: 1px solid #cce8ff;\n}\n\n.search-panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #007AFF;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.close-panel-btn:hover {\n  color: #333;\n}\n\n.search-panel-body {\n  padding: 16px;\n}\n\n.search-input-row {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.search-execute-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #007AFF;\n  color: #fff;\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn:hover:not(:disabled) {\n  background-color: #0056b3;\n}\n\n.search-execute-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #333;\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fafafa;\n  transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n  border-color: #007AFF;\n  background: #f0f7ff;\n}\n\n.provider-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: #f5f5f5;\n}\n\n.provider-checkbox input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.provider-checkbox .provider-name {\n  font-weight: 500;\n}\n\n.no-search-badge {\n  font-size: 10px;\n  color: #999;\n  font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid #e0e0e0;\n}\n\n.search-results-summary {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: #f8f8f8;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.search-results-summary .result-count {\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.search-results-summary .provider-stats {\n  font-size: 12px;\n  color: #666;\n}\n\n.search-results-summary .failed-count {\n  color: #D32F2F;\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n.provider-results-list {\n  padding: 8px 0;\n}\n\n.provider-result-group {\n  margin-bottom: 16px;\n}\n\n.provider-result-group:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: #f5f5f5;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.provider-result-header i {\n  color: #007AFF;\n}\n\n.provider-result-header .result-count {\n  font-weight: normal;\n  color: #666;\n}\n\n.provider-result-group.failed .provider-result-header {\n  background: #fff5f5;\n}\n\n.provider-result-group.failed .provider-result-header i {\n  color: #D32F2F;\n}\n\n.error-badge {\n  color: #D32F2F;\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files {\n  padding: 0;\n}\n\n.search-result-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid #f0f0f0;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n  background-color: #f8f8f8;\n}\n\n.search-result-item:last-child {\n  border-bottom: none;\n}\n\n.search-result-item .file-icon {\n  font-size: 16px;\n  color: #666;\n  flex-shrink: 0;\n}\n\n.search-result-item .file-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item .file-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-path {\n  font-size: 11px;\n  color: #999;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-size {\n  font-size: 12px;\n  color: #666;\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item .file-date {\n  font-size: 12px;\n  color: #666;\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: #999;\n  font-style: italic;\n}\n\n.searching-state {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <!-- Breadcrumb Navigation Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"breadcrumb-bar\">\n      <div class=\"nav-buttons\">\n        <button class=\"nav-btn\"\n          [disabled]=\"!canNavigateUp()\"\n          (click)=\"navigateUp()\"\n          title=\"Go up to parent folder\">\n          <i class=\"fa-solid fa-arrow-up\"></i>\n        </button>\n        <button class=\"nav-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n        </button>\n      </div>\n      <div class=\"breadcrumb-path\">\n        <i class=\"fa-solid fa-folder\"></i>\n        <span class=\"path-text\">{{ folderPath || 'Root' }} /</span>\n      </div>\n      <div class=\"search-bar\">\n        <input type=\"text\"\n          class=\"search-input\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          placeholder=\"Search files and folders...\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n        @if (searchQuery && !isMultiProviderSearchMode) {\n          <button class=\"search-clear-btn\"\n            (click)=\"clearSearch()\"\n            title=\"Clear search\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n        <select class=\"file-type-filter\"\n          [(ngModel)]=\"fileTypeFilter\"\n          (ngModelChange)=\"onFileTypeFilterChange($event)\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n          <option value=\"all\">All</option>\n          <option value=\"files\">Files</option>\n          <option value=\"folders\">Folders</option>\n        </select>\n        <button class=\"multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage providers\">\n          <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-provider-search-panel\">\n      <div class=\"search-panel-header\">\n        <h3><i class=\"fa-solid fa-magnifying-glass\"></i> Search Across Providers</h3>\n        <button class=\"close-panel-btn\" (click)=\"toggleMultiAccountSearchMode()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"search-panel-body\">\n        <div class=\"search-input-row\">\n          <input type=\"text\"\n            class=\"multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Enter search term...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\">\n          <button class=\"search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!isSearching) {\n              <i class=\"fa-solid fa-search\"></i>\n            }\n            {{ isSearching ? 'Searching...' : 'Search' }}\n          </button>\n        </div>\n        <div class=\"provider-selection\">\n          <label class=\"provider-selection-label\">Select accounts to search:</label>\n          <div class=\"provider-checkboxes\">\n            @for (a of availableAccounts; track a) {\n              <label\n                class=\"provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [title]=\"accountSupportsSearch(a) ? '' : 'This account does not support search'\">\n                <input type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\">\n                <span class=\"provider-name\">{{ a.account.Name }}</span>\n                <span class=\"provider-type\">({{ a.provider.Name }})</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"search-results-container\">\n          <div class=\"search-results-summary\">\n            <span class=\"result-count\">{{ multiProviderSearchResults.totalResultsReturned }} result(s) found</span>\n            <span class=\"provider-stats\">\n              ({{ multiProviderSearchResults.successfulAccounts }} account(s) searched\n              @if (multiProviderSearchResults.failedAccounts > 0) {\n                <span class=\"failed-count\">\n                  , {{ multiProviderSearchResults.failedAccounts }} failed\n                </span>\n                })\n              </span>\n              <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear\n              </button>\n            </div>\n            <div class=\"provider-results-list\">\n              @for (accountResult of multiProviderSearchResults.accountResults; track accountResult) {\n                <div\n                  class=\"provider-result-group\"\n                  [class.failed]=\"!accountResult.success\">\n                  <div class=\"provider-result-header\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    <span class=\"provider-name\">{{ accountResult.accountName }}</span>\n                    @if (accountResult.success) {\n                      <span class=\"result-count\">\n                        ({{ accountResult.results.length }} result(s))\n                      </span>\n                    }\n                    @if (!accountResult.success) {\n                      <span class=\"error-badge\">\n                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                        {{ accountResult.errorMessage }}\n                      </span>\n                    }\n                  </div>\n                  @if (accountResult.success && accountResult.results.length > 0) {\n                    <div class=\"provider-result-files\">\n                      @for (file of accountResult.results; track file) {\n                        <div class=\"search-result-item\">\n                          <i [class]=\"getSearchResultIcon(file)\" class=\"file-icon\"></i>\n                          <div class=\"file-info\">\n                            <span class=\"file-name\">{{ file.name }}</span>\n                            <span class=\"file-path\">{{ file.path }}</span>\n                          </div>\n                          <span class=\"file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                          <span class=\"file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (accountResult.success && accountResult.results.length === 0) {\n                    <div class=\"no-results-message\">\n                      No matching files found\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Searching State -->\n        @if (isSearching) {\n          <div class=\"searching-state\">\n            <mj-loading text=\"Searching across providers...\"></mj-loading>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Loading State -->\n    @if (isLoading && !isMultiProviderSearchMode) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading files...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !isLoading) {\n      <div class=\"error-state\">\n        <div class=\"error-icon\">\n          <i class=\"fa-solid fa-circle-exclamation\"></i>\n        </div>\n        <p class=\"error-message\">{{ errorMessage }}</p>\n        <button class=\"retry-btn\" (click)=\"refresh()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Retry\n        </button>\n      </div>\n    }\n\n    <!-- List View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n      <div class=\"file-table-wrapper\">\n        <table class=\"file-table\">\n          <thead>\n            <tr>\n              <th class=\"col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Name</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n              </th>\n              <th class=\"col-type\">Type</th>\n              <th class=\"col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Size</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n              </th>\n              <th class=\"col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Modified</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredItems; track item) {\n              <tr\n                class=\"file-row\"\n                [class.selected]=\"selectedItems.includes(item.key)\"\n                (click)=\"onTileClick(item, $event)\"\n                (dblclick)=\"onItemDoubleClick(item)\">\n                <td class=\"col-name\">\n                  <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  <span class=\"item-name\">{{ item.name }}</span>\n                </td>\n                <td class=\"col-type\">\n                  <span class=\"item-type\">{{ getFileType(item) }}</span>\n                </td>\n                <td class=\"col-size\">\n                  <span class=\"item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n                </td>\n                <td class=\"col-modified\">\n                  <span class=\"item-date\">{{ formatDate(item.lastModified) }}</span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <!-- Grid View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n      <div class=\"file-grid-wrapper\">\n        <div class=\"file-grid\">\n          @for (item of filteredItems; track item) {\n            <div\n              class=\"grid-item\"\n              [class.selected]=\"selectedItems.includes(item.key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <div class=\"grid-icon\">\n                <i [class]=\"getItemIcon(item)\"></i>\n              </div>\n              <div class=\"grid-name\">{{ item.name }}</div>\n              @if (item.type === 'file') {\n                <div class=\"grid-meta\">{{ formatFileSize(item.size) }}</div>\n              }\n              @if (item.type === 'folder') {\n                <div class=\"grid-meta\">Folder</div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Empty State -->\n    @if (!isLoading && !errorMessage && filteredItems.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </div>\n        <p class=\"empty-message\">This folder is empty</p>\n        <button class=\"upload-btn\" (click)=\"onUploadClick()\">\n          <i class=\"fa-solid fa-upload\"></i>\n          Upload Files\n        </button>\n      </div>\n    }\n\n    <!-- Bottom Toolbar -->\n    @if (!isLoading && !errorMessage) {\n      <div class=\"bottom-toolbar\">\n        <div class=\"toolbar-left\">\n          <button class=\"toolbar-btn\" (click)=\"onUploadClick()\">\n            <i class=\"fa-solid fa-upload\"></i>\n            Upload\n          </button>\n          <button class=\"toolbar-btn\" (click)=\"onNewFolderClick()\">\n            <i class=\"fa-solid fa-folder-plus\"></i>\n            New Folder\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onDownloadClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n            Download\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onRenameClick()\">\n            <i class=\"fa-solid fa-pen\"></i>\n            Rename\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onCopyClick()\">\n            <i class=\"fa-solid fa-copy\"></i>\n            Copy\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1 || getSelectedItem()?.type === 'folder'\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy file to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            Copy to...\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onMoveClick()\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            Move\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length === 0\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete\n          </button>\n        </div>\n        <div class=\"toolbar-right\">\n          <!-- View Toggle -->\n          <div class=\"view-toggle\">\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'list'\"\n              (click)=\"viewMode = 'list'\"\n              title=\"List View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'grid'\"\n              (click)=\"viewMode = 'grid'\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-th\"></i>\n            </button>\n          </div>\n          <span class=\"item-count\">\n            {{ filteredItems.length }} {{ filteredItems.length === 1 ? 'item' : 'filteredItems' }}\n          </span>\n        </div>\n      </div>\n    }\n\n    <!-- Drag & Drop Overlay -->\n    @if (isDragging) {\n      <div class=\"drag-overlay\">\n        <div class=\"drag-content\">\n          <div class=\"drag-icon\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          </div>\n          <h2 class=\"drag-title\">Drop files to upload</h2>\n        </div>\n      </div>\n    }\n\n    <!-- Upload Progress -->\n    @if (isUploading) {\n      <div class=\"upload-progress\">\n        <div class=\"progress-content\">\n          <div class=\"progress-info\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Uploading {{ uploadingFileName }}...</span>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <div class=\"progress-bar\" [style.width.%]=\"uploadProgress\"></div>\n          </div>\n          <span class=\"progress-percent\">{{ uploadProgress }}%</span>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- New Folder Modal -->\n  @if (showNewFolderDialog) {\n    <div class=\"modal-overlay\" (click)=\"onCancelNewFolder()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Create New Folder</h3>\n          <button class=\"modal-close\" (click)=\"onCancelNewFolder()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>Folder name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newFolderName\"\n            [disabled]=\"isCreatingFolder\"\n            placeholder=\"Enter folder name\"\n            (keydown.enter)=\"onCreateFolder()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelNewFolder()\" [disabled]=\"isCreatingFolder\">Cancel</button>\n          <button (click)=\"onCreateFolder()\" [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n            @if (isCreatingFolder) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Modal -->\n  @if (showDeleteDialog && itemToDelete) {\n    <div class=\"modal-overlay\" (click)=\"onCancelDelete()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n          <button class=\"modal-close\" (click)=\"onCancelDelete()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?</p>\n          @if (itemToDelete.type === 'folder') {\n            <p class=\"warning\">This will delete the folder and all its contents.</p>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n          <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n            @if (isDeleting) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isDeleting ? 'Deleting...' : 'Delete' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Rename Modal -->\n  @if (showRenameDialog && itemToRename) {\n    <div class=\"modal-overlay\" (click)=\"onCancelRename()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelRename()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>New name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newItemName\"\n            [disabled]=\"isRenaming\"\n            placeholder=\"Enter new name\"\n            (keydown.enter)=\"onConfirmRename()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelRename()\" [disabled]=\"isRenaming\">Cancel</button>\n          <button (click)=\"onConfirmRename()\" [disabled]=\"isRenaming || !newItemName.trim()\">\n            @if (isRenaming) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isRenaming ? 'Renaming...' : 'Rename' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy Modal -->\n  @if (showCopyDialog && itemToCopy) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopy()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopy()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopy.name }}</strong></p>\n          <label>Destination path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyDestinationPath\"\n            [disabled]=\"isCopying\"\n            placeholder=\"Enter destination path\"\n            (keydown.enter)=\"onConfirmCopy()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopy()\" [disabled]=\"isCopying\">Cancel</button>\n          <button (click)=\"onConfirmCopy()\" [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n            @if (isCopying) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopying ? 'Copying...' : 'Copy' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Move Modal -->\n  @if (showMoveDialog && itemToMove) {\n    <div class=\"modal-overlay\" (click)=\"onCancelMove()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelMove()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Moving: <strong>{{ itemToMove.name }}</strong></p>\n          <label>Destination folder path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"moveDestinationPath\"\n            [disabled]=\"isMoving\"\n            placeholder=\"Enter destination folder (e.g., folder1/folder2/)\"\n            (keydown.enter)=\"onConfirmMove()\">\n          <p style=\"font-size: 11px; color: var(--mj-text-secondary); margin-top: 8px;\">\n            File will be moved to: {{ moveDestinationPath }}{{ itemToMove.name }}\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelMove()\" [disabled]=\"isMoving\">Cancel</button>\n          <button (click)=\"onConfirmMove()\" [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n            @if (isMoving) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isMoving ? 'Moving...' : 'Move' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy to Account Modal -->\n  @if (showCopyToProviderDialog && itemToCopyToProvider) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopyToAccount()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy to Another Account</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopyToAccount()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopyToProvider.name }}</strong></p>\n          <p style=\"font-size: 12px; color: var(--mj-text-secondary); margin-bottom: 16px;\">\n            From: <strong>{{ account?.account?.Name }}</strong>\n          </p>\n          <label>Select destination account(s):</label>\n          <div class=\"account-checkbox-list\">\n            @for (a of availableAccounts; track a) {\n              <div class=\"account-checkbox-item\">\n                <input type=\"checkbox\"\n                  [id]=\"'dest-account-' + a.account.ID\"\n                  [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                  [disabled]=\"isCopyingToAccount\"\n                  (change)=\"toggleDestinationAccount(a.account.ID)\">\n                <label [for]=\"'dest-account-' + a.account.ID\">\n                  {{ a.account.Name }} <span class=\"provider-badge\">{{ a.provider.Name }}</span>\n                </label>\n              </div>\n            }\n          </div>\n          <label style=\"margin-top: 16px;\">Destination filename:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyToAccountDestinationPath\"\n            [disabled]=\"isCopyingToAccount\"\n            placeholder=\"Enter destination filename\"\n            (keydown.enter)=\"onConfirmCopyToAccount()\">\n          @if (copyToAccountProgress) {\n            <div class=\"copy-progress\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...\n            </div>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopyToAccount()\" [disabled]=\"isCopyingToAccount\">Cancel</button>\n          <button (click)=\"onConfirmCopyToAccount()\"\n            [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n            @if (isCopyingToAccount) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* ===========================\n   File Grid - Traditional File Manager Style\n   =========================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n/* ===========================\n   Breadcrumb Navigation Bar\n   =========================== */\n\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n}\n\n.breadcrumb-path i {\n  color: var(--mj-text-secondary);\n}\n\n.path-text {\n  font-weight: 500;\n}\n\n.search-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.file-type-filter {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.file-type-filter:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n/* ===========================\n   File Table\n   =========================== */\n\n.file-table-wrapper {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table thead {\n  position: sticky;\n  top: 0;\n  background-color: var(--mj-bg-surface-sunken);\n  z-index: 10;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table th:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table th span {\n  margin-right: 4px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.file-table tbody tr {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.file-table tbody tr.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table tbody tr.selected:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table td {\n  padding: 6px 10px;\n  color: var(--mj-text-primary);\n}\n\n/* Column Widths */\n.col-name {\n  width: 50%;\n}\n\n.col-type {\n  width: 15%;\n}\n\n.col-size {\n  width: 15%;\n}\n\n.col-modified {\n  width: 20%;\n}\n\n/* Name Column with Icon */\n.col-name {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.item-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folder Icons */\n.fa-folder {\n  color: var(--mj-status-warning);\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n  color: var(--mj-status-error);\n}\n\n.fa-file-word {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-excel {\n  color: var(--mj-status-success);\n}\n\n.fa-file-image {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-video {\n  color: var(--mj-status-warning);\n}\n\n.fa-file-audio {\n  color: var(--mj-status-error);\n}\n\n.fa-file-archive {\n  color: var(--mj-text-secondary);\n}\n\n.fa-file-code {\n  color: var(--mj-status-success);\n}\n\n/* ===========================\n   Grid View\n   =========================== */\n\n.file-grid-wrapper {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: var(--mj-bg-surface);\n}\n\n.grid-item:hover {\n  background-color: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-icon {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.grid-icon i {\n  display: block;\n}\n\n.grid-name {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n}\n\n/* ===========================\n   Bottom Toolbar\n   =========================== */\n\n.bottom-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n  min-height: 36px;\n}\n\n.toolbar-left {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn i {\n  font-size: 12px;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn {\n  background: var(--mj-bg-surface);\n  border: none;\n  border-right: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.view-btn:last-child {\n  border-right: none;\n}\n\n.view-btn:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.view-btn.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-count {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n/* ===========================\n   Loading / Error / Empty States\n   =========================== */\n\n.loading-state,\n.error-state,\n.empty-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.error-icon,\n.empty-icon {\n  font-size: 48px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.error-message,\n.empty-message {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  margin-bottom: 16px;\n}\n\n.retry-btn,\n.upload-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.retry-btn:hover,\n.upload-btn:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n/* ===========================\n   Drag & Drop Overlay\n   =========================== */\n\n.drag-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content {\n  text-align: center;\n}\n\n.drag-icon {\n  font-size: 64px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 16px;\n}\n\n.drag-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  margin: 0;\n}\n\n/* ===========================\n   Upload Progress\n   =========================== */\n\n.upload-progress {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap {\n  width: 100%;\n  height: 6px;\n  background-color: var(--mj-border-default);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.3s ease;\n}\n\n.progress-percent {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n/* ===========================\n   Modal Dialogs\n   =========================== */\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-text-disabled);\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.modal-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  padding: 16px;\n}\n\n.modal-body label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-body input[type=\"text\"] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body input[type=\"text\"]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body select,\n.modal-body .provider-select {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n  background-color: var(--mj-bg-surface-card);\n  cursor: not-allowed;\n}\n\n.modal-body p {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.modal-body .warning {\n  color: var(--mj-status-error);\n  font-size: 12px;\n}\n\n/* Checkbox list for multi-account selection */\n.account-checkbox-list {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-border-default);\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer button {\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer button:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer button.danger {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-error);\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n  background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n/* ===========================\n   Scrollbars\n   =========================== */\n\n.file-table-wrapper::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ===========================\n   Responsive Design\n   =========================== */\n\n@media screen and (max-width: 768px) {\n  .file-table {\n    font-size: 11px;\n  }\n\n  .file-table th,\n  .file-table td {\n    padding: 4px 6px;\n  }\n\n  .col-type,\n  .col-size {\n    display: none;\n  }\n\n  .col-name {\n    width: 60%;\n  }\n\n  .col-modified {\n    width: 40%;\n  }\n\n  .toolbar-btn span {\n    display: none;\n  }\n\n  .modal-dialog {\n    min-width: 90%;\n  }\n}\n\n/* ===========================\n   Multi-Provider Search\n   =========================== */\n\n.multi-search-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.close-panel-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.search-panel-body {\n  padding: 16px;\n}\n\n.search-input-row {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface-card);\n  transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.provider-checkbox .provider-name {\n  font-weight: 500;\n}\n\n.no-search-badge {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary .result-count {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-results-summary .provider-stats {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.search-results-summary .failed-count {\n  color: var(--mj-status-error);\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.provider-results-list {\n  padding: 8px 0;\n}\n\n.provider-result-group {\n  margin-bottom: 16px;\n}\n\n.provider-result-group:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.provider-result-header i {\n  color: var(--mj-brand-primary);\n}\n\n.provider-result-header .result-count {\n  font-weight: normal;\n  color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed .provider-result-header {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed .provider-result-header i {\n  color: var(--mj-status-error);\n}\n\n.error-badge {\n  color: var(--mj-status-error);\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files {\n  padding: 0;\n}\n\n.search-result-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item:last-child {\n  border-bottom: none;\n}\n\n.search-result-item .file-icon {\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.search-result-item .file-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item .file-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-path {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-size {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item .file-date {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n.searching-state {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"] }]
     }], () => [], { account: [{
             type: Input
         }], folderPath: [{