/* File: /assets/plugin/fileManager/fileManager.css */

/* Reset and Base Styles (Scoped) */
.file-manager-app *,
.file-manager-app *::before,
.file-manager-app *::after,
.fm-component-loading-overlay *, /* Include components outside the main app */
.fm-component-notify-container *,
.fm-component-batch-actions-bar *,
.fm-component-modal-overlay *,
.fm-component-context-menu *,
.fm-picker-overlay * /* Include picker mode */ {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.file-manager-app,
.fm-component-loading-overlay,
.fm-component-notify-container,
.fm-component-batch-actions-bar,
.fm-component-modal-overlay,
.fm-component-context-menu,
.fm-picker-overlay{
    --fm-font-regular: iranyekan, sans-serif; /* Define fonts locally if needed */
    --fm-font-regular-en: iranyekan_en, sans-serif;
    --fm-font-bold: iranyekan_Bold, sans-serif;
    --fm-font-light-en: iranyekan_Light_en, sans-serif;
    --fm-font-medium-en: iranyekan_Medium_en, sans-serif;
    --fm-color-body: #fff;
    --fm-color-body-txt: #000; /* Default text color (gray-800) */

    --fm-color-border: #e5e7eb; /* Default border color (gray-200) */

    --fm-color-primary: #2640cb; /* Blue-600 */
    --fm-color-primary-rgb: 38, 64, 203;
    --fm-color-primary-txt: #ffffff;

    --fm-color-secondary: #464555; /* Gray-500 */
    --fm-color-secondary-rgb: 70, 69, 85;
    --fm-color-secondary-txt: #ffffff;

    --fm-color-success: #10c469; /* Emerald-500 */
    --fm-color-success-rgb: 16, 196, 105;
    --fm-color-success-txt: #ffffff;

    --fm-color-info: #35b8e0; /* Blue-500 */
    --fm-color-info-rgb: 53, 184, 224;
    --fm-color-info-txt: #ffffff;

    --fm-color-warning: #f9c851; /* Amber-500 */
    --fm-color-warning-rgb: 249, 200, 81;
    --fm-color-warning-txt: #000000;

    --fm-color-danger: #ff5b5b; /* Red-500 */
    --fm-color-danger-rgb: 255, 91, 91;
    --fm-color-danger-txt: #ffffff;

    --fm-color-gray: #e1e4e7; /* Gray-200 */
    --fm-color-gray-rgb: 225, 228, 231;
    --fm-color-gray-txt: #000000;

    --fm-color-dark: #121212; /* Gray-800 */
    --fm-color-dark-rgb: 18, 18, 18;
    --fm-color-dark-txt: #ffffff;

    --fm-portlet-padding: 14px;
    --fm-table-padding: 12px;
    --fm-z-high: var(--z-index-global-high-priority,99999);
    --fm-z-middle: var(--z-index-global-middle-priority,99998);
    --fm-z-low: var(--z-index-global-low-priority,99998);

    /* UI Polish Variables */
    --fm-border-radius-md: 8px;
    --fm-border-radius-lg: 12px;
    --fm-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --fm-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);


}

/* Grid System (Scoped Flexbox Implementation) */
.file-manager-app .fm-row {
    display: flex;
    flex-wrap: wrap;
    /* Default gap can be added if needed, or use utility classes */
}
.file-manager-app .fm-row.fm-nowrap {
    flex-wrap: nowrap;
}
.file-manager-app .fm-row.fm-midst {
    align-items: stretch;
}
.file-manager-app .fm-row.fm-space-between {
    justify-content: space-between;
}
.file-manager-app .fm-col {
    flex: 1 1 0%; /* Equivalent to col */
    min-width: 0; /* Prevent flex item overflow */
}
.file-manager-app .fm-col-auto {
    flex: 0 0 auto;
    width: auto;
}


/* General App Styles */
.file-manager-app {
    scrollbar-color: auto;
    scrollbar-width: thin;
    z-index: 1;
    position: relative; /* Needed for D&D overlay AND absolute components */
    width: 100%;
    height: 100%; /* Default height */
    overflow: hidden; /* Ensure app itself contains scrolling */
    display: flex; /* Make app a flex container */
}

/* Layout - See Layout.js */
.file-manager-app .fm-layout-row {
    /* height: 100vh; */ /* REMOVED: Replaced by .file-manager-app height */
    height: 100%; /* Take full height of .file-manager-app */
    width: 100%; /* Take full width */
}

.file-manager-app .fm-sidebar {
    width: 280px;
    background-color: #fff;
    border-left: 1px solid var(--fm-color-border);
    display: flex;
    flex-direction: column;
    box-shadow: var(--fm-box-shadow-sm);
    z-index: 15; /* Z-index for desktop shadow and mobile overlay */
    transition: transform 0.3s ease;
}

.file-manager-app .fm-main-content {
    display: flex;
    flex-direction: column;
    background-color: var(--fm-color-body);
}

.file-manager-app .fm-header {
    flex-shrink: 0;
    z-index: 10;
    border-radius: 0;
    border: none;
    /* REMOVED: border-bottom: 1px solid var(--fm-color-border); */
    background-color: #fff;
    box-shadow: var(--fm-box-shadow-sm);
}

.file-manager-app .fm-file-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.file-manager-app .fm-footer {
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--fm-color-border);
    background-color: #fff;
    padding: 8px var(--fm-table-padding);
}

/* --- NEW: Picker Mode Footer --- */
.file-manager-app .fm-picker-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--fm-color-border);
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.file-manager-app[dir="rtl"] .fm-picker-footer {
    justify-content: flex-start;
}
/* --- END NEW --- */

/* D&D Overlay - See Layout.js */
.file-manager-app .fm-dnd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--fm-z-middle);
    background: rgba(var(--fm-color-primary-rgb), 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px dashed var(--fm-color-primary-txt);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--fm-color-primary-txt);
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Allow dragleave to pass to container */
}
.file-manager-app .fm-dnd-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Capture drop and dragleave */
}
.file-manager-app .fm-dnd-overlay .fm-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

/* Mobile Sidebar Overlay - See Layout.js */
.fm-mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 14; /* Below sidebar, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fm-mobile-sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* Sidebar - See Sidebar.js */
.file-manager-app .fm-disk-selector-container {
    padding: var(--fm-portlet-padding);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--fm-color-border);
    /* Flex styles for alignment */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.file-manager-app .fm-disk-selector-container label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0; /* Remove margin */
    flex-shrink: 0; /* Prevent label from shrinking */
}
.file-manager-app .fm-disk-selector-container .fm-input {
    flex-grow: 1; /* Allow select to grow */
}


.file-manager-app .fm-directory-tree-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--fm-portlet-padding);
}

.file-manager-app .fm-sidebar-footer {
    /* This container is no longer used by Sidebar.js */
    display: none;
}

