/* ============================================================
 * DocumentsUpload V2 — page-specific styles
 * ------------------------------------------------------------
 * Owns .du-* classes (dropzone, file rows, doctype dropdown,
 * spinner). The .is-pop-* shell comes from redesign-popup-shell.css.
 * ============================================================ */

/* Spinner keyframe used by the inline footer-meta "Spašavanje…" indicator
   and by Syncfusion-provided spinner icons we insert into buttons. */
@keyframes du-spin { to { transform: rotate(360deg); } }
.du-spin { animation: du-spin .9s linear infinite; }

/* ── Spinner overlay positioning inside the popup ─────────── */
.du-spinner.e-spin-overlay { border-radius: var(--is-radius-lg); }

/* ── SfUploader — dropzone look ───────────────────────────── */
.du-uploader { position: relative; }
.du-uploader .e-upload {
    border: 1.5px dashed var(--is-border-3);
    border-radius: var(--is-radius-md);
    background: var(--is-bg-surface-3);
    padding: 14px 16px;
    transition: background .15s, border-color .15s;
}
.du-uploader .e-upload:hover,
.du-uploader .e-upload.e-upload-drag,
.du-uploader .e-upload.e-upload-drag-hover {
    background: var(--is-brand-blue-100);
    border-color: var(--is-brand-blue);
}
.du-uploader.is-invalid .e-upload {
    border-color: var(--is-danger);
    background: var(--is-danger-bg);
}

/* Header row inside SfUploader: "Drop files here or" + Browse button */
.du-uploader .e-file-drop {
    font: 600 13.5px var(--is-font-sans);
    color: var(--is-fg-1);
}
.du-uploader .e-css.e-btn.e-flat.e-primary,
.du-uploader .e-file-select-wrap .e-css.e-btn {
    background: #fff;
    color: var(--is-brand-blue-700);
    border: 1px solid var(--is-border-3);
    border-radius: var(--is-radius-xs);
    height: 30px;
    padding: 0 12px;
    font: 600 12.5px var(--is-font-sans);
    box-shadow: none;
}
.du-uploader .e-css.e-btn.e-flat.e-primary:hover,
.du-uploader .e-file-select-wrap .e-css.e-btn:hover {
    background: var(--is-brand-blue-100);
    border-color: var(--is-brand-blue);
    color: var(--is-brand-blue-700);
}

/* Selected files list — visual sibling of the .du-file rows in the mock */
.du-uploader .e-upload-files {
    margin-top: 10px;
    border-top: 0;
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 0;
}
.du-uploader .e-upload-file-list {
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-sm);
    background: #fff;
    padding: 8px 10px;
    margin: 0;
}
.du-uploader .e-upload-file-list:hover { border-color: var(--is-border-2); }
.du-uploader .e-upload-file-list.e-upload-fails {
    border-color: rgba(199, 59, 59, .35);
    background: var(--is-danger-bg);
}
.du-uploader .e-upload-file-list.e-upload-success {
    border-color: rgba(31, 138, 91, .35);
}

/* File name + size */
.du-uploader .e-file-container .e-file-name {
    font: 600 12.5px var(--is-font-sans);
    color: var(--is-fg-1);
}
.du-uploader .e-file-container .e-file-size,
.du-uploader .e-file-container .e-file-type {
    font: 500 11px var(--is-font-mono);
    color: var(--is-fg-3);
}

/* Per-file progress bar */
.du-uploader .e-progress-bar-text { display: none; }
.du-uploader .e-progress-bar {
    background: var(--is-brand-blue) !important;
    height: 3px !important;
}
.du-uploader .e-upload-file-list.e-upload-success .e-progress-bar { background: var(--is-success) !important; }
.du-uploader .e-upload-file-list.e-upload-fails   .e-progress-bar { background: var(--is-danger)  !important; }

/* Per-file remove (×) icon */
.du-uploader .e-icons.e-file-remove-btn,
.du-uploader .e-icons.e-file-delete-btn,
.du-uploader .e-icons.e-file-abort-btn {
    width: 26px; height: 26px;
    border-radius: 6px;
    color: var(--is-fg-3);
    transition: background .12s, color .12s;
}
.du-uploader .e-icons.e-file-remove-btn:hover,
.du-uploader .e-icons.e-file-delete-btn:hover,
.du-uploader .e-icons.e-file-abort-btn:hover {
    background: var(--is-danger-bg);
    color: var(--is-danger);
}

/* ── SfDropDownList — document type ───────────────────────── */
.du-doctype.e-ddl,
.du-doctype .e-input-group {
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-xs) !important;
    background: #fff !important;
    height: 38px !important;
    box-shadow: none !important;
}
.du-doctype .e-input-group input {
    font: 400 13.5px var(--is-font-sans) !important;
    color: var(--is-fg-1) !important;
    padding-left: 12px !important;
}
.du-doctype .e-input-group.e-input-focus {
    border-color: var(--is-action-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15) !important;
}
.du-doctype .e-input-group .e-input-group-icon { color: var(--is-fg-3) !important; }

/* "Save new document type" button inside the NoRecordsTemplate */
.du-doctype-create {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--is-radius-xs);
    border: 1px solid var(--is-border-3);
    background: #fff;
    color: var(--is-brand-blue-700);
    cursor: pointer;
    font: 600 12.5px var(--is-font-sans);
    transition: background .15s, border-color .15s, color .15s;
}
.du-doctype-create:hover {
    background: var(--is-brand-blue-100);
    border-color: var(--is-brand-blue);
}
.du-doctype-create i { font-size: 11px; }