mbkbucket 3.0.1 → 3.2.0

package/public/bucketadmin.css

@@ -1,2298 +1,1420 @@
-/* Modern Card Styles matching home.handlebars */
-.dashboard-card {
-    background: white;
-    border-radius: var(--border-radius-lg-ml);
-    box-shadow: var(--shadow-md-ml);
-    border: 1px solid var(--gray-light-color-ml);
-    overflow: hidden;
-    transition: var(--transition-base-ml);
-}
-
-.dashboard-card:hover {
-    box-shadow: var(--shadow-lg-ml);
-}
-
-.card-header {
-    background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--primary-dark-color-ml) 100%);
-    color: white;
-    padding: 1rem;
-    border-bottom: 1px solid var(--gray-light-color-ml);
-}
-
-.card-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.card-icon {
-    width: 40px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-}
-
-.card-body {
-    padding: 1rem;
-}
-
-/* Collapsible Upload Section */
-.upload-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    transition: background 0.25s ease, box-shadow 0.25s ease;
-}
-
-.upload-card-header:hover {
-    background: linear-gradient(122deg, #064c47 0%, #0b6b64 52%, #0f7e75 100%);
-}
-
-.collapse-btn {
-    background: none;
-    border: none;
-    color: white;
-    padding: 0.5rem;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.collapse-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.collapse-btn i {
-    transition: transform 0.3s ease;
-}
-
-.collapse-btn.expanded i {
-    transform: rotate(180deg);
-}
-
-.collapsible-content {
-    padding: 0 !important;
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-    transform: translateY(-10px);
-    border-top: 1px solid transparent;
-    background: linear-gradient(180deg, rgba(247, 255, 252, 0.45) 0%, rgba(238, 250, 246, 0.72) 100%);
-    transition:
-        max-height 0.34s ease,
-        opacity 0.25s ease,
-        transform 0.3s ease,
-        padding 0.24s ease,
-        border-color 0.24s ease;
-}
-
-.collapsible-content.expanded {
-    padding: 1.15rem !important;
-    max-height: 2000px;
-    opacity: 1;
-    transform: translateY(0);
-    border-top-color: rgba(11, 107, 100, 0.22);
-}
-
-.dashboard-card.upload-panel-open {
-    box-shadow: 0 22px 42px rgba(7, 54, 51, 0.22);
-    border-color: rgba(11, 107, 100, 0.3);
-}
-
-.dashboard-card.upload-panel-open .upload-card-header {
-    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
-}
-
-.dashboard-card.upload-panel-open .card-title {
-    letter-spacing: 0.015em;
-}
-
-.dashboard-card.upload-panel-open .card-icon {
-    background: rgba(255, 255, 255, 0.34);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-}
-
-.dashboard-card.upload-panel-open .form-label {
-    color: #12413d;
-}
-
-.dashboard-card.upload-panel-open .form-text {
-    color: #245651;
-}
-
-/* File Stats Card - Welcome Style */
-.file-stats {
-    background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--primary-dark-color-ml) 100%);
-    color: white;
-    border: none;
-    margin-bottom: 1rem;
-}
-
-.stats-content {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.stats-icon {
-    width: 60px;
-    height: 60px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    flex-shrink: 0;
-}
-
-.stats-text h2 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 700;
-}
-
-.stats-text p {
-    margin: 0.5rem 0 0;
-    opacity: 0.9;
-    font-size: 0.9rem;
-}
-
-.stats-bucket-badge {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 0.35rem 0.75rem;
-    border-radius: 0.5rem;
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: white;
-    letter-spacing: 0.02em;
-}
-
-.bucket-switcher-wrap {
-    margin-left: auto;
-}
-
-.bucket-switcher {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-    min-width: 230px;
-}
-
-.bucket-switcher-label {
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 0.76rem;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-}
-
-.bucket-switcher-control {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.18);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 0.65rem;
-    padding-left: 0.6rem;
-    transition: var(--transition-fast-ml);
-}
-
-.bucket-switcher-control:focus-within {
-    background: rgba(255, 255, 255, 0.26);
-    border-color: rgba(255, 255, 255, 0.9);
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
-}
-
-.bucket-switcher-icon {
-    color: rgba(255, 255, 255, 0.9);
-    margin-right: 0.5rem;
-}
-
-.bucket-switcher-select {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: transparent;
-    border: none;
-    color: #ffffff;
-    font-weight: 600;
-    padding: 0.5rem 2rem 0.5rem 0;
-    min-width: 180px;
-    box-shadow: none;
-}
-
-.bucket-switcher-select:focus {
-    box-shadow: none;
-    outline: none;
-}
-
-.bucket-switcher-select option {
-    color: var(--dark-color-ml);
-}
-
-.bucket-switcher-caret {
-    position: absolute;
-    right: 0.65rem;
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 0.8rem;
-    pointer-events: none;
-}
-
-.bucket-switcher-select:disabled {
-    opacity: 0.75;
-    cursor: not-allowed;
-}
-
-.bucket-switcher-status {
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 0.72rem;
-    letter-spacing: 0.02em;
-}
-
-.quick-filter-group {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    flex-wrap: wrap;
-}
-
-.quick-filter-btn {
-    background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 999px;
-    padding: 0.36rem 0.72rem;
-    font-size: 0.78rem;
-    line-height: 1;
-    min-height: 30px;
-}
-
-.quick-filter-btn:hover {
-    background: rgba(255, 255, 255, 0.16);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.5);
-    box-shadow: none;
-}
-
-.quick-filter-btn.active {
-    background: #ffffff;
-    color: var(--primary-color-ml);
-    border-color: #ffffff;
-    font-weight: 700;
-}
-
-/* Form styling - Modern approach */
-.form-control {
-    border: 1px solid var(--gray-light-color-ml);
-    border-radius: var(--border-radius-r-ml);
-    padding: 0.75rem 1rem;
-    font-size: 0.9rem;
-    transition: var(--transition-fast-ml);
-    font-family: var(--font-family);
-    background: white;
-}
-
-@media (max-width: 768px) {
-    .stats-content {
-        align-items: flex-start;
-        flex-wrap: wrap;
-    }
-
-    .bucket-switcher-wrap {
-        width: 100%;
-        margin-left: 0;
-    }
-
-    .bucket-switcher {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    .bucket-switcher-select {
-        width: 100%;
-        min-width: 0;
-    }
-
-    .quick-filter-group {
-        width: 100%;
-        justify-content: flex-start;
-        margin-top: 0.35rem;
-    }
-}
-
-.form-control:focus {
-    border-color: var(--primary-color-ml);
-    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
-    outline: none;
-}
-
-.form-control-lg {
-    padding: 1rem 1.25rem;
-    font-size: 1rem;
-    border-radius: var(--border-radius-lg-ml);
-}
-
-.form-label {
-    font-weight: 600;
-    color: var(--dark-color-ml);
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-    display: block;
-}
+/* ==========================================================================
+   MBKBucket File Manager - Original Theme Palette + Gentelella v4 Layout
+   ========================================================================== */
 
-.form-text {
-    color: var(--gray-color-ml);
-    font-size: 0.8rem;
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-/* Upload Drop Zone */
-.upload-drop-zone {
-    border: 2px dashed var(--gray-color-ml);
-    border-radius: var(--border-radius-lg-ml);
-    background-color: #f8fafc;
-    min-height: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    text-align: center;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.upload-drop-zone:hover,
-.upload-drop-zone.dragover {
-    border-color: var(--primary-color-ml);
-    background-color: #f0fdfa;
-}
-
-.drop-zone-content {
-    pointer-events: none;
-    padding: 2rem;
-}
-
-.drop-zone-content i {
-    font-size: 3rem;
-    color: var(--primary-color-ml);
-    margin-bottom: 1rem;
-    opacity: 0.8;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.upload-drop-zone:hover .drop-zone-content i {
-    opacity: 1;
-}
-
-.drop-text {
-    font-weight: 600;
-    font-size: 1.1rem;
-    color: var(--dark-color-ml);
-    margin-bottom: 0.5rem;
-}
-
-.drop-hint {
-    font-size: 0.85rem;
-    color: var(--gray-color-ml);
-}
-
-/* Button styling - Modern hover effects */
+:root {
+  --primary-color-ml: #0f766e;
+  --primary-light-color-ml: #d7f4ee;
+  --primary-dark-color-ml: #0b4f4a;
+  --secondary-color-ml: #1f8f84;
+  --dark-color-ml: #1f2a2a;
+  --light-color-ml: #f4f7f3;
+  --gray-color-ml: #667c79;
+  --gray-light-color-ml: #dce8e3;
+  --danger-color-ml: #dc2626;
+  --warning-color-ml: #d97706;
+  --success-color-ml: #16a34a;
+  --info-color-ml: #3b82f6;
+
+  --primary: var(--primary-color-ml);
+  --primary-lt: var(--primary-light-color-ml);
+  --primary-dk: var(--primary-dark-color-ml);
+  --primary-hover: #0d635c;
+
+  --body-bg: var(--light-color-ml);
+  --bg-surface: rgba(255, 255, 255, 0.82);
+  --bg-surface-secondary: rgba(244, 247, 243, 0.85);
+  --bg-surface-tertiary: #e2ede8;
+
+  --border-color: rgba(15, 118, 110, 0.16);
+  --border-color-light: rgba(15, 118, 110, 0.08);
+
+  --text: var(--dark-color-ml);
+  --text-secondary: #425855;
+  --text-muted: var(--gray-color-ml);
+  --text-disabled: #a0b2af;
+
+  --blue: #066fd1;
+  --azure: #1f8f84;
+  --green: #16a34a;
+  --yellow: #d97706;
+  --orange: #ea580c;
+  --red: #dc2626;
+  --purple: #7c3aed;
+  --cyan: #0f766e;
+
+  --green-lt: rgba(22, 163, 74, 0.12);
+  --red-lt: rgba(220, 38, 38, 0.1);
+  --yellow-lt: rgba(217, 119, 6, 0.12);
+  --blue-lt: rgba(6, 111, 209, 0.1);
+  --azure-lt: rgba(31, 143, 132, 0.12);
+  --purple-lt: rgba(124, 58, 237, 0.1);
+  --cyan-lt: rgba(15, 118, 110, 0.12);
+
+  --radius-sm: 6px;
+  --radius: 8px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  --shadow-md: 0 10px 15px -3px rgba(15, 118, 110, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 20px 25px -5px rgba(15, 118, 110, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-dropdown: 0 12px 30px rgba(15, 42, 42, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
+
+  --font: "IBM Plex Sans", "Segoe UI", sans-serif;
+  --font-headings: "Sora", "Segoe UI", sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+}
+
+/* Base Layout & Page Header */
+.page-wrapper {
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.2rem;
+  padding: 0.9rem 1.3rem;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.74);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
+}
+
+.page-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 1rem;
+}
+
+.page-pretitle {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--primary-color-ml);
+  margin-bottom: 2px;
+}
+
+.page-title {
+  font-family: var(--font-headings);
+  font-size: 1.45rem;
+  font-weight: 700;
+  color: var(--dark-color-ml);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.page-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+/* Button System */
 .btn {
-    background: var(--primary-color-ml);
-    color: white;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--border-radius-r-ml);
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-    font-family: var(--font-family);
-    position: relative;
-    overflow: hidden;
-}
-
-.btn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.btn:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.btn:hover {
-    background: var(--primary-dark-color-ml);
-    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
-}
-
-.btn:active {
-    transform: translateY(0);
-}
-
-.btn>* {
-    position: relative;
-    z-index: 1;
-}
-
-/* View toggle buttons */
-.view-toggle-btn {
-    min-width: 110px;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    transition: all 0.2s ease;
-}
-
-.view-toggle-btn.active {
-    background: white;
-    color: var(--primary-color-ml);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-    border-color: rgba(255, 255, 255, 0.4);
-    transform: translateY(-1px);
-}
-
-.view-toggle-btn:not(.active):hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-}
-
-.btn-lg {
-    padding: 1rem 2rem;
-    font-size: 1rem;
-    border-radius: var(--border-radius-lg-ml);
-}
-
-.btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
-}
-
-.btn-secondary {
-    background: var(--gray-color-ml);
-}
-
-.btn-secondary:hover {
-    background: var(--dark-color-ml);
-    box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 7px 15px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn svg {
+  flex-shrink: 0;
 }
 
 .btn-primary {
-    background: var(--primary-color-ml);
+  background: var(--primary-color-ml);
+  color: #ffffff;
+  border-color: var(--primary-color-ml);
+  box-shadow: 0 2px 4px rgba(15, 118, 110, 0.2);
 }
 
 .btn-primary:hover {
-    background: var(--primary-dark-color-ml);
-}
-
-.btn-outline-secondary {
-    background: transparent;
-    color: black;
-    border: 2px solid black;
+  background: var(--primary-dark-color-ml);
+  border-color: var(--primary-dark-color-ml);
+  color: #ffffff;
+  transform: translateY(-1px);
 }
 
-.btn-outline-secondary:hover {
-    background: var(--gray-color-ml);
-    color: white;
-    border-color: var(--gray-color-ml);
+.btn-outline {
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--dark-color-ml);
+  border-color: var(--border-color);
 }
 
-.btn-success {
-    background: var(--success-color-ml);
-}
-
-.btn-success:hover {
-    background: #059669;
-    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
+.btn-outline:hover {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
+  border-color: var(--primary-color-ml);
 }
 
 .btn-danger {
-    background: var(--danger-color-ml);
+  background: var(--danger-color-ml);
+  color: #ffffff;
+  border-color: var(--danger-color-ml);
 }
 
 .btn-danger:hover {
-    background: #b91c1c;
-    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
-}
-
-.w-100 {
-    width: 100%;
+  background: #b91c1c;
+  border-color: #b91c1c;
+  color: #ffffff;
 }
 
-/* Alert styling - Modern gradients */
-.alert {
-    padding: 1rem 1.5rem;
-    border-radius: var(--border-radius-lg-ml);
-    border: none;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.9rem;
-    box-shadow: var(--shadow-md-ml);
-    animation: slideInDown 0.3s ease;
+.btn-sm {
+  padding: 5px 11px;
+  font-size: 12px;
 }
 
-@keyframes slideInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.alert-success {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-    color: #065f46;
-    border-left: 4px solid var(--success-color-ml);
+/* File Manager Card Layout */
+.card.file-manager {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
+  overflow: hidden;
 }
 
-.alert-danger {
-    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-    color: #991b1b;
-    border-left: 4px solid var(--danger-color-ml);
+.fm-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  height: calc(100vh - 180px);
+  min-height: 580px;
+  max-height: 900px;
 }
 
-.alert i {
-    font-size: 1.25rem;
+/* Left Sidebar Tree */
+.fm-tree-wrap {
+  border-right: 1px solid var(--border-color);
+  background: rgba(244, 247, 243, 0.65);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 10px;
+  min-height: 0;
 }
 
-.btn-close {
-    background: none;
-    border: none;
-    font-size: 1.2rem;
-    cursor: pointer;
-    margin-left: auto;
-    opacity: 0.7;
-    transition: var(--transition-fast-ml);
+.fm-tree-header {
+  padding: 4px 10px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.btn-close:hover {
-    opacity: 1;
+.fm-tree-title {
+  font-family: var(--font-headings);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--primary-dark-color-ml);
 }
 
-/* Grid layout - Consistent spacing */
-.row {
-    display: flex;
-    margin: -0.75rem;
-    flex-wrap: wrap;
+.fm-tree {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
-.col-lg-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-    padding: 0.75rem;
+.fm-tree::-webkit-scrollbar {
+  width: 5px;
 }
-
-.g-4 {
-    margin: -1.25rem;
+.fm-tree::-webkit-scrollbar-thumb {
+  background: var(--gray-light-color-ml);
+  border-radius: 3px;
 }
 
-.g-4>* {
-    padding: 1.25rem;
+.tree-group {
+  margin-bottom: 3px;
 }
 
-.mb-4 {
-    margin-bottom: 1rem;
+.tree-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 11px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-family: var(--font);
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  user-select: none;
+  font-weight: 500;
 }
 
-.h-100 {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+.tree-link:hover {
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--primary-dark-color-ml);
 }
 
-/* Table styling - Modern clean design */
-.table-responsive {
-    overflow-x: auto;
-    border-radius: var(--border-radius-lg-ml);
-    box-shadow: none;
+.tree-link.active {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
+  font-weight: 600;
 }
 
-.table {
-    width: 100%;
-    margin-bottom: 0;
-    background: white;
-    border-collapse: separate;
-    border-spacing: 0;
+.tree-link svg {
+  color: var(--gray-color-ml);
+  flex-shrink: 0;
 }
 
-.table thead {
-    background: var(--light-color-ml);
-    color: var(--dark-color-ml);
-    position: sticky;
-    top: 0;
-    z-index: 10;
+.tree-link.active svg {
+  color: var(--primary-color-ml);
 }
 
-.table th,
-.table td {
-    padding: 0.5rem 1.25rem;
-    vertical-align: middle;
-    border-bottom: 1px solid var(--gray-light-color-ml);
-    font-size: 0.95rem;
+.tree-link span {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  font-size: 13px;
 }
 
-.table th {
-    font-weight: 700;
-    text-transform: none;
-    font-size: 0.85rem;
-    letter-spacing: 0.02em;
-    color: var(--text-muted-color-ml);
-    border-bottom: 2px solid var(--gray-light-color-ml);
+.tree-subs {
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+  padding-left: 6px;
+  border-left: 1px solid var(--border-color);
 }
 
-.table tbody tr {
-    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
-    position: relative;
-    background-color: white;
+.tree-sub {
+  padding-left: 12px;
 }
 
-.table tbody tr:hover {
-    background-color: var(--light-color-ml);
+.tree-badge {
+  font-size: 10.5px;
+  padding: 1px 7px;
+  border-radius: 99px;
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
+  font-weight: 600;
 }
 
-.file-row {
-    border-left: 3px solid transparent;
+/* Sidebar Storage & Bucket Section */
+.fm-storage {
+  margin-top: auto;
+  padding: 12px;
+  border-top: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: var(--radius);
+  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.05);
 }
 
-.file-row:hover {
-    border-left-color: var(--primary-color-ml);
-    background-color: #f0fdfa;
-    /* Very light teal */
-    z-index: 1;
+.fm-storage-label {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--primary-dark-color-ml);
+  margin-bottom: 6px;
 }
 
-.folder-row {
-    border-left: 3px solid transparent;
-    cursor: pointer;
+.bucket-switcher-wrap {
+  position: relative;
 }
 
-.folder-row:hover {
-    border-left-color: #f59e0b;
-    background-color: #fffbeb;
-    /* Very light amber */
-    z-index: 1;
+.bucket-switcher-control {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
-.folder-row .file-icon {
-    background: linear-gradient(160deg, #fff5db 0%, #ffe7b2 100%);
-    color: #b45309;
-    border: 1px solid rgba(180, 83, 9, 0.2);
-    box-shadow: 0 3px 10px rgba(180, 83, 9, 0.14);
+.bucket-switcher-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--primary-color-ml);
+  pointer-events: none;
 }
 
-.folder-row:hover .file-icon {
-    box-shadow: 0 8px 18px rgba(180, 83, 9, 0.24);
+.bucket-switcher-select {
+  width: 100%;
+  padding: 6px 10px 6px 30px;
+  font-family: var(--font);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--dark-color-ml);
+  background: var(--light-color-ml);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  outline: none;
+  cursor: pointer;
+  appearance: auto;
+  transition: border-color 0.15s ease;
 }
 
-.breadcrumb-nav {
-    padding: 0.5rem 1.5rem;
-    background: linear-gradient(135deg, var(--light-color-ml) 0%, #f9fafb 100%);
-    border-bottom: 1px solid var(--gray-light-color-ml);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
+.bucket-switcher-select:focus {
+  border-color: var(--primary-color-ml);
 }
 
-.breadcrumb-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-    min-width: 0;
+.bucket-switcher-status {
+  font-size: 11px;
+  color: var(--primary-color-ml);
+  margin-top: 4px;
+  display: block;
 }
 
-.breadcrumb-nav .breadcrumb-item::before {
-    display: none !important;
-    content: none !important;
+.storage-bar {
+  height: 5px;
+  background: var(--gray-light-color-ml);
+  border-radius: 3px;
+  overflow: hidden;
+  margin: 8px 0 6px;
 }
 
-.breadcrumb-link {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    color: var(--primary-color-ml);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-decoration: none;
-    font-weight: 600;
+.fm-storage-meta {
+  font-size: 11.5px;
+  color: var(--gray-color-ml);
+  font-weight: 600;
 }
 
-.breadcrumb-link:hover {
-    color: var(--primary-dark-color-ml);
-    text-decoration: underline;
+.fm-storage-subinfo {
+  font-size: 10.5px;
+  color: var(--gray-color-ml);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.breadcrumb-separator {
-    color: var(--gray-color-ml);
-    margin: 0 0.25rem;
+/* Main Content Area */
+.fm-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.9);
 }
 
-.breadcrumb-current {
-    color: var(--dark-color-ml);
-    font-weight: 600;
-    min-width: 0;
-    overflow-wrap: anywhere;
+/* Toolbar */
+.fm-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.7);
+  flex-wrap: wrap;
 }
 
-.file-icon {
-    width: 42px;
-    height: 42px;
-    background: linear-gradient(160deg, #ecfdf8 0%, #d9f7ef 100%);
-    border: 1px solid rgba(13, 148, 136, 0.18);
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.9rem;
-    color: #0f766e;
-    font-size: 1.15rem;
-    flex-shrink: 0;
-    box-shadow: 0 3px 10px rgba(13, 148, 136, 0.12);
-    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+.fm-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  min-height: 32px;
 }
 
-.file-icon i {
-    transition: transform 0.22s ease;
+.bc-link {
+  background: transparent;
+  border: none;
+  font-family: var(--font);
+  font-size: 13px;
+  color: var(--gray-color-ml);
+  cursor: pointer;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  transition: all 0.12s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
 }
 
-.file-row:hover .file-icon {
-    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.2);
+.bc-link:hover {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
 }
 
-.file-info {
-    flex: 1;
-    min-width: 0;
+.bc-link.current {
+  color: var(--dark-color-ml);
+  font-weight: 700;
+  cursor: default;
 }
 
-.file-name {
-    font-weight: 600;
-    color: var(--dark-color-ml);
-    margin-bottom: 0;
-    font-size: 0.9rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: help;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+.bc-link.current:hover {
+  background: transparent;
 }
 
-.folder-path {
-    color: var(--gray-color-ml);
-    font-size: 0.85rem;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    max-width: 300px;
-    cursor: help;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+.fm-breadcrumb .sep {
+  color: var(--gray-color-ml);
+  font-size: 13px;
+  user-select: none;
 }
 
-.folder-path.clickable {
-    color: var(--primary-color-ml);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-decoration: none;
+.fm-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
 }
 
-.folder-path.clickable:hover {
-    color: var(--primary-dark-color-ml);
-    text-decoration: underline;
+/* Quick Filters */
+.quick-filter-group {
+  display: inline-flex;
+  background: rgba(15, 118, 110, 0.06);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 2px;
 }
 
-.file-size {
-    background: linear-gradient(135deg, var(--light-color-ml) 0%, #f9fafb 100%);
-    color: var(--dark-color-ml);
-    padding: 0.35rem 0.85rem;
-    border-radius: var(--border-radius-r-ml);
-    font-size: 0.8rem;
-    font-weight: 600;
-    border: 1px solid var(--gray-light-color-ml);
-    white-space: nowrap;
+.quick-filter-btn {
+  background: transparent;
+  border: none;
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  padding: 4px 11px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.12s ease;
 }
 
-.btn-group {
-    display: flex;
-    gap: 0.35rem;
+.quick-filter-btn:hover {
+  color: var(--primary-dark-color-ml);
 }
 
-.btn-group .btn {
-    min-width: 42px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.65rem 0.85rem;
+.quick-filter-btn.active {
+  background: #ffffff;
+  color: var(--primary-color-ml);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Search Box */
+.search-box {
+  position: relative;
+  width: 210px;
+  display: flex;
+  align-items: center;
+}
+
+.search-box .s-icon {
+  position: absolute;
+  left: 9px;
+  width: 14px;
+  height: 14px;
+  color: var(--gray-color-ml);
+  pointer-events: none;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 6px 26px 6px 28px;
+  font-family: var(--font);
+  font-size: 12.5px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--dark-color-ml);
+  outline: none;
+  transition: all 0.15s ease;
 }
 
-.btn-group .btn i {
-    font-size: 0.95rem;
+.search-box input:focus {
+  border-color: var(--primary-color-ml);
+  background: #ffffff;
+  box-shadow: 0 0 0 3px var(--primary-light-color-ml);
+}
+
+.search-clear-btn {
+  position: absolute;
+  right: 6px;
+  background: transparent;
+  border: none;
+  color: var(--gray-color-ml);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 2px 4px;
+}
+
+/* View Switcher */
+.fm-view-toggle {
+  display: inline-flex;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.view-btn {
+  width: 32px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--gray-color-ml);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.12s ease;
 }
 
-/* File type specific styling - Enhanced gradients */
-.file-icon.image-file {
-    background: linear-gradient(160deg, #fff6e3 0%, #ffe7bf 100%);
-    color: #b45309;
-    border-color: rgba(180, 83, 9, 0.22);
-    box-shadow: 0 3px 10px rgba(180, 83, 9, 0.16);
+.view-btn:hover {
+  background: var(--light-color-ml);
+  color: var(--dark-color-ml);
 }
 
-.file-icon.video-file {
-    background: linear-gradient(160deg, #ffe9e7 0%, #ffd1cc 100%);
-    color: #b91c1c;
-    border-color: rgba(185, 28, 28, 0.22);
-    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.16);
+.view-btn.active {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
+}
+
+/* File Grid Wrap & Items */
+.fm-grid-wrap {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 16px;
+  position: relative;
+}
+
+.fm-grid-wrap::-webkit-scrollbar {
+  width: 6px;
+}
+.fm-grid-wrap::-webkit-scrollbar-thumb {
+  background: var(--gray-light-color-ml);
+  border-radius: 3px;
+}
+
+/* Grid View */
+.fm-grid.view-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  grid-auto-rows: max-content;
+  align-content: start;
+  gap: 14px;
+}
+
+.fm-item {
+  position: relative;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(15, 118, 110, 0.15);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: var(--font);
+  text-align: left;
+  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  user-select: none;
+}
+
+.fm-item:hover {
+  border-color: var(--primary-color-ml);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.1);
+}
+
+.fm-item.is-selected {
+  border-color: var(--primary-color-ml);
+  background: var(--primary-light-color-ml);
 }
 
-.file-icon.audio-file {
-    background: linear-gradient(160deg, #e6efff 0%, #d6e5ff 100%);
-    color: #1d4ed8;
-    border-color: rgba(29, 78, 216, 0.22);
-    box-shadow: 0 3px 10px rgba(29, 78, 216, 0.16);
+/* Item styling in Grid View */
+.fm-grid.view-grid .fm-item {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.fm-grid.view-grid .fm-item-icon {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--light-color-ml);
+  overflow: hidden;
+  position: relative;
+}
+
+.fm-item-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.fm-item-icon .ext {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.fm-item-icon .folder-svg {
+  width: 42px;
+  height: 42px;
 }
 
-.file-icon.document-file {
-    background: linear-gradient(160deg, #e6faf9 0%, #c8f0ed 100%);
-    color: #0f766e;
-    border-color: rgba(15, 118, 110, 0.22);
-    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.16);
-}
+.fm-grid.view-grid .fm-item-details {
+  width: 100%;
+  min-width: 0;
+}
 
-.file-icon.code-file {
-    background: linear-gradient(160deg, #e9fbe9 0%, #d5f4d5 100%);
-    color: #166534;
-    border-color: rgba(22, 101, 52, 0.22);
-    box-shadow: 0 3px 10px rgba(22, 101, 52, 0.16);
+.fm-item-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dark-color-ml);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.fm-item-meta {
+  font-size: 11.5px;
+  color: var(--gray-color-ml);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Star & Context Menu Buttons */
+.fm-star {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 50%;
+  color: var(--text-disabled);
+  opacity: 0;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.12s ease, color 0.12s ease;
+  z-index: 2;
+  border: none;
 }
 
-.file-row:hover .file-icon.image-file {
-    box-shadow: 0 8px 18px rgba(180, 83, 9, 0.24);
+.fm-item:hover .fm-star,
+.fm-item.starred .fm-star {
+  opacity: 1;
+}
+
+.fm-star.on {
+  color: var(--yellow);
+  opacity: 1;
 }
-
-.file-row:hover .file-icon.video-file {
-    box-shadow: 0 8px 18px rgba(185, 28, 28, 0.24);
+
+.fm-star:hover {
+  color: var(--yellow);
+  transform: scale(1.1);
+}
+
+.fm-item-menu {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--gray-color-ml);
+  opacity: 0;
+  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
+  z-index: 2;
 }
 
-.file-row:hover .file-icon.audio-file {
-    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.24);
+.fm-item:hover .fm-item-menu {
+  opacity: 1;
 }
 
-.file-row:hover .file-icon.document-file {
-    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.24);
+.fm-item-menu:hover {
+  background: #ffffff;
+  color: var(--primary-dark-color-ml);
+  box-shadow: var(--shadow-sm);
 }
 
-.file-row:hover .file-icon.code-file {
-    box-shadow: 0 8px 18px rgba(22, 101, 52, 0.24);
+/* List View */
+.fm-grid.view-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-/* Empty state - Modern design */
-.empty-state {
-    text-align: center;
-    padding: 4rem 2rem;
-    color: var(--gray-color-ml);
+.fm-grid.view-list .fm-item {
+  padding: 8px 14px;
+  display: grid;
+  grid-template-columns: 20px 32px 1fr 110px 140px 32px 32px;
+  gap: 12px;
+  align-items: center;
+  border-radius: var(--radius);
+}
+
+.fm-grid.view-list .fm-item-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--light-color-ml);
+}
+
+.fm-grid.view-list .fm-item-icon .ext {
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.fm-grid.view-list .fm-item-icon .folder-svg {
+  width: 22px;
+  height: 22px;
+}
+
+.fm-grid.view-list .fm-star,
+.fm-grid.view-list .fm-item-menu {
+  position: static;
+  opacity: 1;
+  background: transparent;
 }
 
-.empty-state i {
-    font-size: 1.5rem;
-    margin-bottom: 1.5rem;
-    opacity: 0.3;
-    background: linear-gradient(135deg, var(--primary-color-ml), var(--primary-dark-color-ml));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+.fm-grid.view-list .fm-item-meta {
+  font-size: 12px;
+  margin-top: 0;
 }
 
-.fa-add:before,
-.fa-plus:before {
-    color: #fff !important;
-    align-items: center;
+/* Header row for list view */
+.fm-list-header {
+  display: grid;
+  grid-template-columns: 20px 32px 1fr 110px 140px 32px 32px;
+  gap: 12px;
+  align-items: center;
+  padding: 6px 14px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--primary-dark-color-ml);
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 4px;
 }
 
-.empty-state h4 {
-    color: var(--dark-color-ml);
-    margin-bottom: 0.75rem;
-    font-weight: 700;
-    font-size: 1.5rem;
+/* Empty State */
+.fm-empty {
+  padding: 80px 20px;
+  text-align: center;
+  color: var(--gray-color-ml);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.fm-empty[hidden],
+[hidden] {
+  display: none !important;
+}
+
+.fm-empty svg {
+  color: var(--text-disabled);
+  margin-bottom: 12px;
 }
 
-.empty-state p {
-    margin-bottom: 2rem;
-    max-width: 400px;
-    margin-left: auto;
-    margin-right: auto;
-    line-height: 1.6;
-    color: var(--gray-color-ml);
+.fm-empty .empty-title {
+  font-family: var(--font-headings);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--dark-color-ml);
+  margin-bottom: 4px;
 }
 
-.empty-state-illustration {
-    margin-bottom: 1.5rem;
-    position: relative;
-    display: inline-block;
+.fm-empty .empty-desc {
+  font-size: 13px;
+  max-width: 360px;
 }
 
-.empty-state-search-icon {
-    font-size: 2rem;
-    color: var(--primary-color-ml);
-    position: absolute;
-    bottom: -5px;
-    right: -10px;
-    background: white;
-    border-radius: 50%;
-    padding: 5px;
+/* Skeletons */
+.fm-skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 14px;
+  width: 100%;
 }
 
-.empty-state-description {
-    max-width: 400px;
-    margin: 0 auto 1.5rem;
-    color: var(--text-muted-color-ml);
+.fm-skeleton-card {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--border-color-light);
+  border-radius: var(--radius-lg);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.empty-state-actions {
-    display: flex;
-    gap: 0.75rem;
-    justify-content: center;
-    flex-wrap: wrap;
+.fm-skeleton-icon {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border-radius: var(--radius);
+  background: linear-gradient(90deg, #eaf2ee 25%, #dce8e3 50%, #eaf2ee 75%);
+  background-size: 200% 100%;
+  animation: fm-shimmer 1.5s infinite;
 }
 
-.file-path-display {
-    font-size: 0.75rem;
-    color: var(--gray-color-ml);
-    margin-bottom: 2px;
+.fm-skeleton-line {
+  height: 12px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #eaf2ee 25%, #dce8e3 50%, #eaf2ee 75%);
+  background-size: 200% 100%;
+  animation: fm-shimmer 1.5s infinite;
 }
 
-.sort-icon {
-    margin-left: 0.5rem;
-}
+.fm-skeleton-line.w-75 { width: 75%; }
+.fm-skeleton-line.w-50 { width: 50%; }
 
-.sort-icon-inactive {
-    color: var(--gray-color-ml);
-    opacity: 0.3;
-    font-size: 0.8rem;
+@keyframes fm-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
 }
 
-.sort-icon-active {
-    color: var(--primary-color-ml);
-    font-size: 0.9rem;
+/* Context Menu */
+.fm-context-menu {
+  position: fixed;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-dropdown);
+  padding: 6px;
+  min-width: 175px;
+  animation: fm-menu-pop 0.12s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.bulk-actions-bar {
-    display: none;
-    padding: 0.5rem;
-    border-bottom: 1px solid var(--gray-light-color-ml);
-    background: var(--light-color-ml);
+@keyframes fm-menu-pop {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
 }
 
-.virtualized-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.75rem 1rem;
-    background: #f8fafc;
-    border-top: 1px solid var(--gray-light-color-ml);
-    color: var(--gray-color-ml);
-    font-size: 0.85rem;
+.fm-context-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 11px;
+  border: none;
+  background: transparent;
+  font-family: var(--font);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--dark-color-ml);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s ease, color 0.1s ease;
 }
 
-.virtualized-actions {
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
+.fm-context-item:hover {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
 }
 
-.toast-close-btn {
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-    opacity: 0.8;
-    font-size: 1.2rem;
-}
-
-.upload-item-meta-row {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    min-width: 0;
-    width: 100%;
-    margin-bottom: 5px;
+.fm-context-item.danger:hover {
+  background: var(--red-lt);
+  color: var(--danger-color-ml);
 }
 
-.upload-item-size-label {
-    white-space: nowrap;
-    color: var(--text-muted-color-ml);
-    font-size: 0.875rem;
-    margin-left: auto;
+.fm-context-divider {
+  height: 1px;
+  background: var(--border-color-light);
+  margin: 4px 0;
 }
 
-.upload-item-status-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-/* Modal styling - Modern design */
+/* Modals */
 .modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: rgba(15, 42, 42, 0.45);
+  backdrop-filter: blur(6px);
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
 }
 
 .modal.show {
-    display: flex;
+  display: flex;
 }
 
 .modal-dialog {
-    max-width: 500px;
-    width: 90%;
-    animation: slideUp 0.3s ease;
-}
-
-/* Preview modal sizing variants */
-.modal-dialog.preview-compact {
-    max-width: 700px;
-}
-
-.modal-dialog.preview-large {
-    max-width: 1100px;
-}
-
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.modal-content {
-    background: white;
-    border-radius: var(--border-radius-lg-ml);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05);
-    overflow: hidden;
-}
-
-/* Preview-specific styles */
-.preview-header-controls {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-#previewModal .preview-content {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 120px;
-}
-
-#previewModal img.preview-img {
-    max-width: 100%;
-    max-height: 75vh;
-    display: block;
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  margin: auto;
+  animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-#previewModal video.preview-video,
-#previewModal audio.preview-audio {
-    width: 100%;
-    max-height: 75vh;
-    display: block;
+.modal-dialog.modal-lg {
+  max-width: 680px;
 }
 
-#previewModal iframe.preview-iframe {
-    width: 100%;
-    height: 75vh;
-    border: none;
+.modal-dialog.preview-modal-dialog {
+  max-width: 900px;
 }
 
-#previewModal pre {
-    text-align: left;
-    max-height: 70vh;
-    overflow: auto;
-    white-space: pre-wrap;
-    padding: 1rem;
-    border-radius: 6px;
-    background: #f8fafc;
-    color: var(--dark-color-ml);
+.preview-modal-dialog.is-fullscreen {
+  max-width: 98vw;
+  height: 96vh;
 }
 
-.preview-footer {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: flex-end;
+.preview-modal-dialog.is-fullscreen .modal-content {
+  height: 100%;
 }
 
-.preview-actions {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
+.preview-modal-dialog.is-fullscreen .preview-content {
+  max-height: calc(96vh - 120px);
 }
 
-/* Fullscreen state (native fullscreen) */
-:fullscreen .modal-dialog,
-:-webkit-full-screen .modal-dialog {
-    width: 100vw;
-    height: 100vh;
+@keyframes modal-enter {
+  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-:fullscreen .preview-content,
-:-webkit-full-screen .preview-content {
-    height: 100vh;
-}
-
-.btn-close[aria-label] {
-    font-weight: 700;
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 20px 40px rgba(15, 42, 42, 0.16);
+  outline: 0;
 }
 
-
 .modal-header {
-    background: linear-gradient(135deg, var(--danger-color-ml) 0%, #b91c1c 100%);
-    color: white;
-    padding: 0.5rem;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .modal-title {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex: 1;
-    min-width: 0;
-    line-height: 1.2;
-}
-
-#previewModal .modal-title i {
-    flex-shrink: 0;
-}
-
-/* Allow preview filename to wrap and break long words */
-#previewModal .modal-title #previewFileName {
-    display: inline-block;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  font-family: var(--font-headings);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--primary-dark-color-ml);
+  margin: 0;
 }
 
-#previewModal .preview-header-controls {
-    flex-shrink: 0;
+.modal-title-icon {
+  color: var(--primary-color-ml);
 }
 
-.upload-item-meta-row {
-    min-width: 0;
-}
-
-.upload-file-icon {
-    width: 36px;
-    height: 36px;
-    margin-right: 0.6rem;
-    border-radius: 10px;
-    font-size: 1rem;
-    flex-shrink: 0;
-}
-
-.upload-item-name {
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
+.btn-close {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--gray-color-ml);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  transition: all 0.12s ease;
 }
 
-@media (max-width: 768px) {
-    #previewModal .modal-title {
-        font-size: 1.05rem;
-    }
+.btn-close:hover {
+  color: var(--dark-color-ml);
+  background: var(--light-color-ml);
 }
 
 .modal-body {
-    padding: 0.5rem;
-    text-align: center;
-}
-
-.modal-body i {
-    color: var(--danger-color-ml);
-    margin-bottom: 1.25rem;
-}
-
-.modal-body h6 {
-    color: var(--dark-color-ml);
-    margin-bottom: 1rem;
-    font-weight: 700;
-    font-size: 1.1rem;
-}
-
-.modal-body p {
-    margin-bottom: 0;
+  position: relative;
+  flex: 1 1 auto;
+  padding: 18px;
 }
 
 .modal-footer {
-    padding: 0.5rem;
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    border-top: 1px solid var(--gray-light-color-ml);
-    background: var(--light-color-ml);
-}
-
-/* Pagination - Modern quick-link style */
-.pagination {
-    display: flex;
-    justify-content: center;
-    gap: 0.5rem;
-    margin: 0;
-    padding: 0;
-}
-
-.page-item {
-    list-style: none;
-}
-
-.page-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 42px;
-    height: 42px;
-    padding: 0.5rem 1rem;
-    color: var(--dark-color-ml);
-    background: white;
-    border: 1px solid var(--gray-light-color-ml);
-    border-radius: var(--border-radius-md-ml);
-    text-decoration: none;
-    transition: all var(--transition-base-ml);
-    font-size: 0.95rem;
-    font-weight: 600;
-    position: relative;
-    overflow: hidden;
-}
-
-.page-link::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.1), transparent);
-    transition: left 0.5s;
-}
-
-.page-link:hover::before {
-    left: 100%;
-}
-
-.page-link:hover {
-    background: var(--primary-color-ml);
-    color: white;
-    border-color: var(--primary-color-ml);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
-}
-
-.page-item.active .page-link {
-    background: linear-gradient(135deg, var(--primary-color-ml), var(--primary-dark-color-ml));
-    color: white;
-    border-color: var(--primary-color-ml);
-    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
-}
-
-.page-item.disabled .page-link {
-    color: var(--text-muted-color-ml);
-    background: var(--light-color-ml);
-    border-color: var(--gray-light-color-ml);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.page-item.disabled .page-link:hover {
-    transform: none;
-    box-shadow: none;
-}
-
-/* Upload Progress Styling - Enhanced shimmer effect */
-.progress-container {
-    width: 100%;
-    height: 10px;
-    background: var(--gray-light-color-ml);
-    border-radius: var(--border-radius-r-ml);
-    overflow: hidden;
-    position: relative;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-@media (max-width: 768px) {
-    .virtualized-info {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--success-color-ml) 100%);
-    border-radius: var(--border-radius-r-ml);
-    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.3);
-}
-
-.progress-bar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: linear-gradient(90deg,
-            transparent,
-            rgba(255, 255, 255, 0.2),
-            transparent);
-    animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-    0% {
-        transform: translateX(-100%);
-    }
-
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-.upload-label {
-    font-weight: 600;
-    color: var(--dark-color-ml);
-    font-size: 0.9rem;
-}
-
-.upload-percent {
-    font-weight: 700;
-    color: var(--primary-color-ml);
-    font-size: 0.9rem;
-}
-
-.upload-details {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/* Drag & Drop and upload queue styles */
-.upload-dropzone {
-    border: 2px dashed var(--gray-light-color-ml);
-    border-radius: var(--border-radius-r-ml);
-    padding: 1rem;
-    background: var(--light-color-ml);
-    transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.upload-dropzone.dragover {
-    background: linear-gradient(90deg, rgba(13, 148, 136, 0.04), transparent);
-    border-color: var(--primary-color-ml);
-}
-
-.upload-queue .upload-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px dashed var(--gray-light-color-ml);
-}
-
-.upload-queue .upload-item .meta {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-    min-width: 0;
-}
-
-.upload-queue .upload-item .meta .name {
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 240px;
-}
-
-.upload-queue .upload-item .controls {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-/* Skeleton loaders - tuned grid to equalize column spacing visually */
-.skeleton-row {
-    display: grid;
-    grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 240px);
-    /* icon + 3 columns with balanced min widths */
-    gap: 1rem;
-    padding: 1rem;
-    align-items: center;
-    justify-items: stretch;
-    /* make cells span their tracks evenly */
-}
-
-/* make skeleton boxes flexible and responsive */
-.skeleton-box {
-    background: linear-gradient(90deg, #f5f7fa, #eef2f6);
-    border-radius: 6px;
-    height: 16px;
-    width: 100%;
-    min-width: 0;
-    justify-self: stretch;
-}
-
-/* semantic size hints (max widths) and alignment to ensure visual balance */
-.skeleton-box.s-40 {
-    max-width: 48px;
-    justify-self: start;
-}
-
-.skeleton-box.s-80 {
-    max-width: 160px;
-    justify-self: center;
-}
-
-.skeleton-box.s-200 {
-    max-width: 220px;
-    justify-self: end;
-}
-
-.skeleton-row .file-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 992px) {
-    .skeleton-row {
-        grid-template-columns: 40px minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 200px);
-        gap: 0.9rem;
-    }
-
-    .skeleton-box.s-200 {
-        max-width: 180px;
-    }
-}
-
-@media (max-width: 768px) {
-    .skeleton-row {
-        grid-template-columns: 40px 1fr 1fr 1fr;
-        gap: 0.75rem;
-    }
-
-    .skeleton-box.s-80 {
-        justify-self: start;
-    }
-
-    .skeleton-box.s-200 {
-        max-width: 140px;
-        justify-self: end;
-    }
-}
-
-
-
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none !important;
-    pointer-events: none;
-    box-shadow: none !important;
-    background: var(--gray-light-color-ml) !important;
-    color: var(--text-muted-color-ml) !important;
-    border-color: var(--gray-light-color-ml) !important;
-}
-
-.btn.uploading {
-    background: linear-gradient(135deg, var(--warning-color-ml), #d97706) !important;
-    pointer-events: none;
-    position: relative;
-    overflow: hidden;
-}
-
-.btn.uploading::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    animation: slideRight 1.5s infinite;
-}
-
-@keyframes slideRight {
-    0% {
-        left: -100%;
-    }
-
-    100% {
-        left: 200%;
-    }
-}
-
-.btn.uploading:hover {
-    background: linear-gradient(135deg, var(--warning-color-ml), #d97706) !important;
-    transform: none;
-}
-
-/* v2 Visual System */
-:root {
-    --v2-accent: #0b6b64;
-    --v2-accent-strong: #084f4a;
-    --v2-highlight: #0ea5a0;
-    --v2-surface: #f4fcf9;
-    --v2-border: rgba(11, 107, 100, 0.28);
-}
-
-.content-area {
-    animation: v2FadeIn 0.45s ease;
-}
-
-.dashboard-card {
-    background: linear-gradient(180deg, #f7fffc 0%, #eefaf6 100%);
-    border: 1px solid rgba(11, 107, 100, 0.2);
-    box-shadow: 0 16px 30px rgba(7, 54, 51, 0.12);
-}
-
-.dashboard-card:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 18px 36px rgba(7, 54, 51, 0.2);
-}
-
-.card-header {
-    background: linear-gradient(122deg, #07544e 0%, #0b6b64 52%, #0f7e75 100%);
-}
-
-.card-title {
-    letter-spacing: 0.01em;
-}
-
-.card-icon {
-    background: rgba(255, 255, 255, 0.23);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-}
-
-.file-stats {
-    background:
-        linear-gradient(132deg, #064640 0%, #0a5b54 46%, #0d6b63 100%);
-}
-
-.bucket-switcher-control {
-    background: rgba(255, 255, 255, 0.24);
-}
-
-.bucket-switcher-select {
-    font-size: 0.85rem;
-}
-
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--border-color);
+  background: var(--light-color-ml);
+  border-bottom-left-radius: var(--radius-xl);
+  border-bottom-right-radius: var(--radius-xl);
+}
+
+/* Upload Dropzone & Queue */
 .upload-drop-zone {
-    background:
-        linear-gradient(145deg, rgba(219, 247, 241, 0.9), rgba(226, 244, 241, 0.82));
-    border-color: rgba(11, 107, 100, 0.55);
+  border: 2px dashed var(--primary-color-ml);
+  border-radius: var(--radius-lg);
+  padding: 32px 20px;
+  text-align: center;
+  background: var(--primary-light-color-ml);
+  cursor: pointer;
+  transition: all 0.15s ease;
 }
 
 .upload-drop-zone:hover,
 .upload-drop-zone.dragover {
-    border-color: var(--v2-highlight);
-    background:
-        linear-gradient(145deg, rgba(201, 244, 236, 0.95), rgba(224, 249, 242, 0.86));
-}
-
-.btn {
-    border-radius: 0.65rem;
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-strong));
-}
-
-.btn-primary:hover {
-    background: linear-gradient(135deg, #064640, #073a36);
-}
-
-.btn-outline-secondary {
-    border-color: #9ca3af;
-    color: #1f2937;
-}
-
-.table thead {
-    background: linear-gradient(180deg, rgba(225, 242, 238, 0.95), rgba(210, 236, 230, 0.9));
-}
-
-.table th {
-    color: #23403d;
-}
-
-.file-row:hover {
-    background-color: #ddf2ed;
-}
-
-.folder-row:hover {
-    background-color: #d7efe9;
-}
-
-.search-inline .form-control {
-    border-color: rgba(15, 118, 110, 0.3);
-}
-
-.quick-filter-btn.active {
-    color: #ffffff;
-    background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-strong));
-    border-color: var(--v2-accent-strong);
-}
-
-.reveal-item {
-    opacity: 0;
-    transform: translateY(14px) scale(0.99);
-    animation: v2Rise 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  border-color: var(--primary-dark-color-ml);
+  background: #c5efe7;
 }
 
-.reveal-delay-1 {
-    animation-delay: 0.05s;
+.drop-icon {
+  color: var(--primary-color-ml);
+  margin-bottom: 10px;
 }
 
-.reveal-delay-2 {
-    animation-delay: 0.12s;
+.drop-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--dark-color-ml);
 }
 
-.reveal-delay-3 {
-    animation-delay: 0.2s;
+.drop-browse-link {
+  color: var(--primary-color-ml);
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-.reveal-delay-4 {
-    animation-delay: 0.28s;
+.drop-hint {
+  font-size: 12px;
+  color: var(--gray-color-ml);
+  margin-top: 4px;
 }
 
-@keyframes v2FadeIn {
-    from {
-        opacity: 0.4;
-    }
-
-    to {
-        opacity: 1;
-    }
+.upload-queue {
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-@keyframes v2Rise {
-    from {
-        opacity: 0;
-        transform: translateY(14px) scale(0.99);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+.upload-queue-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--light-color-ml);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  font-size: 12.5px;
 }
 
-@media (max-width: 768px) {
-    .card-header {
-        padding: 0.8rem;
-    }
+.upload-queue-meta {
+  color: var(--gray-color-ml);
+  font-size: 11.5px;
 }
 
-.upload-success {
-    color: var(--success-color-ml);
-    font-weight: 600;
+.progress-bar-wrap {
+  height: 6px;
+  background: var(--gray-light-color-ml);
+  border-radius: 3px;
+  overflow: hidden;
 }
 
-.upload-error {
-    color: var(--danger-color-ml);
-    font-weight: 600;
+.progress-bar-inner {
+  height: 100%;
+  background: var(--primary-color-ml);
+  transition: width 0.2s ease;
 }
 
-.badge {
-    display: inline-block;
-    padding: 0.2rem 0.5rem;
-    border-radius: 0.35rem;
-    font-size: 0.8rem;
-    font-weight: 700;
-    vertical-align: middle;
+.upload-percent {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary-color-ml);
 }
 
-.bg-info {
-    background: var(--info-color-ml);
-    color: white;
+/* Modal Form Inputs */
+.form-label {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--dark-color-ml);
+  margin-bottom: 6px;
+  display: block;
 }
 
-/* Responsive design */
-/* Responsive Design - Enhanced breakpoints */
-@media (max-width: 992px) {
-    .col-lg-6 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-
-    .stats-content {
-        gap: 0.75rem;
-    }
-
-    .stats-icon {
-        width: 50px;
-        height: 50px;
-        font-size: 1.3rem;
-    }
-
-    .stats-text h2 {
-        font-size: 1.3rem;
-    }
-
-    .stats-text p {
-        font-size: 0.85rem;
-    }
-
-    .filter-form {
-        flex-direction: column;
-    }
-
-    .filter-form .form-control {
-        width: 100%;
-    }
-}
-
-@media (max-width: 768px) {
-    .card-body {
-        padding: 1rem;
-    }
-
-    .stats-content {
-        gap: 0.5rem;
-    }
-
-    .stats-icon {
-        width: 40px;
-        height: 40px;
-        font-size: 1.2rem;
-    }
-
-    .stats-text h2 {
-        font-size: 1.2rem;
-    }
-
-    .stats-text p {
-        font-size: 0.8rem;
-        margin: 0.25rem 0 0;
-    }
-
-    .btn-group {
-        flex-direction: row;
-        width: 100%;
-        gap: 0.35rem;
-        justify-content: flex-start;
-    }
-
-    .btn-group .btn {
-        border-radius: var(--border-radius-r-ml) !important;
-        width: auto;
-        min-width: 40px;
-        padding: 0.5rem 0.65rem;
-    }
-
-    /* Mobile table improvements */
-    .table thead {
-        display: none;
-    }
-
-    .table tbody tr {
-        display: block;
-        border: 1px solid var(--gray-light-color-ml);
-        background: white;
-    }
-
-    .table tbody tr td {
-        display: block;
-        padding: 0;
-        border: none;
-    }
-
-    /* File row mobile layout — improved card-like layout for touch */
-    /* Hide the leading checkbox column to reduce clutter on small screens */
-    .file-row td:first-child {
-        display: none !important;
-    }
-
-    /* Main row: file icon + name + actions */
-    .file-row td:nth-child(2) {
-        padding: 0.5rem !important;
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        background: transparent;
-    }
-
-    .file-row td:nth-child(2) .file-icon {
-        width: 40px;
-        height: 40px;
-        font-size: 1.25rem;
-        border-radius: 10px;
-    }
-
-    .file-row td:nth-child(2) .file-info {
-        display: block;
-        min-width: 0;
-    }
-
-    .file-row td:nth-child(2) .file-name {
-        font-weight: 700;
-        font-size: 1rem;
-        color: var(--dark-color-ml);
-        white-space: normal;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: calc(100% - 120px);
-    }
-
-    /* Actions column — ensure buttons are touch friendly */
-    .file-row td:nth-child(6),
-    .file-row td:nth-child(5) {
-        padding: 0.75rem 1rem !important;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 0.5rem;
-    }
-
-    .file-row .btn-group {
-        justify-content: flex-end;
-    }
-
-    .file-row .btn-group .btn {
-        min-width: 44px;
-        height: 44px;
-        padding: 0.4rem;
-        border-radius: 8px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    /* Metadata row: folder / size / modified shown as compact badges */
-    .file-row td:nth-child(3),
-    .file-row td:nth-child(4) {
-        padding: 0rem 1rem !important;
-        display: flex;
-        align-items: center;
-        color: var(--gray-color-ml);
-        font-size: 0.85rem;
-        flex-wrap: wrap;
-    }
-
-    .file-row td:nth-child(3)::before {
-        content: "Size:";
-        font-weight: 600;
-        color: var(--dark-color-ml);
-        margin-right: 0.35rem;
-    }
-
-    .file-row td:nth-child(4)::before {
-        content: "Modified:";
-        font-weight: 600;
-        color: var(--dark-color-ml);
-        margin-right: 0.35rem;
-    }
-
-    /* Ensure clickable feel but keep action buttons interactive */
-    .file-row {
-        cursor: pointer;
-    }
-
-    .file-row .btn {
-        cursor: auto;
-    }
-
-    /* Folder row mobile layout — show folder name, hide checkbox and extra columns */
-    /* Hide the leading checkbox column and surface the folder name (which is in td:nth-child(2)) */
-    .folder-row td:first-child {
-        display: none !important;
-        /* hide empty checkbox column */
-    }
-
-    .folder-row td:nth-child(2) {
-        display: block !important;
-        padding: 1rem !important;
-        border-bottom: 1px solid var(--gray-light-color-ml);
-        background: var(--light-color-ml);
-        border-radius: var(--border-radius-md-ml);
-    }
-
-    /* Hide the remaining metadata columns on mobile for folder rows */
-    .folder-row td:nth-child(3),
-    .folder-row td:nth-child(4),
-    .folder-row td:nth-child(5) {
-        display: none !important;
-    }
-
-    /* Make folder icon and name more prominent on mobile */
-    .folder-row .file-icon {
-        width: 40px;
-        height: 40px;
-        font-size: 1.2rem;
-        margin-right: 0.75rem;
-    }
-
-    .folder-row .file-name {
-        font-weight: 700;
-        font-size: 1rem;
-    }
-
-    /* Show file extension on mobile */
-    .file-name {
-        max-width: 100% !important;
-        white-space: normal !important;
-        word-break: break-word;
-        font-size: 0.9rem;
-    }
-
-    .file-info {
-        flex: 1;
-        min-width: 0;
-        overflow: visible;
-    }
-
-    .file-icon {
-        width: 40px;
-        height: 40px;
-        font-size: 1.2rem;
-        margin-right: 0.85rem;
-    }
-
-    .folder-path {
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .action-btn {
-        padding: 0.45rem 0.85rem;
-        font-size: 0.85rem;
-    }
-
-    .pagination {
-        flex-wrap: wrap;
-        gap: 0.35rem;
-    }
-
-    .page-link {
-        min-width: 38px;
-        height: 38px;
-        padding: 0.4rem 0.8rem;
-        font-size: 0.85rem;
-    }
-
-    .breadcrumb-nav {
-        padding: 0.5rem 1rem;
-        font-size: 0.85rem;
-        gap: 0.35rem;
-        overflow: visible;
-    }
-
-    .breadcrumb-item {
-        max-width: 100%;
-    }
-
-    .breadcrumb-current,
-    .breadcrumb-link {
-        max-width: calc(100vw - 4rem);
-        white-space: normal;
-        overflow-wrap: anywhere;
-    }
-
-    .file-size {
-        font-size: 0.75rem;
-        padding: 0.3rem 0.7rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .card-header {
-        padding: 1rem;
-    }
-
-    .card-title {
-        font-size: 1.15rem;
-    }
-
-    .empty-state {
-        padding: 2.5rem 1.25rem;
-    }
-
-    .empty-state i {
-        font-size: 1.5rem;
-    }
-
-    .modal-dialog {
-        width: 95%;
-    }
-
-    .modal-body {
-        padding: 0.5rem;
-    }
-
-    .table-responsive {
-        font-size: 0.8rem;
-    }
-
-    .file-name {
-        max-width: 120px;
-    }
-
-    .btn {
-        padding: 0.6rem 1rem;
-        font-size: 0.85rem;
-    }
-
-    .file-stats .stats-text h2 {
-        font-size: 1.25rem;
-    }
-
-    .file-stats .stats-text p {
-        font-size: 0.85rem;
-    }
-}
-
-.dtm {
-    display: none;
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  font-family: var(--font);
+  font-size: 13px;
+  color: var(--dark-color-ml);
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-/* Additional utility classes for removing inline styles */
-.file-list-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
+.form-control:focus {
+  border-color: var(--primary-color-ml);
+  box-shadow: 0 0 0 3px var(--primary-light-color-ml);
 }
 
-.search-inline {
-    flex: 1;
-    max-width: 640px;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: center;
+.form-text {
+  font-size: 11.5px;
+  color: var(--gray-color-ml);
+  margin-top: 4px;
 }
 
-.view-btn-left {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+/* Preview Modal Content */
+.preview-content {
+  max-height: 70vh;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #152222;
+  min-height: 280px;
 }
 
-.view-btn-right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+.preview-content img {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
 }
 
-.pagination-container {
-    display: none;
-    padding: 1rem;
-    border-top: 1px solid var(--gray-light-color-ml);
-    background: var(--light-color-ml);
+.preview-content video,
+.preview-content audio {
+  max-width: 100%;
+  max-height: 70vh;
 }
 
-.modal-body-text-style {
-    color: var(--gray-color-ml);
-    margin-bottom: 0;
+.preview-code-block {
+  width: 100%;
+  height: 100%;
+  max-height: 70vh;
+  margin: 0;
+  padding: 16px;
+  background: #1a2828;
+  color: #f4f7f3;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  overflow: auto;
+  line-height: 1.5;
 }
 
-.modal-body-text-top {
-    color: var(--gray-color-ml);
-    margin-top: 0.5rem;
-    margin-bottom: 0;
+.preview-iframe {
+  width: 100%;
+  height: 70vh;
+  border: none;
 }
 
-.modal-header-spacing {
-    margin-top: 0.5rem;
-    color: var(--gray-color-ml);
+.preview-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
+/* Toast Container & Notifications */
 .toast-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1050;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
 }
 
-@media (max-width: 768px) {
-    .dtm {
-        display: block;
-    }
+.toast-notification {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: var(--radius);
+  background: var(--dark-color-ml);
+  color: #ffffff;
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: var(--shadow-lg);
+  min-width: 260px;
+  max-width: 400px;
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
 }
 
-.table-cell-center {
-    text-align: center;
+.toast-notification.success {
+  background: linear-gradient(135deg, #10b981, #059669);
 }
 
-.table-select-col {
-    width: 48px;
-    text-align: center;
+.toast-notification.error {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
 }
 
-.file-name-cell,
-.file-name-heading {
-    padding-left: 1.5rem;
+.toast-notification.warning {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
-.file-row-main {
-    display: flex;
-    align-items: center;
-}
-
-.folder-name {
-    font-weight: 700;
-}
-
-.folder-leading-icon {
-    margin-right: 0.5rem;
-    color: #f59e0b;
-}
-
-.muted-cell-value {
-    color: var(--gray-color-ml);
-}
-
-.path-display-icon {
-    margin-right: 4px;
-    opacity: 0.5;
+.toast-close-btn {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
 }
 
-.copy-btn {
-    color: #fff;
+/* Pagination */
+.pagination-container {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
-.view-btn.is-disabled {
-    opacity: 0.5;
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.page-item .page-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: #ffffff;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.page-item .page-link:hover {
+  background: var(--primary-light-color-ml);
+  color: var(--primary-dark-color-ml);
 }
 
-.sortable-heading {
-    cursor: pointer;
+.page-item.active .page-link {
+  background: var(--primary-color-ml);
+  border-color: var(--primary-color-ml);
+  color: #ffffff;
 }
 
-.bulk-actions-controls {
-    float: right;
+.page-item.disabled .page-link {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.toast-icon {
-    font-size: 1.25rem;
-}
+/* Mobile & Tablet Responsiveness */
+@media (max-width: 900px) {
+  .fm-layout {
+    grid-template-columns: 1fr;
+    height: auto;
+    max-height: none;
+  }
 
-.toast-message {
-    flex: 1;
-}
+  .fm-tree-wrap {
+    display: none;
+  }
 
-.empty-state-error-icon {
-    color: var(--danger-color-ml);
+  .fm-grid-wrap {
+    min-height: 400px;
+  }
 }
 
-.empty-state-folder-icon {
-    font-size: 4rem;
-    color: #cbd5e0;
-}
+@media (max-width: 640px) {
+  .page-header-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 
-.upload-progress-cell {
-    min-width: 220px;
-}
+  .page-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
 
-.upload-progress-track {
-    height: 8px;
-    margin-bottom: 6px;
-}
+  .fm-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
 
-.upload-progress-bar {
-    height: 8px;
-}
+  .fm-toolbar-actions {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
-.progress-bar-empty {
-    width: 0%;
-}
+  .search-box {
+    width: 100%;
+  }
 
-.is-hidden {
-    display: none !important;
-}
+  .fm-grid.view-list .fm-item {
+    grid-template-columns: 32px 1fr 32px;
+  }
 
-.bucket-switcher-status:not(.is-hidden) {
-    display: inline;
-}
+  .fm-grid.view-list .fm-item-size,
+  .fm-grid.view-list .fm-item-date,
+  .fm-grid.view-list .fm-item-checkbox {
+    display: none;
+  }
 
-.file-list-card-body {
-    padding: 0;
+  .fm-list-header {
+    display: none;
+  }
 }