/*
 * Electronic drawer (Tiroir électronique) as a file explorer: folders and
 * files in a grid, like a desktop file manager. Plain CSS because the
 * panel has no compiled Tailwind theme; colors come from Filament's
 * --gray-* / --primary-* vars.
 */

.tdr { display: flex; flex-direction: column; gap: 1.25rem; }

/* Breadcrumb and tools */
.tdr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.tdr-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--gray-500); min-width: 0; }
.tdr-trail a { color: var(--primary-600); font-weight: 500; }
.tdr-trail a:hover { text-decoration: underline; }
.tdr-trail [aria-current] { color: var(--gray-950); font-weight: 600; }
.tdr-trail-sep { width: 1rem; height: 1rem; color: var(--gray-400); }
.dark .tdr-trail a { color: var(--primary-400); }
.dark .tdr-trail [aria-current] { color: #fff; }

.tdr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tdr-search {
    display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; height: 2.375rem;
    border-radius: 0.5rem; background: #fff; border: 1px solid var(--gray-200); width: min(24rem, 100%);
}
.tdr-search:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); }
.tdr-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 0.875rem; color: var(--gray-950); padding: 0; }
.tdr-search input:focus { outline: none; box-shadow: none; }
.tdr-select {
    width: auto; max-width: 16rem; height: 2.375rem; border-radius: 0.5rem; border: 1px solid var(--gray-200); background-color: #fff;
    font-size: 0.875rem; color: var(--gray-700); padding: 0 2rem 0 0.75rem;
}
.dark .tdr-search, .dark .tdr-select { background-color: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: var(--gray-200); }
.dark .tdr-search input { color: #fff; }

.tdr-icon { width: 1.5rem; height: 1.5rem; color: var(--gray-500); flex-shrink: 0; }
.tdr-icon-sm { width: 1.125rem; height: 1.125rem; color: var(--gray-400); flex-shrink: 0; }
.tdr-icon-xs { width: 1rem; height: 1rem; }

/* Explorer grid */
.tdr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; align-items: start; }
.tdr-grid-lg { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.tdr-grid > .tdr-empty { grid-column: 1 / -1; }

.tdr-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 0.75rem 0.5rem 0.625rem; border-radius: 0.625rem; border: 1px solid transparent;
    text-align: center; min-width: 0; transition: background-color 0.12s, border-color 0.12s;
}
.tdr-item:hover, .tdr-item:focus-within { background: var(--primary-50); border-color: var(--primary-200); }
.dark .tdr-item:hover, .dark .tdr-item:focus-within { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); }
.tdr-item-name {
    font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--gray-950); width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.tdr-item-meta { font-size: 0.75rem; color: var(--gray-500); line-height: 1.3; width: 100%; overflow-wrap: anywhere; }