/* Directory Tree - See DirectoryTree.js */
.file-manager-app .directory-tree-root {
    /* Base styles if needed */
}

.file-manager-app .tree-node {
    --fm-tree-gap:8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fm-tree-gap);
}

.file-manager-app .tree-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    text-align: right;
    cursor: pointer;
    padding: 4px 8px; /* Adjust padding as needed */
    border-radius: 4px;
    transition: background-color 0.2s ease;
    min-height: 32px; /* Ensure consistent height */
    font-size: 0.875rem;
}
.file-manager-app .tree-item:hover {
    background-color: var(--fm-color-gray);
}


.file-manager-app .tree-toggle {
    cursor: pointer;
    width: 1.5rem;
    text-align: center;
    color: var(--fm-color-secondary);
    font-size: 1.25rem; /* Slightly larger toggle icon */
}
.file-manager-app .tree-toggle:hover {
    color: var(--fm-color-dark);
}

.file-manager-app .tree-toggle-placeholder {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
}

.file-manager-app .tree-item-icon {
    color: var(--fm-color-primary);
    margin: 0 0.25rem;
    font-size: 1.125rem;
    font-family: 'Material Icons', serif !important;

}

.file-manager-app .tree-children {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fm-tree-gap);
    display: none; /* Initially hidden */
}
.file-manager-app .tree-node:not(.collapsed) > .tree-children {
    display: flex;
}


.file-manager-app .tree-node.active > .tree-item {
    background-color: rgba(var(--fm-color-primary-rgb), 0.1);
    font-weight: 600; /* font-semibold */
    color: var(--fm-color-primary);
}
.file-manager-app .tree-node.active > .tree-item .fm-icon {
    color: var(--fm-color-primary); /* Icon color matches text */
}



/* Header - See Header.js */
.file-manager-app .fm-header-content {
    padding: var(--fm-portlet-padding);
    /* NEW: Add border bottom *here* instead of on the whole header */
    border-bottom: 1px solid var(--fm-color-border);
}

.file-manager-app .fm-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-manager-app .fm-mobile-menu-btn {
    display: none; /* Hidden by default */
}

/* Breadcrumb Styles */
.file-manager-app .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}
.file-manager-app .breadcrumb-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Prevent wrapping mid-path */
}
.file-manager-app .breadcrumb-item {
    display: inline-flex; /* Use inline-flex for icon alignment */
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    text-decoration: none;
    color: var(--fm-color-body-txt); /* Default color */
    border-radius: 4px;
    transition: all 250ms;
}
.file-manager-app .breadcrumb-item:hover {
    color: var(--fm-color-gray-txt);
    background: var(--fm-color-gray);
    box-shadow: 0 0 0 3px rgba(var(--fm-color-gray-rgb),0.4);
}
.file-manager-app .breadcrumb-item:last-child {
    color: var(--fm-color-dark);
    pointer-events: none; /* Last item not clickable */
    text-decoration: none;
}
.file-manager-app .breadcrumb-separator {
    margin: 0 4px;
    color: #9ca3af; /* text-gray-400 */
}
.file-manager-app .breadcrumb-item .fm-icon {
    font-size: 1.1em;
}

/* REMOVED: .fm-current-path */

.file-manager-app .fm-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* REMOVED: #searchInput from header-right */

.file-manager-app #fileInput {
    display: none;
}

/* --- NEW: Nav Bar Styles --- */
.file-manager-app .fm-nav-bar {
    padding: 8px var(--fm-portlet-padding);
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--fm-color-border);
    flex-direction: row-reverse;
}

.file-manager-app .fm-nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Tighter gap for history/sync buttons */
    flex: 1 1 0; /* Allow to grow and shrink */
    min-width: 0; /* Allow path input to shrink */
    direction: ltr;
}

.file-manager-app .fm-nav-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto; /* Don't grow, don't shrink */

}

.file-manager-app .fm-path-input-group {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.file-manager-app .fm-path-input-group:focus-within {
    border-color: var(--fm-color-gray);
    box-shadow: 0 0 0 3px rgba(var(--fm-color-gray-rgb), 0.4);
}

.file-manager-app .fm-path-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 8px;
    height: 32px;
    line-height: 32px;
    background-color: #f3f4f6;
    color: var(--fm-color-secondary);
    font-size: 12px;
    white-space: nowrap;
    user-select: none;
}
.file-manager-app .fm-path-label .fm-icon {
    font-size: 20px;
}

.file-manager-app .fm-path-input-group .fm-input {
    border: none;
    border-radius: 0;
    min-height: 30px; /* Adjust height (32px - 2px border) */
    height: 30px;
    line-height: 30px;
    direction: ltr; /* Path should always be LTR */
    flex-grow: 1;
    padding: 0 8px; /* Add internal padding */
    font-size: 12px;
}
.file-manager-app .fm-path-input-group .fm-input:focus {
    box-shadow: none; /* No ring inside the group */
    outline: none;
}

.file-manager-app .fm-path-input-group .fm-button {
    border-radius: 0;
    height: 32px;
    min-width: auto;
    font-size: 12px;
    padding: 0 10px;
    border-left: 1px solid #d1d5db;
}

.file-manager-app .fm-path-input-group .fm-button:hover{
    background: #d1d5db;
}
/* Search input in new location */

.file-manager-app .fm-nav-right #searchInput {
    width: 250px;
    padding-right: 32px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABRElEQVR4AdyULTcFQRzGl0TjW9BEoiYSNVHUaGgkWVI1Gk3VaHwLGo3fj5k9Y+7O3D3nLue4e57n/z777NvsbPPLx3QLzPH0HuBHwifiBdgbpUd0xRne4ApMsUTyAm9gL3QJXLByE4ojzEzCXWKxgeklkgt4+zssFouYY5jinGQeCkWcNy4yF4hXdcCKV9iFd4r2cc2dpsZcYDUMnwZfcrGfv6OR+VxgZGDSwp8LPIYrPgy+5GI/zpfmmvwO1sKkn6cbLaQ/nHX7Ftc1NeYCfiHXYYEbbT/E0e0RWMc1t5jSl0brG7mA1S3MJRQnmPRXcUYu7LsP7JkX2SXg8DbGDXWPT/FMYt0+4ReqIiUBV/q4fCfpr2KZhnVcY10viyI1AReO41iRSQW8gKrIEAK5iHnLoQQ8oXcijVsOKdCeNA3+v8AnAAAA//8YmNAlAAAABklEQVQDANKCLTGpeo9HAAAAAElFTkSuQmCC);
    background-size: 24px;
    background-position: calc(100% - ( (32px - 24px) / 2) ) center;
    background-repeat: no-repeat;
}


