/*
 * DESKTOP-FILES.CSS - Visitors' folders, text documents and the Rubbish bin
 * (js/core/desktop-files.js): folder windows, the inline rename box, and the "full bin" mark.
 */
.df-window { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); color: var(--win-text); }
.df-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; background: var(--ui-face); color: var(--ui-text); border-bottom: 1px solid var(--ui-dark); font-size: 12px; }
.df-bar button { padding: 2px 8px; font: inherit; cursor: pointer; }
.df-bar span { margin-left: auto; opacity: .8; }
.df-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; padding: 8px; align-content: start; overflow-y: auto; }
.df-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; background: none; border: 1px dotted transparent; color: inherit; font: 12px var(--user-font, Tahoma, sans-serif); cursor: default; word-break: break-word; }
.df-item img { width: 32px; height: 32px; image-rendering: pixelated; }
.df-item:hover, .df-item:focus { border-color: currentColor; outline: none; }
.df-empty { padding: 14px; font-size: 12px; opacity: .75; }
/* Inline rename box on a desktop icon */
.desktop-icon .rename-box { width: 100%; font: inherit; font-size: 12px; text-align: center; color: #000; background: #fff; border: 1px solid #000; }
/* Rubbish bin with something in it: a little paper sticking out */
.desktop-icon.rubbish-full .icon-art::after {
    content: ''; position: absolute; left: 50%; top: 2px; width: 14px; height: 10px; margin-left: -7px;
    background: #fff; border: 1px solid #555; transform: rotate(-12deg);
}

/* Dragging an icon over the Rubbish bin (or one of your folders) lights it up (desktop-icons.js) */
.desktop-icon.drop-target { background: rgba(255, 255, 255, 0.28); outline: 2px dashed #fff; outline-offset: -2px; border-radius: 3px; }
.desktop-icon.drop-target .icon-art { transform: scale(1.15); transition: transform .12s; }
.desktop-icon.drop-target span { background: var(--title-1, #000080); color: #fff; }
/* Protected icons (Home, Resume...) can't be binned: the bin shows a red "no" look instead */
.desktop-icon.drop-target.drop-refuse { background: rgba(200, 0, 0, 0.3); outline-color: #ff5a5a; }
.desktop-icon.drop-target.drop-refuse span { background: #a00000; }
/* An open folder / Rubbish window being dragged onto */
.df-window.drop-target { outline: 2px dashed var(--title-1, #000080); outline-offset: -4px; background: rgba(0, 0, 128, 0.06); }
.df-window.drop-target.drop-refuse { outline-color: #c00000; background: rgba(200, 0, 0, 0.08); }