/* Trash Modal Styles */

.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

#trashModal .modal-content {
    max-width: 900px; /* Narrower modal */
    overflow-x: hidden; /* Hide horizontal scrollbar for the entire content */
}

#trashModal .modal-body {
    padding: 0; /* Remove padding to make list flush */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* Use fixed sensible column widths so long names truncate instead of overlapping other columns */
#trashModal .trash-header,
#trashModal .trash-item-header,
#trashModal .trash-file {
    display: grid;
    /* Checkbox | Toggle | Icon | Name (flex) | Uploader | Date */
    grid-template-columns: 40px 28px 36px 1fr 160px 160px;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    user-select: none;
    transition: background-color 0.15s ease;
}

#trashModal .trash-header {
    font-weight: 600;
    color: var(--text-color);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-top: 8px;
    padding-bottom: 8px;
    /* Use same columns as rows so headers align with data columns */
    grid-template-columns: 40px 28px 36px 1fr 160px 160px;
    gap: 12px;
}

#trashModal .trash-list {
    max-height: 60vh;
    overflow-y: auto;
}

#trashModal .trash-item {
    cursor: pointer;
}

#trashModal .trash-item-header {
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

#trashModal .trash-file {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    align-items: center;
}

#trashModal .trash-item:last-child,
#trashModal .trash-file:last-child {
    border-bottom: none;
}

#trashModal .trash-item-header:hover,
#trashModal .trash-file:hover {
    background-color: var(--hover-bg);
}

#trashModal .trash-item.selected .trash-item-header,
#trashModal .trash-item.selected .trash-file {
    /* Fallback a --hover-bg si --primary-color-muted no está definido */
    background-color: var(--primary-color-muted, var(--hover-bg));
}

#trashModal .trash-item.selected .name,
#trashModal .trash-item.selected .date {
    color: var(--text-color);
}

#trashModal .folder-toggle {
    cursor: pointer;
    font-size: 1.2em;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#trashModal .folder-icon,
#trashModal .file-icon {
    font-size: 1.4em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#trashModal .file-count {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    margin-left: 8px;
}

/* If file-count is inside the name cell, keep it inline and subtle */
#trashModal .trash-item-header .name .file-count,
#trashModal .trash-file .name .file-count {
    margin-left: 8px;
    font-size: 0.85em;
    color: var(--text-color-secondary);
}

#trashModal .trash-header input[type="checkbox"],
#trashModal .trash-item-header input[type="checkbox"],
#trashModal .trash-file input[type="checkbox"] {
    justify-self: center;
    accent-color: var(--primary-color);
    height: 18px;
    width: 18px;
}

#trashModal .trash-item-header .name,
#trashModal .trash-file .name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#/* File meta block: allow multi-line name + small parent path underneath */
#trashModal .file-meta { display: block; padding-left: 0; }
#trashModal .file-meta .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trashModal .file-meta .parent-path {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.72; /* slightly more muted */
    font-style: normal;
}

/* Parent folder badge shown next to file name when file was inside a folder */
#trashModal .parent-folder-badge {
    display: inline-block;
    background: rgba(0,0,0,0.06);
    color: var(--text-color-secondary);
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Force explicit grid column placement for file rows so they align with folder headers */
#trashModal .trash-file {
    display: grid;
    grid-template-columns: 40px 28px 36px 1fr 160px 160px;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
}

#trashModal .trash-file > input[type="checkbox"] { grid-column: 1; justify-self: center; }
#trashModal .trash-file > .folder-toggle-placeholder { grid-column: 2; justify-self: center; }
#trashModal .trash-file > .file-icon { grid-column: 3; justify-self: center; }
#trashModal .trash-file > .file-meta { grid-column: 4; justify-self: start; padding-left: 0; }
#trashModal .trash-file > .uploader { grid-column: 5; justify-self: start; }
#trashModal .trash-file > .date { grid-column: 6; justify-self: end; }

