/* file_explorer.css */

/* Main Explorer Layout */
.explorer-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-explorer-window);
}

/* Toolbar */
.explorer-toolbar {
    padding: 4px;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 4px;
    align-items: center;
}

.toolbar-button {
    height: 22px;
    padding: 0 8px;
    background: linear-gradient(to bottom, var(--bg-lightest), var(--bg-light));
    border: 1px solid var(--border-light);
    border-radius: 2px;
    cursor: pointer;
    color: var(--purple-dark);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--system-font);
}

.toolbar-button:hover {
    background: linear-gradient(to bottom, var(--bg-light), var(--bg-mid));
}

.toolbar-button:active {
    background: var(--bg-mid);
    border-color: var(--border-dark);
}

.toolbar-button:disabled {
    background: var(--ui-disabled-bg);
    color: var(--text-disabled);
    cursor: default;
    border-color: var(--ui-disabled-border);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background-color: var(--border-light);
    margin: 0 4px;
}

/* Explorer Menu Bar */
.explorer-menubar {
    height: 20px;
    background: linear-gradient(to right, var(--bg-light), var(--bg-mid));
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 4px;
    padding: 2px 4px;
    position: relative;
}

.menu-item {
    position: relative;
    padding: 2px 8px;
    color: var(--text-black);
    cursor: pointer;
    font-size: 12px;
    border: 1px solid transparent;
    user-select: none;
}

.menu-item:hover,
.menu-item.active {
    background-color: var(--bg-mid);
    border: 1px solid var(--border-dark);
}

.menu-dropdown {
    position: absolute;
    background-color: var(--bg-lightest);
    border: 1px solid var(--border-light);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 180px;
    padding: 2px;
    margin-top: -1px;
    margin-left: -1px;
}

.menu-item-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 4px 16px;
    border: none;
    background: none;
    color: var(--text-black);
    font-size: 12px;
    font-family: var(--system-font);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.menu-item-button:hover {
    background-color: var(--bg-mid);
}

.menu-item-button:disabled {
    color: var(--text-disabled);
    cursor: default;
}

.menu-dropdown hr {
    margin: 2px 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

.menu-shortcut {
    margin-left: 32px;
    color: var(--text-muted);
    font-size: 11px;
}

/* Submenu Indicators */
.submenu-container {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
}

.has-submenu {
    position: relative;
}

.has-submenu::after {
    content: '►';
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: var(--border-dark);
}

.has-submenu:hover .submenu-container {
    display: block;
}

/* Universal file item selection styles */
.file-item {
    border: 1px solid transparent;
}

.file-item.selected {
    background-color: var(--bg-mid-selected);
    border: 1px solid var(--border-dark);
}

.file-item:hover {
    background-color: var(--bg-dark-transparent);
    border: 1px solid var(--border-light);
}

/* Icon View */
.file-list.view-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    gap: 4px;  /* Reduced from 8px */
    padding: 8px;
    justify-content: start;
    align-content: start;  /* Added this to prevent vertical stretching */
}

.view-icons .file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 68px;  /* Reduced from 76px */
    padding: 4px;
}