/* File List - See FileList.js */
.file-manager-app .fm-file-table {
    width: 100%;
    border-collapse: collapse; /* Use collapse for borders */
    table-layout: auto;
    font-size: 0.875rem; /* text-sm */
    user-select: none; /* Prevent text selection on shift-click */
}
.file-manager-app .fm-table-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--fm-color-body); /* Match container background */
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--fm-color-border);
}
.file-manager-app .view-grid .fm-table-head{
    display: none;
}
.file-manager-app .fm-file-table th,
.file-manager-app .fm-file-table td {
    padding: var(--fm-table-padding);
    text-align: right; /* Default to right align for RTL */
    vertical-align: middle; /* Center content vertically */
    border-bottom: 1px solid var(--fm-color-border);
    white-space: nowrap; /* Prevent wrapping by default */
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-manager-app .fm-file-table th {
    font-weight: 600; /* font-semibold */
    color: var(--fm-color-gray-txt); /* text-gray-700 */
    background-color: var(--fm-color-gray); /* bg-gray-50 */
}
.file-manager-app .fm-file-table td {
    color: var(--fm-color-dark);
}
.file-manager-app .fm-file-table th.minwidth,
.file-manager-app .fm-file-table td.minwidth {
    width: 1%; /* Allow shrinking */
    white-space: nowrap;
}
.file-manager-app .fm-file-table th.index,
.file-manager-app .fm-file-table td.index {
    width: 40px;
    text-align: center;
}
.file-manager-app .fm-file-table td.index .fm-checkbox {
    justify-content: center; /* Center checkbox */
}
.file-manager-app .fm-file-table tbody tr:last-child td {
    border-bottom: none; /* Remove border from last row */
}
.file-manager-app .fm-file-table tbody tr:hover td {
    background-color: #f3f4f6; /* bg-gray-100 on hover */
}


.file-manager-app .item-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    cursor: default; /* Default cursor */
    /* Remove button styles if not needed */
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: right;
    min-width: 0; /* Allow shrinking */
    user-select: text; /* Allow selecting name text */
}
.file-manager-app .item-name.is-dir { /* Directories are clickable */
    cursor: pointer;
}
.file-manager-app .item-name:hover {
    /* Add hover effect if needed, e.g., underline for dirs */
    /* background: none; box-shadow: none; */ /* Override button hover */
}

.file-manager-app .file-item-icon {
    color: var(--fm-color-secondary); /* File icon color */
    font-size: 1.125rem;
}

/* STYLE FOR IMAGE PREVIEWS */
.file-manager-app .fm-file-item-preview {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px; /* Match other border radii */
    background-color: var(--fm-color-gray); /* Placeholder bg */
    border: 1px solid var(--fm-color-border);
    flex-shrink: 0; /* Prevent shrinking in flex container */
    /* Skeleton pulse animation */
    animation: fm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Stop animation once loaded */
.file-manager-app .fm-file-item-preview:not([src=""]) {
    animation: none;
}
@keyframes fm-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}




.file-manager-app .table-row.selected > td {
    background-color: rgba(var(--fm-color-primary-rgb), 0.05);
}

.file-manager-app .fm-empty-folder,
.file-manager-app .fm-not-found-folder, /* NEW 404 Message */
.file-manager-app .fm-loading-list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: var(--fm-color-secondary);
    min-height: 200px;
    /* display is controlled by JS */
}
.file-manager-app .fm-empty-folder .title,
.file-manager-app .fm-not-found-folder .title,
.file-manager-app .fm-loading-list .title {
    font-size: 1rem;
}

/* Footer - See Footer.js */
.file-manager-app .fm-footer-content {
    font-size: 0.8rem;
}
.file-manager-app .fm-footer-title {
    font-weight: 600; /* font-semibold */
}

.file-manager-app .fm-job-list {
    gap: 1rem;
    direction: ltr;
}
.file-manager-app .fm-job-item {
    display: inline-flex; /* Use inline-flex instead of row */
    align-items: center;
    gap: 0.25rem;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.03);
    font-size: 0.75rem;
}
.file-manager-app .fm-job-item .fm-icon {
    font-size: 1rem; /* Smaller icon */
}
.file-manager-app .fm-no-jobs-message {
    color: var(--fm-color-secondary);
}


/* Input Styles (Scoped) */
.file-manager-app .fm-input,
.file-manager-app select.fm-input, /* Target select specifically if needed */
.file-manager-app textarea.fm-input,
.fm-component-modal-overlay .fm-input { /* Include modal */
    --fm-input-height: 40px;
    --fm-input-padding: 12px;
    --fm-input-border: 1px solid #d1d5db; /* gray-300 */
    --fm-input-ring-color: rgba(var(--fm-color-gray-rgb), 0.4);
    font: 14px/var(--fm-input-height) var(--fm-font-light-en); /* Adjust font size */
    min-height: var(--fm-input-height);
    width: 100%;
    border: var(--fm-input-border);
    border-radius: 6px; /* rounded-md */
    padding: 0 var(--fm-input-padding);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.file-manager-app .fm-input:focus,
.file-manager-app select.fm-input:focus,
.file-manager-app textarea.fm-input:focus,
.fm-component-modal-overlay .fm-input:focus {
    outline: none;
    border-color: var(--fm-color-gray);
    box-shadow: 0 0 0 3px var(--fm-input-ring-color);
}
.file-manager-app .fm-input.small,
.fm-component-modal-overlay .fm-input.small {
    --fm-input-height: 32px;
    font-size: 12px; /* Adjust font size */
    padding: 0 calc(var(--fm-input-padding) * 0.75);
}
/* Select specific styles */
.file-manager-app select.fm-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-left: 2.5rem; /* Space for arrow */
}

/* Button Styles (Scoped) */

.fm-button-container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    flex-direction: row-reverse;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    gap: 8px;
    width: 100%;
}

.fm-button-container.ltr {
    flex-direction: row;
    justify-content: flex-end;
}

.fm-button-container.latch {
    column-gap: 0;
    row-gap: 0;
    gap: 0;
}

.fm-button-container.latch .button {
    border-radius: 0;
}