/* Ensure folder header children also explicitly occupy the intended columns */
#trashModal .trash-folder .trash-item-header > input[type="checkbox"] { grid-column: 1; justify-self: center; }
#trashModal .trash-folder .trash-item-header > .folder-toggle { grid-column: 2; justify-self: center; }
#trashModal .trash-folder .trash-item-header > .folder-icon { grid-column: 3; justify-self: center; }
#trashModal .trash-folder .trash-item-header > .name { grid-column: 4; justify-self: start; }
#trashModal .trash-folder .trash-item-header > .uploader { grid-column: 5; justify-self: start; }
#trashModal .trash-folder .trash-item-header > .date { grid-column: 6; justify-self: end; }

#trashModal .trash-item-header .date,
#trashModal .trash-file .date {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

#trashModal .trash-folder-content {
    background-color: var(--bg-secondary);
}

#trashModal .trash-nested-file {
    opacity: 0.95;
}

/* Override default .file-icon styling inside trash modal to remove aura */
#trashModal .file-icon {
    font-size: 1.2em;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    background: transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-right: 8px;
}

/* Slightly increase space between icon and name in trash rows */
#trashModal .trash-item-header .name,
#trashModal .trash-file .name {
    padding-left: 4px;
}

/* Toggle icon rotation */
#trashModal .folder-toggle {
    transition: transform 0.18s ease;
    transform: rotate(0deg);
}
#trashModal .folder-toggle.open {
    transform: rotate(180deg);
}

/* Placeholder for the toggle column (keeps alignment) */
#trashModal .folder-toggle-placeholder,
#trashModal .icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Improve visual separation for folder cards and nested files */
/* Folder card look and nested contents */
#trashModal .trash-folder {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

/* Ensure folder header uses same grid columns as file rows so names align */
#trashModal .trash-folder .trash-item-header {
    display: grid;
    grid-template-columns: 40px 28px 36px 1fr 160px 160px;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
}

/* make name flexible */
#trashModal .trash-folder .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inner content area for folder */
#trashModal .trash-folder-content {
    padding: 8px 12px 12px 12px;
    background: rgba(0,0,0,0.03);
}

/* Fix sizes and alignment for folder header: checkbox, toggle and folder icon */
#trashModal .trash-folder .trash-item-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    flex: 0 0 24px; /* reserve a small fixed space for checkbox */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: auto;
    -webkit-appearance: checkbox;
    background: transparent !important;
    border: none;
}

#trashModal .trash-folder .trash-item-header .folder-toggle {
    flex: 0 0 28px;
    margin-right: 6px;
}

#trashModal .trash-folder .trash-item-header .folder-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: var(--accent-color);
    background: transparent !important;
    border-radius: 6px;
    box-shadow: none !important;
    margin-right: 8px;
}

#trashModal .trash-folder .trash-item-header .name { flex: 1; }

/* Ensure icon font renders and no pseudo-elements draw boxes */
#trashModal .trash-item-header .material-icons-round {
    font-family: 'Material Icons Round', 'Material Icons', sans-serif !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px !important;
    line-height: 1;
    color: inherit !important;
}

#trashModal .trash-item-header *::before,
#trashModal .trash-item-header *::after {
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
}

#trashModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    gap: 12px;
}

#trashModal .modal-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

#trashModal .modal-header .header-icon {
    font-size: 28px;
    color: var(--accent-color);
}

#trashModal .modal-header .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

#trashModal input[type="search"]#trashSearch {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
}

#trashModal .trash-main {
    display: block;
    padding: 10px 20px 20px 20px;
}

#trashModal .trash-list-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#trashModal .trash-list-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 4px;
}

#trashModal .trash-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

/* details panel removed */

@media (max-width: 880px) {
    #trashModal .trash-main { grid-template-columns: 1fr; }
    #trashModal .trash-details-panel { order: 2; }
}

/* Nested file rows inside folder card */
#trashModal .trash-folder-content .trash-nested-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: transparent;
}

#trashModal .trash-folder-content .trash-nested-file:last-child { margin-bottom: 0; }

#trashModal .trash-folder-content .trash-nested-file .file-icon { font-size: 1.1em; }

#trashModal .trash-folder-content .trash-nested-file .name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


/* Ensure placeholder occupies the same space as toggle icon */
#trashModal .folder-toggle-placeholder {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#trashModal .folder-toggle {
    margin-right: 6px;
}