.view-icons .file-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.view-icons .file-label {
    text-align: center;
    font-size: 11px;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* List View */
.file-list.view-list {
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.view-list .file-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 4px;
    gap: 4px;
    height: 22px;
}

.view-list .file-icon {
    width: 16px;
    height: 16px;
    margin: 0;
}

.view-list .file-label {
    text-align: left;
    font-size: 11px;
    flex-grow: 1;
}

/* Details View */
.file-list.view-details {
    display: table;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Force the list to take up minimum space rather than expanding */
.view-details {
    height: min-content;
}

.view-details .details-header {
    display: table-row;
    background-color: var(--bg-lightest);
    height: 18px; /* Fixed header height */
}

.view-details .header-cell {
    display: table-cell;
    height: 18px; /* Match header height */
    padding: 0 8px;
    font-size: 11px;
    color: var(--purple-dark);
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    vertical-align: middle;
    line-height: 18px; /* Match height for vertical centering */
}

.view-details .file-item {
    display: table-row;
    height: 18px; /* Fixed row height */
}

.view-details .file-icon {
    display: table-cell;
    width: 24px;
    height: 18px; /* Match row height */
    padding: 1px;
    vertical-align: middle;
}

.view-details .file-icon img {  /* Added to control icon size within cell */
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.view-details .file-label {
    display: table-cell;
    height: 18px; /* Match row height */
    padding: 0 8px;
    font-size: 11px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px; /* Match height for vertical centering */
}

.view-details .file-details {
    display: table-cell;
    height: 18px; /* Match row height */
    padding: 0 8px;
    font-size: 11px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px; /* Match height for vertical centering */
}

/* Column widths */
.view-details .file-icon {
    width: 24px;
}

.view-details .file-label {
    width: 200px;
}

.view-details .file-details.type {
    width: 100px;
}

.view-details .file-details.size {
    width: 80px;
}

.view-details .file-details.modified {
    width: auto;
}

/* Address Bar */
.address-bar {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: var(--text-light);
    border: 1px inset var(--border-light);
    padding: 2px 4px;
    margin: 0 4px;
}

.path-segments {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
}

.path-segment {
    color: var(--purple-dark);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
}

.path-segment:hover {
    background-color: var(--bg-dark-transparent);
    text-decoration: underline;
}

.path-separator {
    color: var(--border-dark);
    margin: 0 4px;
}

/* Tree View */
.folder-tree {
    width: 200px;
    min-width: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    background-color: var(--text-light);
    border-right: 1px solid var(--border-light);
    flex-shrink: 0;
}

.tree-container {
    display: flex;
    flex-direction: column;
}

.tree-item {
    display: flex;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    user-select: none;
    color: var(--purple-dark);
    font-size: 12px;
    white-space: nowrap;
    gap: 4px;
}

.expand-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: var(--border-dark);
    flex-shrink: 0;
}

.tree-item .file-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tree-label {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-branch {
    margin-left: 20px;
}

.tree-item:hover {
    background-color: var(--bg-dark-transparent);
}

.tree-container.selected > .tree-item {
    background-color: var(--bg-mid-selected);
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--bg-lightest);
    border: 1px solid var(--border-light);
    border-radius: 2px;
    padding: 4px 0;
    min-width: 180px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    user-select: none;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 6px 16px;
    text-align: left;
    border: none;
    background: none;
    color: var(--purple-dark);
    font-size: 12px;
    font-family: var(--system-font);
    cursor: pointer;
}

.context-menu button:hover:not(:disabled) {
    background-color: var(--bg-mid);
}

.context-menu button:disabled {
    color: var(--text-disabled);
    cursor: default;
}

.context-menu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

/* Main Content Area */
.explorer-content {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--bg-explorer-window);
}

.file-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2px;
}

/* Status Bar */
.explorer-statusbar {
    height: 20px;
    padding: 2px 8px;
    background: linear-gradient(to right, var(--bg-light), var(--bg-mid));
    border-top: 1px solid var(--border-light);
    color: var(--purple-dark);
    font-size: 11px;
    display: flex;
    align-items: center;
}

/* Scrollbars */
.folder-tree::-webkit-scrollbar,
.file-list::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.folder-tree::-webkit-scrollbar-track,
.file-list::-webkit-scrollbar-track {
    background: var(--bg-lightest);
    border-left: 1px solid var(--border-light);
}

.folder-tree::-webkit-scrollbar-thumb,
.file-list::-webkit-scrollbar-thumb {
    background-color: var(--border-light);
    border: 3px solid var(--bg-lightest);
    border-radius: 8px;
}

.folder-tree::-webkit-scrollbar-thumb:hover,
.file-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-dark);
}

/* Firefox scrollbar */
.folder-tree,
.file-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-lightest);
}

/* Rename Input */
.rename-input {
    width: 100%;
    padding: 2px;
    border: 1px solid var(--border-light);
    background: white;
    color: var(--purple-dark);
    font-size: 11px;
    outline: none;
}

.rename-input:focus {
    border-color: var(--border-dark);
    box-shadow: 0 0 3px var(--bg-mid-transparent);
}

.file-icon {
    position: relative;
}

#desktop-area.drag-over {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.desktop-icon .shortcut-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}