/* =========================================================================
   upload.css — 上传组件的辅助样式（Tailwind 不便表达的部分）

   引入方式：
     <link rel="stylesheet" href="/vendor/upload/upload.css">

   约定：
     - 颜色尽量用 currentColor / CSS 变量，不写硬编码 hex
     - 不依赖任何 JS 框架（Alpine / Preline 自行处理）
   ========================================================================= */

/* ---------- Spinner ---------- */
@keyframes upload-spin {
    to { transform: rotate(360deg); }
}

.upload-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: upload-spin 0.8s linear infinite;
    display: inline-block;
    opacity: 0.7;
}

/* ---------- Drop zone 高亮态 ---------- */
.upload-dropzone {
    border: 2px dashed #cbd5e1; /* slate-300 */
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-dropzone.is-dragover {
    border-color: #2563eb; /* blue-600 */
    background-color: #eff6ff; /* blue-50 */
}

.upload-dropzone.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- File row hover ---------- */
.upload-file-row {
    transition: background-color 0.12s ease;
}

.upload-file-row:hover {
    background-color: rgba(248, 250, 252, 0.8); /* slate-50/80 */
}

/* ---------- Image thumbnail ---------- */
.upload-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #f1f5f9; /* slate-100 */
}

.upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Progress bar ---------- */
.upload-progress {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.4); /* slate-900/40 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Modal overlay backdrop (兼容 Preline hs-overlay) ---------- */
.upload-overlay-backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}

/* ---------- Image preview overlay ---------- */
.upload-preview-img {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
    user-select: none;
}

/* ---------- Truncate file name ---------- */
.upload-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Checkbox helper (媒体库 picker 选中态) ---------- */
.upload-picker-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
    user-select: none;
}

.upload-picker-card.is-selected {
    box-shadow: 0 0 0 2px #2563eb, 0 4px 12px -2px rgba(37, 99, 235, 0.4);
}

.upload-picker-card.is-selected .upload-picker-check {
    opacity: 1;
    transform: scale(1);
}

.upload-picker-check {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ---------- Drag handle (多文件排序) ---------- */
.upload-drag-handle {
    cursor: grab;
}

.upload-drag-handle:active {
    cursor: grabbing;
}

.upload-drag-ghost {
    opacity: 0.4;
}

/* ---------- Error toast inline ---------- */
.upload-error {
    color: #e11d48; /* rose-600 */
    font-size: 0.75rem;
    line-height: 1rem;
}