.dark .tdr-item-name { color: #fff; }
.dark .tdr-item-meta { color: var(--gray-400); }

/* Folder icon: amber manila folder with a sheet of paper, like Windows Explorer. */
.tdr-folder-art { position: relative; display: block; width: 4.25rem; height: 3.5rem; }
.tdr-grid-lg .tdr-folder-art { width: 5.25rem; height: 4.25rem; }
.tdr-folder-svg { width: 100%; height: 100%; }
.tdr-folder-back { fill: #e8a317; }
.tdr-folder-paper { fill: #fff; }
.tdr-folder-front { fill: #fcc93a; }
.tdr-item-folder:hover .tdr-folder-front { fill: #ffd451; }
.tdr-item-mine .tdr-folder-back { fill: var(--primary-700); }
.tdr-item-mine .tdr-folder-front { fill: var(--primary-500); }
.tdr-item-safe .tdr-folder-back { fill: #6b7280; }
.tdr-item-safe .tdr-folder-front { fill: #9ca3af; }
.tdr-item-muted .tdr-folder-back { fill: #cbd5e1; }
.tdr-item-muted .tdr-folder-front { fill: #e2e8f0; }
.tdr-item-person .tdr-folder-back { fill: #2563eb; }
.tdr-item-person .tdr-folder-front { fill: #60a5fa; }
.tdr-item-project .tdr-folder-back { fill: #059669; }
.tdr-item-project .tdr-folder-front { fill: #34d399; }
.tdr-folder-badge {
    position: absolute; right: 0.375rem; bottom: 0.375rem; width: 1.25rem; height: 1.25rem;
    color: rgb(0 0 0 / 0.45);
}
.tdr-item-mine .tdr-folder-badge, .tdr-item-person .tdr-folder-badge, .tdr-item-project .tdr-folder-badge, .tdr-item-safe .tdr-folder-badge { color: #fff; }

/* File icon: a sheet with a folded corner and its extension, or the image itself. */
.tdr-file-art { position: relative; display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.75rem; }
.tdr-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; border: 1px solid var(--gray-200); background: var(--gray-100); }
.tdr-sheet {
    --tdr-kind: #64748b;
    position: relative; display: flex; align-items: flex-end; justify-content: center; width: 3.5rem; height: 4.5rem;
    background: #fff; border: 1px solid var(--gray-300); border-radius: 0.25rem 0.875rem 0.25rem 0.25rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); padding-bottom: 1.375rem;
}
.tdr-sheet-fold {
    position: absolute; top: -1px; right: -1px; width: 0.875rem; height: 0.875rem;
    background: linear-gradient(225deg, transparent 50%, var(--gray-200) 50%); border-bottom-left-radius: 0.25rem;
}
.tdr-sheet-ext {
    max-width: 3.25rem; overflow: hidden; text-overflow: ellipsis; padding: 0.0625rem 0.3125rem; border-radius: 0.25rem;
    background: var(--tdr-kind); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tdr-kind-pdf .tdr-sheet { --tdr-kind: #dc2626; }
.tdr-kind-word .tdr-sheet { --tdr-kind: #2563eb; }
.tdr-kind-sheet .tdr-sheet { --tdr-kind: #16a34a; }
.tdr-kind-slides .tdr-sheet { --tdr-kind: #ea580c; }
.tdr-kind-image .tdr-sheet { --tdr-kind: #9333ea; }
.tdr-kind-archive .tdr-sheet { --tdr-kind: #a16207; }
.dark .tdr-sheet { background: var(--gray-800); border-color: var(--gray-600); }
.dark .tdr-sheet-fold { background: linear-gradient(225deg, transparent 50%, var(--gray-600) 50%); }
.dark .tdr-thumb { border-color: var(--gray-700); background: var(--gray-800); }

.tdr-file-badge {
    position: absolute; left: 50%; bottom: -0.25rem; transform: translateX(-50%); white-space: nowrap;
    padding: 0.0625rem 0.375rem; border-radius: 999px; font-size: 0.625rem; font-weight: 600;
    background: var(--primary-600); color: #fff;
}

/* Actions appear on hover or keyboard focus. */
.tdr-file-actions {
    position: absolute; top: 0.25rem; right: 0.25rem; display: flex; gap: 0.125rem; padding: 0.125rem;
    border-radius: 0.375rem; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
    opacity: 0; transition: opacity 0.12s;
}
.tdr-item-file:hover .tdr-file-actions, .tdr-item-file:focus-within .tdr-file-actions { opacity: 1; }
.tdr-file-actions a, .tdr-file-actions button { display: inline-flex; padding: 0.25rem; border-radius: 0.25rem; color: var(--gray-600); }
.tdr-file-actions a:hover, .tdr-file-actions button:hover { background: var(--gray-100); color: var(--primary-600); }
.dark .tdr-file-actions { background: var(--gray-900); border-color: rgb(255 255 255 / 0.1); }
.dark .tdr-file-actions a, .dark .tdr-file-actions button { color: var(--gray-300); }
.dark .tdr-file-actions a:hover, .dark .tdr-file-actions button:hover { background: rgb(255 255 255 / 0.08); }
@media (hover: none) { .tdr-file-actions { opacity: 1; } }

/* Open folder */
.tdr-folder-head {
    display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 0.75rem;
    background: #fff; border: 1px solid var(--gray-200);
}
.tdr-folder-head > div { flex: 1; min-width: 0; }
.tdr-folder-head-icon { display: flex; padding: 0.625rem; border-radius: 0.625rem; background: #fef3c7; }
.tdr-folder-head-icon .tdr-icon { color: #d97706; }
.tdr-folder-title { font-size: 1rem; font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.tdr-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--primary-600); white-space: nowrap; }
.tdr-link:hover { text-decoration: underline; }
.dark .tdr-folder-head { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); }
.dark .tdr-folder-head-icon { background: rgb(217 119 6 / 0.15); }
.dark .tdr-folder-title { color: #fff; }
.dark .tdr-link { color: var(--primary-400); }

.tdr-section { display: flex; flex-direction: column; gap: 0.625rem; }
.tdr-heading { font-size: 0.875rem; font-weight: 600; color: var(--gray-700); display: flex; align-items: center; gap: 0.5rem; }
.tdr-heading span { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border-radius: 999px; padding: 0 0.5rem; }
.dark .tdr-heading { color: var(--gray-200); }
.dark .tdr-heading span { background: rgb(255 255 255 / 0.08); color: var(--gray-400); }

.tdr-empty { font-size: 0.875rem; color: var(--gray-500); padding: 1rem 0; }
.tdr-more {
    align-self: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
    border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700);
}
.tdr-more:hover { border-color: var(--primary-300); color: var(--primary-700); }
.dark .tdr-more { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: var(--gray-200); }

@media (max-width: 640px) {
    .tdr-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
    .tdr-grid-lg { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
    .tdr-search { width: 100%; }
    .tdr-folder-head { flex-wrap: wrap; }
}