/* Override para problemas visuales: forzar color de selección suave y eliminar sombras indeseadas */
#trashModal .trash-item.selected .trash-item-header {
    background-color: rgba(250,78,73,0.08) !important; /* tono acento suave */
    color: var(--text-color) !important;
    box-shadow: none !important;
}

#trashModal .trash-item-header input[type="checkbox"] {
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    border-radius: 4px !important;
}

#trashModal .trash-item-header input[type="checkbox"]:checked {
    accent-color: var(--accent-color) !important;
}

/* Si todavía hay una 'sombra negra' en el header, quitar cualquier filtro o sombra aplicada */
#trashModal .trash-item-header,
#trashModal .trash-item-header * {
    filter: none !important;
    box-shadow: none !important;
}

/* Asegurar un color suave también en hover/active/focus (cuando la clase selected no esté presente) */
#trashModal .trash-item-header:hover,
#trashModal .trash-item-header:active,
#trashModal .trash-item:active .trash-item-header,
#trashModal .trash-item:focus-within .trash-item-header {
    background-color: rgba(250,78,73,0.08) !important;
    color: var(--text-color) !important;
}

#trashModal .modal-footer .actions {
    display: flex;
    gap: 8px;
}

/* Make restore/delete buttons the same size */
#trashModal .modal-footer .actions button {
    min-width: 120px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#trashModal #selectionInfo {
    font-size: 0.9em;
    color: var(--text-color-secondary);
}

#trashModal .empty {
    text-align: center;
    padding: 40px;
    color: var(--text-color-secondary);
    font-size: 1.1rem;
}

/* Redesigned trash modal styles (overrides and new layout) */
#trashModal .trash-redesign {
    max-width: 1100px;
    width: calc(100% - 48px);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}

#trashModal .trash-redesign .tr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}

#trashModal .tr-left { display:flex; align-items:center; gap:12px; }
#trashModal .tr-icon { font-size:28px; color:var(--accent-color); }
#trashModal .tr-title { margin:0; font-size:1.15rem; }
#trashModal .tr-subtitle { font-size:0.85rem; color:var(--text-color-secondary); }

#trashModal .tr-actions { display:flex; align-items:center; gap:8px; }
#trashModal .tr-actions .search-wrap { position:relative; display:flex; align-items:center; }
#trashModal .tr-actions .search-wrap input[type="search"] { padding:8px 12px; border-radius:8px; border:1px solid var(--border-color); min-width:260px; }
#trashModal .tr-actions .search-wrap i { position:absolute; right:8px; color:var(--text-color-secondary); pointer-events:none; }
#trashModal .btn-ghost { background:transparent; border:1px solid var(--border-color); padding:8px 12px; border-radius:8px; color:var(--text-color); }

#trashModal .tr-body { padding:14px 18px; }
#trashModal .tr-controls { margin-bottom:8px; display:flex; align-items:center; }

#trashModal .tr-list { display:flex; flex-direction:column; gap:6px; }
#trashModal .tr-list .trash-item { background: transparent; border-bottom: 1px solid var(--border-color); padding:6px 8px; display:grid; grid-template-columns: 36px 28px 1fr 120px 140px; align-items:center; gap:8px; }
#trashModal .tr-list .trash-item .file-icon { grid-column:2; margin-right:0; }
#trashModal .tr-list .trash-item input[type="checkbox"] { grid-column:1; justify-self:center; }
#trashModal .tr-list .trash-item .name { grid-column:3; padding-left:0; font-weight:600; }
#trashModal .tr-list .trash-item .uploader { grid-column:4; color:var(--text-color-secondary); font-size:0.9rem; }
#trashModal .tr-list .trash-item .date { grid-column:5; color:var(--text-color-secondary); font-size:0.9rem; text-align:right; }

#trashModal .tr-list .trash-item:hover { background: var(--hover-bg); }

#trashModal .tr-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-top:1px solid var(--border-color); background:transparent; }
#trashModal .tr-footer .actions { display:flex; gap:8px; }
#trashModal .tr-footer .actions button { min-width:120px; padding:8px 12px; border-radius:8px; }

@media (max-width:900px) {
    #trashModal .tr-list .trash-item { grid-template-columns: 36px 28px 1fr 110px 100px; }
    #trashModal .tr-actions .search-wrap input[type="search"] { min-width: 160px; }
}