.fm-button-container.latch[dir='ltr'] .button:first-child {
    -webkit-border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.fm-button-container.latch[dir='ltr'] .button:last-child {
    -webkit-border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.fm-button-container.latch[dir='ltr'] .button:first-child:last-child {

    border-radius: 8px;
}

.fm-button-container.latch .button:first-child {
    -webkit-border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.fm-button-container.latch .button:last-child {
    -webkit-border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.fm-button-container.sticky {
    position: sticky;
    bottom: 0;
    background: rgba(var(--color-body-rgb), 0.5);
    padding: 12px 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: var(--z-index-global-low-priority);
}

.fm-button-container.inline {
    display: -moz-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    flex-direction: row-reverse;
    width: auto;
}

.fm-button-container.space-between {
    justify-content: space-between;
}

.fm-button-container.align-center,
.fm-button-container.center-align {
    justify-content: center;
}

.fm-button-container.nowrap {
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
}

.fm-button-container.inline .button {
    vertical-align: middle;
}
.fm-button {
    --fm-button-min-width: 64px;
    --fm-button-height: 40px;
    --fm-button-line-height: 40px;
    --fm-button-padding: 6px;
    --fm-button-icon-size: 28px;
    --fm-button-border-radius: 8px;
    position: relative;
    display: inline-block;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    vertical-align: middle;
    column-gap: 6px;
    row-gap: 6px;
    gap: 6px;
    /*width: auto;*/
    min-width: var(--fm-button-min-width);
    height: var(--fm-button-height);
    font: 12px/var(--fm-button-line-height) var(--fm-font-light-en);
    padding: 0 var(--fm-button-padding);
    border: none;
    border-radius: var(--fm-button-border-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 250ms, box-shadow 250ms;
    user-select: none;
    overflow: hidden;
}
.fm-button > i{
    font-family: 'Material Icons Outlined', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}
.fm-button-case {
    --fm-button-case-padding: 4px;
    width: auto;
    min-width: auto;
    height: auto;
    padding: var(--fm-button-case-padding);
    font-size: 0;
}

.fm-button.fill {
    flex: auto;
}

.fm-button.ltr {
    direction: ltr;
}

.fm-button.rtl {
    direction: rtl;
}

.fm-button.full-width {
    display: inline-block;
    width: 100%;
}

.fm-button.align-center {
    text-align: center;
    justify-content: center;
    place-content: center;
}

.fm-button.big {
    --fm-button-min-width: 48px;
    --fm-button-height: 48px;
    --fm-button-line-height: 48px;
    --fm-button-padding: 8px;
    --fm-button-icon-size: 32px;
}

.fm-button.small {
    --fm-button-min-width: 32px;
    --fm-button-height: 32px;
    --fm-button-line-height: 32px;
    --fm-button-padding: 6px;
    --fm-button-icon-size: 20px;
}

.fm-button.xs {
    --fm-button-min-width: 28px;
    --fm-button-height: 28px;
    --fm-button-line-height: 28px;
    --fm-button-padding: 4px;
    --fm-button-icon-size: 20px;
}

.fm-button.xxs {
    --fm-button-min-width: 24px;
    --fm-button-height: 24px;
    --fm-button-line-height: 24px;
    --fm-button-padding: 4px;
    --fm-button-icon-size: 16px;
}
.fm-button.big-icon {
    --fm-button-icon-size: 32px;
}
.fm-button.small-icon {
    --fm-button-icon-size: 20px;
}
.fm-button.xs-icon {
    --fm-button-icon-size: 16px;
}
.fm-button.xxs-icon {
    --fm-button-icon-size: 12px;
}
.fm-button-case .fm-button {
    min-width: calc(var(--fm-button-min-width) - (var(--fm-button-case-padding) * 2));
    height: calc(var(--fm-button-height) - (var(--fm-button-case-padding) * 2));
    line-height: calc(var(--fm-button-line-height) - (var(--fm-button-case-padding) * 2));
}
.fm-button.rounded {
    --fm-button-border-radius: 100px;
}
.fm-button.left {
    float: left;
}
.fm-button.right {
    float: right;
}
.fm-button:disabled,
.fm-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.fm-button {
    --fm-button-color: var(--fm-color-primary);
    --fm-button-color-txt: var(--fm-color-primary-txt);
    --fm-button-color-rgb: var(--fm-color-primary-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-icon-color: inherit;


    background-color: var(--fm-button-color);
    color: var(--fm-button-color-txt);

    --border-color: var(--fm-button-color);
    --border-color-rgb: var(--fm-button-color-rgb);

    --selected-background-color: var(--fm-button-color);
    --selected-text-color: var(--fm-button-color-txt);
    --selected-border-color: rgba(var(--fm-button-color-rgb), 0.2);

    --focus-background-color: var(--fm-button-color);
    --focus-text-color: var(--fm-button-color-txt);
    --focus-border-color: rgba(var(--fm-button-color-rgb), 0.4);

    --active-background-color: var(--fm-button-color);
    --active-text-color: var(--fm-button-color-txt);
    --active-border-color: rgba(var(--fm-button-color-rgb), 0.4);

    --loading-backgroud: var(--fm-button-loading);
    --loading-backgroud-hover: var(--fm-button-hover-loading);
}

.fm-button.secondary {
    --fm-button-color: var(--fm-color-secondary);
    --fm-button-color-txt: var(--fm-color-secondary-txt);
    --fm-button-color-rgb: var(--fm-color-secondary-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
}

.fm-button.success {
    --fm-button-color: var(--fm-color-success);
    --fm-button-color-txt: var(--fm-color-success-txt);
    --fm-button-color-rgb: var(--fm-color-success-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
}

.fm-button.danger {
    --fm-button-color: var(--fm-color-danger);
    --fm-button-color-txt: var(--fm-color-danger-txt);
    --fm-button-color-rgb: var(--fm-color-danger-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
}

.fm-button.warning {
    --fm-button-color: var(--fm-color-warning);
    --fm-button-color-txt: var(--fm-color-warning-txt);
    --fm-button-color-rgb: var(--fm-color-warning-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
}

.fm-button.info {
    --fm-button-color: var(--fm-color-info);
    --fm-button-color-txt: var(--fm-color-info-txt);
    --fm-button-color-rgb: var(--fm-color-info-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");
}

.fm-button.gray {
    --fm-button-color: var(--fm-color-gray);
    --fm-button-color-txt: var(--fm-color-gray-txt);
    --fm-button-color-rgb: var(--fm-color-gray-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-icon-color: #000 !important;
    --selected-border-color: rgba(var(--fm-button-color-rgb), 0.5);
}

.fm-button.dark {
    --fm-button-color: var(--fm-color-dark);
    --fm-button-color-txt: var(--fm-color-dark-txt);
    --fm-button-color-rgb: var(--fm-color-dark-rgb);
    --fm-button-loading: url("/assets/icon/loading/loading-white.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-white.gif");

}

.fm-button.white {
    --fm-button-color: #fff;
    --fm-button-color-txt: #000;
    --fm-button-color-rgb: 255, 255, 255;
    --fm-button-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-icon-color: #000 !important;
    --selected-border-color: rgba(0, 0, 0, 0.12);
    --focus-border-color: rgba(0, 0, 0, 0.24);
    --active-border-color: rgba(0, 0, 0, 0.36);
}

.fm-button.nan {
    --fm-button-color: transparent;
    --fm-button-color-txt: inheart;
    --fm-button-color-rgb: inheart, inheart, inheart;
    --fm-button-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-hover-loading: url("/assets/icon/loading/loading-dark.gif");
    --fm-button-icon-color: inheart !important;
    --selected-border-color: transparent;
    --focus-border-color: transparent;
    --active-border-color: transparent;
}

.fm-button.transparent {
    background-color: transparent;
    color: inherit;
    --loading-backgroud: url("/assets/icon/loading/loading-dark.gif");
}

.fm-button.transparent:hover {
    background-color: var(--fm-button-color);
    color: var(--fm-button-color-txt);
    box-shadow: none;
}

.fm-button.selected,
.fm-button:hover {
    outline: none;
    opacity: 1;
    background: var(--selected-background-color);
    color: var(--selected-text-color);
    box-shadow: 0 0 0 4px var(--selected-border-color);
}

.fm-button:focus {
    outline: none;
    opacity: 1;
    background: var(--selected-background-color);
    color: var(--selected-text-color);
    box-shadow: 0 0 0 4px var(--selected-border-color);
}

.fm-button:active {
    outline: none;
    opacity: 1;
    background: var(--selected-background-color);
    color: var(--selected-text-color);
    box-shadow: 0 0 0 4px var(--selected-border-color);
}

.fm-button.outline {
    --fm-button-icon-color: var(--border-color);
    outline: none;
    background: transparent;
    color: #000;
    box-shadow: 0 0 0 1px var(--border-color);
    --loading-backgroud: url("/assets/icon/loading/loading-dark.gif");
    --loading-backgroud-hover: url("/assets/icon/loading/loading-dark.gif");
}

.fm-button.outline:hover,
.fm-button.outline:active,
.fm-button.outline:focus {
    box-shadow: 0 0 0 2px var(--border-color), 0 0 0 6px rgba(var(--border-color-rgb), 0.2);
}

.fm-button > svg,
.fm-button > img,
.fm-button > i {
    display: inline-block !important;
    vertical-align: middle !important;
    /*color: var(--fm-button-icon-color);*/
    color: inherit;
    font-size: var(--fm-button-icon-size);
    aspect-ratio: 1 / 1;
    height: var(--fm-button-icon-size);
    overflow: hidden;
}

.fm-button > svg,
.fm-button > img {
    height: 100%;
    width: auto;
    padding: 2px;
}

.fm-button > input,
.fm-button > select {
    background-color: transparent !important;
    border: none !important;
    color: inherit;
    padding: 0;
    cursor: pointer;
    contain: content;
}

.fm-button.btn-select > select {
    padding-right: calc(var(--fm-button-icon-size) + 4px);
}

.fm-button.btn-select[dir="ltr"] > select {
    padding-right: 0;
    padding-left: var(--fm-button-icon-size);
}

.fm-button.btn-select:has(select) img,
.fm-button.btn-select:has(select) i {
    position: absolute;
    right: var(--fm-button-padding);
    top: 50%;
    transform: translateY(-50%);
}

.fm-button.btn-select[dir="ltr"]:has(select) img,
.fm-button.btn-select[dir="ltr"]:has(select) i {
    right: auto;
    left: var(--fm-button-padding);
}


label:has(select.loading) > i{
    color: transparent;
}
label:has(select.loading) > i:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/icon/connection.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    background-color: #fff;
    border-radius: 4px;
}

.fm-button > select:active,
.fm-button > select:hover,
.fm-button > select:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.fm-button > select optgroup,
.fm-button > select option {
    color: #000;
}


.fm-button.icon {
    --fm-button-min-width: var(--fm-button-height);
    padding: 0 !important;
}
.fm-button.icon.fill{
    flex-grow: 1;
}
.fm-button.icon:empty{
    display: none;
}
.fm-button.icon > svg,
.fm-button.icon > img,
.fm-button.icon > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fm-button.icon > svg,
.fm-button.icon > img{
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 4px;
}

.fm-button .countdown {
    display: inline-block;
    vertical-align: middle;
}

form.loading .fm-button[type='submit'],
.fm-button.loading {
    color: transparent !important;
    background-image: url("/assets/icon/loading/loading-white.gif");
    background-image: var(--loading-backgroud);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

form.loading .fm-button[type='submit']:hover,
.fm-button.loading:hover {
    color: transparent !important;
    background-image: var(--loading-backgroud-hover);
}

form.loading .fm-button[type='submit'] *,
.fm-button.loading * {
    opacity: 0 !important;
}




/* Checkbox (Scoped) */
.file-manager-app .fm-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.file-manager-app .fm-checkbox input[type="checkbox"] {
    display: none; /* Hide native checkbox */
}
.file-manager-app .fm-checkbox .fm-checkbox-icon {
    position: relative;
    width: 1rem; /* 16px */
    height: 1rem;
    border: 1px solid var(--fm-color-border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}
.file-manager-app thead .fm-checkbox .fm-checkbox-icon{
    background: #fff;
}

/* Checkmark using pseudo-element */
.file-manager-app .fm-checkbox input[type="checkbox"]:checked + .fm-checkbox-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAzElEQVR4AeyTsQ3CMBBFLaZgDEo2omYCYANaJqJkDGo24D+UROaw40tsikhB/licj/eSi7IJf/6sguKAFzeirb2llnewE/ypnJRhtRIAf3TUV7d/thaCGH4U9aoMq1YwCsdSIyjCawQueE7Aw9pzmIkbzv/tiA4qArhrT0k44wJ0HH4eKEUbK7ip4aywrGQyHIgVULvoy0pmwcUJKQF1K5k0FgB9cgLOYwm/XTOnMc6YgL5eMgsOoCSgB8nX60/RG4/Ay0r2rYLkWOLiGwAA///8FA5kAAAABklEQVQDAJRLIzEX+AjnAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;

}
.file-manager-app .fm-checkbox.small .fm-checkbox-icon {
    width: 0.875rem; /* 14px */
    height: 0.875rem;
}
.file-manager-app .fm-checkbox:hover .fm-checkbox-icon {
    border-color: var(--fm-color-primary);
}
.file-manager-app .fm-checkbox input[type="checkbox"]:focus + .fm-checkbox-icon {
    box-shadow: 0 0 0 3px rgba(var(--fm-color-primary-rgb), 0.4);
}
.file-manager-app .fm-checkbox input[type="checkbox"]:disabled + .fm-checkbox-icon {
    background-color: #f3f4f6; /* gray-100 */
    border-color: var(--fm-color-border);
    cursor: not-allowed;
}
.file-manager-app .fm-checkbox input[type="checkbox"]:disabled:checked + .fm-checkbox-icon {
    background-color: #d1d5db; /* gray-300 */
    border-color: #d1d5db;
}
.file-manager-app .fm-checkbox input[type="checkbox"]:disabled:checked + .fm-checkbox-icon::before {
    border-color: #9ca3af; /* gray-400 */
}


/* Token (Scoped) */
.file-manager-app .fm-token {
    display: inline-block;
    font: 12px var(--fm-font-regular-en);
    line-height: 24px;
    min-width: 24px;
    text-align: center;
    padding: 0 4px;
    background: var(--fm-color-gray);
    color: var(--fm-color-secondary);
    border-radius: 6px;
    white-space: nowrap;
}
.file-manager-app .fm-token.xs {
    font-size: 11px;
    line-height: 20px;
    padding: 0 3px;
    min-width: 20px;
}
.file-manager-app .fm-token.xxs {
    font-size: 10px;
    line-height: 16px;
    padding: 0 2px;
    min-width: 16px;
}


/* Batch Actions - See BatchActions.js */
/* Scoped to fm-component- */
.fm-component-batch-actions-bar {
    position: absolute; /* Changed from fixed */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--fm-z-middle);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgb(0 0 0);
    color: var(--fm-color-dark-txt);
    border-radius: var(--fm-border-radius-lg) var(--fm-border-radius-lg) 0 0;
    min-width: 33%;
}
.fm-component-batch-actions-bar .fm-batch-count {
    font-size: 0.875rem;
    font-weight: 500;
}
.fm-component-batch-actions-bar .fm-batch-actions-buttons {
    display: flex;
    gap: 0.75rem;
}
.fm-component-batch-actions-bar .fm-batch-btn {
    color: #fff; /* Default icon color */
    background: transparent; /* No background */
}
.fm-component-batch-actions-bar .fm-batch-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.fm-component-batch-actions-bar .fm-batch-btn.danger {
    color: var(--fm-color-danger);
}
.fm-component-batch-actions-bar .fm-batch-btn.danger:hover {
    background-color: rgba(var(--fm-color-danger-rgb), 0.2);
}

/* Loader - See Loader.js */
/* Scoped to fm-component- */
.fm-component-loading-overlay {
    position: absolute; /* Changed from fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--fm-z-high);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fm-component-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.fm-component-loading-overlay .loading-content {
    text-align: center;
}
.fm-component-loading-overlay .spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid var(--fm-color-primary); /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: fm-spin 1s linear infinite;
    margin: 0 auto;
}
.fm-component-loading-overlay .loading-text {
    margin-top: 1rem;
    color: var(--fm-color-secondary);
}

@keyframes fm-spin { /* Prefixed keyframe name */
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Notify - See Notify.js */
/* Scoped to fm-component- */
.fm-component-notify-container {
    position: absolute; /* Changed from fixed */
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse; /* Default for bottom positions */
    gap: 0.5rem;
    width: 320px; /* Default width */
    padding: 12px; /* Padding around the container */
    z-index: var(--fm-z-high);
    max-height: 50vh; /* Limit height */
    overflow: hidden; /* Hide overflow */
    box-sizing: content-box; /* Prevent padding from affecting width */
    pointer-events: none; /* Allow clicks through container */
}
/* Position classes */
.fm-component-notify-container.fm-notify-container-top-left,
.fm-component-notify-container.fm-notify-container-top-center,
.fm-component-notify-container.fm-notify-container-top-right {
    top: 0;
    flex-direction: column; /* Add items downwards */
}
.fm-component-notify-container.fm-notify-container-bottom-left,
.fm-component-notify-container.fm-notify-container-bottom-center,
.fm-component-notify-container.fm-notify-container-bottom-right {
    bottom: 0;
}
.fm-component-notify-container.fm-notify-container-top-left,
.fm-component-notify-container.fm-notify-container-bottom-left {
    left: 0;
}
.fm-component-notify-container.fm-notify-container-top-right,
.fm-component-notify-container.fm-notify-container-bottom-right {
    right: 0;
}
.fm-component-notify-container.fm-notify-container-top-center,
.fm-component-notify-container.fm-notify-container-bottom-center {
    left: 50%;
    transform: translateX(-50%);
}
/* Individual Notification Item */
.fm-component-notify-container .fm-notify-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align icon top */
    background: rgba(var(--fm-color-gray-rgb), 0.9);
    color: var(--fm-color-gray-txt);
    font-size: 14px; /* Adjust size */
    border-radius: var(--fm-border-radius-md);
    gap: 0.75rem; /* space-x-3 */
    padding: 0.75rem; /* p-3 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--fm-box-shadow-md);
    pointer-events: auto; /* Enable clicks on notifications */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fm-component-notify-container .fm-notify-item.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Color Variants */
.fm-component-notify-container .fm-notify-item.primary { background: rgba(var(--fm-color-primary-rgb), 0.9); color: var(--fm-color-primary-txt); }
.fm-component-notify-container .fm-notify-item.secondary { background: rgba(var(--fm-color-secondary-rgb), 0.9); color: var(--fm-color-secondary-txt); }
.fm-component-notify-container .fm-notify-item.success { background: rgba(var(--fm-color-success-rgb), 0.9); color: var(--fm-color-success-txt); }
.fm-component-notify-container .fm-notify-item.danger { background: rgba(var(--fm-color-danger-rgb), 0.9); color: var(--fm-color-danger-txt); }
.fm-component-notify-container .fm-notify-item.warning { background: rgba(var(--fm-color-warning-rgb), 0.9); color: var(--fm-color-warning-txt); }
.fm-component-notify-container .fm-notify-item.info { background: rgba(var(--fm-color-info-rgb), 0.9); color: var(--fm-color-info-txt); }
.fm-component-notify-container .fm-notify-item.dark { background: rgba(var(--fm-color-dark-rgb), 0.9); color: var(--fm-color-dark-txt); }
/* Elements within notification */
.fm-component-notify-container .fm-notify-item .fm-notify-icon {
    font-size: 1.25rem; /* ~20px */
    flex-shrink: 0; /* Prevent icon shrinking */
}
.fm-component-notify-container .fm-notify-item .fm-notify-text-container { /* kit.css container */
    flex-grow: 1; /* Allow text to take remaining space */
}
.fm-component-notify-container .fm-notify-item .fm-notify-title {
    font-weight: 600; /* font-semibold */
    line-height: 1.5;
}
.fm-component-notify-container .fm-notify-description {
    line-height: 1.5;
    word-break: break-word; /* Allow long words to break */
}
.fm-component-notify-container .fm-notify-close {
    font-size: 1.25rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: inherit; /* Inherit color */
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.fm-component-notify-container .fm-notify-close:hover {
    opacity: 1;
}
.file-manager-app .fm-hide-small-mobile {
    display: none;
}

/* --- NEW: View Mode Toggling --- */
.file-manager-app .fm-file-list-container.view-list .fm-file-grid {
    display: none;
}
.file-manager-app .fm-file-list-container.view-list .fm-file-table {
    display: table;
}
.file-manager-app .fm-file-list-container.view-grid .fm-file-table {
    display: none;
}
.file-manager-app .fm-file-list-container.view-grid .fm-file-grid {
    display: grid;
}

/* --- NEW: Header View Switcher --- */
.file-manager-app .fm-view-switcher {
    box-shadow:  0 0 0 1px var(--fm-color-border);
    border-radius: 8px;
    padding: 0;
    background-color: var(--fm-color-gray);
    gap: 0;
}
.file-manager-app .fm-view-switcher .fm-button {
    /* 'nan' style already applied */

}
.file-manager-app .fm-view-switcher .fm-button.active {
    background-color: #fff;
    color: var(--fm-color-primary);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.file-manager-app .fm-view-switcher .fm-button:first-of-type{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.file-manager-app .fm-view-switcher .fm-button:last-of-type{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- NEW: Grid View Styles --- */
.file-manager-app .fm-file-grid {
    /* display: grid; /* Toggled by .view-grid */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    user-select: none; /* Prevent text selection on shift-click */
}

.file-manager-app .fm-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-border-radius-md);
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.file-manager-app .fm-grid-item:hover {
    background-color: #f9fafb; /* gray-50 */
    border-color: #d1d5db; /* gray-300 */
}
.file-manager-app .fm-grid-item.selected {
    background-color: rgba(var(--fm-color-primary-rgb), 0.05);
    border-color: var(--fm-color-primary);
    box-shadow: 0 0 0 1px var(--fm-color-primary);
}

.file-manager-app .fm-grid-item-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* Hide checkbox by default, show on hover/selected */
.file-manager-app .fm-grid-item .fm-grid-item-checkbox {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.file-manager-app .fm-grid-item:hover .fm-grid-item-checkbox,
.file-manager-app .fm-grid-item.selected .fm-grid-item-checkbox {
    opacity: 1;
}

.file-manager-app .fm-grid-item-icon-container {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.file-manager-app .fm-grid-item .fm-grid-item-icon {
    font-size: 3.5rem; /* 56px */
}
.file-manager-app .fm-grid-item .fm-grid-item-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--fm-color-gray);
    /* Animation is applied in the main .fm-file-item-preview rule */
}
.file-manager-app .fm-grid-item .tree-item-icon {
    color: var(--fm-color-warning);
}
.file-manager-app .fm-grid-item .file-item-icon {
    color: var(--fm-color-secondary);
}

.file-manager-app .fm-grid-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fm-color-dark);
    text-align: center;
    width: 100%;
    /* Truncation for 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    min-height: 2.5em; /* 1.25em * 2 lines */
    line-height: 1.25em;
    user-select: text; /* Allow selecting name text */
}

.file-manager-app .fm-grid-item-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    /* background: rgba(255, 255, 255, 0.9); */
    border-radius: 6px;
    /* padding: 2px; */
    opacity: 0.5; /* Visible but subtle */
    transition: opacity 0.2s ease;
    z-index: 1;
}

.file-manager-app .fm-grid-item:hover .fm-grid-item-actions,
.file-manager-app .fm-grid-item.selected .fm-grid-item-actions {
    opacity: 1;
}



/* Modal Styles (MODIFIED) */
/* Scoped to fm-component- */
.fm-component-modal-overlay {
    position: absolute; /* Changed from fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--fm-z-high);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1rem; /* Add padding for small screens */
}
.fm-component-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.fm-modal-dialog {
    background-color: #fff;
    border-radius: var(--fm-border-radius-lg);
    box-shadow: var(--fm-box-shadow-md);
    width: 100%; /* Use 100% width for padding */
    max-width: 450px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Animation */
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-height: calc(100vh - 2rem); /* Respect padding */
}
.fm-component-modal-overlay.visible .fm-modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

.fm-modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--fm-color-border);
    flex-shrink: 0; /* Prevent header from shrinking */
}
.fm-modal-title {
    margin: 0;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: var(--fm-color-dark);
}

.fm-modal-content {
    padding: 1rem;
    overflow-y: auto; /* Allow content to scroll */
}
.fm-modal-content-text {
    font-size: 0.875rem; /* text-sm */
    color: var(--fm-color-secondary);
    line-height: 1.5;
    margin-bottom: 1rem; /* Add space if input is shown */
}
.fm-modal-input {
    width: 100%;
    display: none; /* Hidden by default */
}

.fm-modal-footer {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right (flex-start for RTL) */
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f9fafb; /* bg-gray-50 */
    border-top: 1px solid var(--fm-color-border);
    flex-shrink: 0; /* Prevent footer from shrinking */

}
/* RTL support for footer buttons */
.file-manager-app[dir="rtl"] .fm-modal-footer {
    justify-content: flex-start;
}

/* Upload Modal Styles (NEW) */
.fm-upload-modal-dialog {
    max-width: 600px; /* Wider modal for uploads */
}
.fm-upload-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 40vh; /* Limit height and allow scroll */
    min-height: 100px;
    overflow-y: auto;
    padding-right: 4px; /* Space for scrollbar */
}
.fm-upload-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid var(--fm-color-border);
    position: relative;
    overflow: hidden;
}
.fm-upload-file-icon {
    font-size: 1.5rem;
    color: var(--fm-color-secondary);
    flex-shrink: 0;
}
.fm-upload-file-info {
    flex-grow: 1;
    min-width: 0; /* Prevent overflow */
}
.fm-upload-file-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-upload-file-size {
    display: block;
    font-size: 0.75rem;
    color: var(--fm-color-secondary);
}
.fm-upload-file-status {
    display: block;
    font-size: 0.75rem;
    color: var(--fm-color-info);
    font-weight: 500;
}
.fm-upload-progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: var(--fm-color-gray);
}
.fm-upload-progress-fill {
    width: 0;
    height: 100%;
    background-color: var(--fm-color-primary);
    transition: width 0.3s ease;
}
/* Upload item states */
.fm-upload-file-item.uploading .fm-upload-file-status {
    color: var(--fm-color-primary);
}
.fm-upload-file-item.completed {
    border-color: var(--fm-color-success);
}
.fm-upload-file-item.completed .fm-upload-file-status {
    color: var(--fm-color-success);
}
.fm-upload-file-item.completed .fm-upload-progress-fill {
    background-color: var(--fm-color-success);
}
.fm-upload-file-item.failed {
    border-color: var(--fm-color-danger);
    background-color: rgba(var(--fm-color-danger-rgb), 0.05);
}
.fm-upload-file-item.failed .fm-upload-file-status {
    color: var(--fm-color-danger);
    font-size: 0.7rem; /* Allow more text for error */
    white-space: normal;
    word-break: break-word;
}
.fm-upload-file-item.failed .fm-upload-progress-fill {
    background-color: var(--fm-color-danger);
}

/* --- Batch Actions Bar (Updates for Clipboard) --- */
.fm-component-batch-actions-bar {
    /* ... existing styles ... */
    gap: 1rem; /* Adjust gap to manage internal containers */
}

/* Container for Selection state (Copy, Move, Delete) */
.fm-batch-selection-container {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Same as old bar gap */
    width: 100%;
    justify-content: space-between;
}

/* Container for Clipboard state (Paste, Cancel) */
.fm-batch-clipboard-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    justify-content: space-between;
}

/* Info text for clipboard */
.fm-batch-clipboard-info {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e5e7eb; /* text-gray-200 */
}

/* By default, hide the clipboard container */
.fm-batch-clipboard-container {
    display: none;
}

/* The batch-actions-buttons class is reused, just ensure it's flex */
.fm-component-batch-actions-bar .fm-batch-actions-buttons {
    display: flex;
    gap: 0.75rem;
}

/* --- Context Menu Styles (NEW) --- */
.fm-component-context-menu {
    position: absolute; /* Changed from fixed */
    z-index: var(--fm-z-high);
    background-color: #fff;
    border-radius: var(--fm-border-radius-md);
    box-shadow: var(--fm-box-shadow-md);
    min-width: 180px;
    padding: 0.5rem;
    display: none; /* Controlled by JS */
}
.fm-context-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fm-context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    user-select: none;
    transition: background-color 0.2s ease;
}
.fm-context-menu-item:hover {
    background-color: #f3f4f6; /* gray-100 */
}
.fm-context-menu-item .fm-context-menu-icon {
    font-size: 1.125rem; /* 18px */
    color: var(--fm-color-secondary);
}
.fm-context-menu-item .fm-context-menu-label {
    flex-grow: 1;
    color: var(--fm-color-dark);
}
/* Danger item (e.g., Delete) */
.fm-context-menu-item.danger {
    color: var(--fm-color-danger);
}
.fm-context-menu-item.danger .fm-context-menu-icon {
    color: var(--fm-color-danger);
}
.fm-context-menu-item.danger:hover {
    background-color: rgba(var(--fm-color-danger-rgb), 0.05);
}
.fm-context-menu-divider {
    height: 1px;
    background-color: var(--fm-color-border);
    margin: 0.5rem 0;
}

.file-manager-app .tree-toggle.fm-tree-loading {
    animation: fm-spin 1s linear infinite;
}

.file-manager-app .fm-search-result-path {
    /* Token styles */
    display: block!important;  /* Display below name */
    width: fit-content;
    font: 10px var(--fm-font-regular-en); /* xxs */
    line-height: 1.5;
    padding: 0 4px;
    border-radius: 4px;
    /* Specific styles */
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: left;
    background-color: var(--fm-color-gray);
    color: var(--fm-color-secondary);
    max-width: 100%; /* Ensure it doesn't overflow cell */
}


/* --- NEW: Picker Mode Styles --- */
.fm-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--fm-z-middle);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fm-picker-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.fm-picker-overlay.visible:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
}

.fm-picker-container {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 90vh; /* 90% of viewport height */
    background-color: #fff;
    border-radius: var(--fm-border-radius-lg);
    box-shadow: var(--fm-box-shadow-md);
    overflow: hidden;
    display: flex; /* Allow .file-manager-app to fill it */
    /* Animation */
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.fm-picker-overlay.visible .fm-picker-container {
    transform: translateY(0);
    opacity: 1;
}
/* --- END NEW --- */

/* Responsive Adjustments (Scoped) */
@media (max-width: 768px) {
    /* Mobile Sidebar */
    .file-manager-app .fm-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        transform: translateX(100%);
        border-left: none;
        border-right: 1px solid var(--fm-color-border);
    }
    .file-manager-app[dir="ltr"] .fm-sidebar {
        right: auto;
        left: 0;
        transform: translateX(-100%);
        border-right: none;
        border-left: 1px solid var(--fm-color-border);
    }
    .file-manager-app .fm-sidebar.is-mobile-open {
        transform: translateX(0);
    }

    /* Mobile Menu Button */
    .file-manager-app .fm-mobile-menu-btn {
        display: inline-flex;
    }
    .file-manager-app .fm-header-left {
        gap: 0.5rem;
    }
    .file-manager-app .fm-header-right {
        gap: 0.5rem;
    }

    .file-manager-app .fm-sidebar {
        width: 240px;
    }
    /* REMOVED: #searchInput width */

    .file-manager-app .fm-header-content {
        padding: 10px;
    }
    /* Hide specific table columns on mobile */
    .file-manager-app .fm-file-table .fm-hide-mobile {
        display: none;
    }
    .fm-component-batch-actions-bar {
        width: calc(100% - 2rem); /* Make batch bar wider on mobile */
        bottom: 0.5rem;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .fm-component-batch-actions-bar .fm-batch-actions-buttons {
        gap: 0.25rem;
    }

    /* --- NEW: Responsive Nav Bar --- */
    .file-manager-app .fm-nav-bar {
        flex-wrap: wrap; /* Allow search to wrap */
        gap: 0.5rem;
        padding: 8px 10px; /* Tighter padding */
    }
    .file-manager-app .fm-nav-left {
        min-width: 100%; /* Take full width */
        order: 1; /* Path bar first */
        gap: 0; /* Let buttons push path group */
    }
    .file-manager-app .fm-path-input-group {
        margin-left: 0.25rem; /* Tighter margin */
    }
    .file-manager-app[dir="rtl"] .fm-path-input-group {
        margin-left: 0;
        margin-right: 0.25rem;
    }
    .file-manager-app .fm-nav-right {
        min-width: 100%; /* Full width */
        order: 2; /* Search bar second */
    }
    .file-manager-app .fm-nav-right #searchInput {
        width: 100%; /* Full width search */
    }
    /* --- END NEW --- */

    /* --- NEW: Picker Responsive --- */
    .fm-picker-overlay {
        padding: 0; /* Full screen on mobile */
        border-radius: 0;
    }
    .fm-picker-container {
        max-height: 100vh; /* Full height */
        border-radius: 0;
    }
    /* --- END NEW --- */
}

@media (max-width: 576px) {
    /* REMOVED: .fm-current-path */

    /* Hide more table columns */
    .file-manager-app .fm-file-table .fm-hide-small-mobile {
        display: none;
    }
    .fm-modal-footer {
        flex-direction: column-reverse; /* Stack buttons on mobile */
        gap: 0.75rem;
    }
    .fm-modal-footer .fm-button {
        width: 100%; /* Make buttons full width */
    }
    .fm-upload-modal-dialog {
        max-width: 100%; /* Full width on mobile */
    }

    /* --- NEW: Responsive Nav Bar --- */
    .file-manager-app .fm-path-label {
        padding: 0 0.5rem; /* Tighter label padding */
    }
    .file-manager-app .fm-path-label span {
        display: none; /* Hide "Path:/" text, show only icon */
    }
    .file-manager-app .fm-path-input-group .fm-button {
        padding: 0 0.5rem; /* Tighter button padding */
    }

    /* --- NEW: Picker Footer Mobile --- */
    .file-manager-app .fm-picker-footer {
        flex-direction: column-reverse; /* Stack buttons */
        gap: 0.75rem;
        padding: 0.75rem;
    }
    .file-manager-app .fm-picker-footer .fm-button {
        width: 100%; /* Full width buttons */
    }
    /* --- END NEW --- */
}