/*
   Zajednički tematski sloj za stranicu Paketi.
   Izolovani stilovi stranice sadrže istorijske boje Upload ekrana, pa su
   ranije ostajale iste kada korisnik promijeni temu. Ovaj sloj koristi
   zajedničke --bm-* promjenljive aktivne teme i učitava se poslije svih
   tematskih i izolovanih stilova.
*/
html:root[data-theme] body :is(.upload-page, .upload-confirm-modal) {
    --upload-text: var(--bm-text-primary, var(--bm-text, currentColor));
    --upload-secondary: var(--bm-text-secondary, var(--bm-text-muted, currentColor));
    --upload-surface: var(--bm-surface, transparent);
    --upload-raised: var(--bm-surface-raised, var(--bm-surface, transparent));
    --upload-border: var(--bm-border, rgba(127, 127, 127, 0.22));
    --upload-accent: var(--bm-accent, currentColor);
    --upload-accent-2: var(--bm-accent-2, var(--bm-accent, currentColor));
    --upload-bg: var(--bm-bg, var(--bm-surface, #ffffff));
    --upload-progress-track: color-mix(in srgb, var(--upload-secondary) 19%, transparent);
    --upload-progress-start: var(--upload-accent);
    --upload-progress-end: var(--upload-accent-2);
}

html:root[data-theme] body .upload-page {
    color: var(--upload-text) !important;
}

html:root[data-theme] body .upload-page :is(.upload-panel, .upload-confirm-details),
html:root[data-theme] body .upload-confirm-modal {
    color: var(--upload-text) !important;
    background: var(--upload-surface) !important;
    border-color: var(--upload-border) !important;
    box-shadow: var(--bm-shadow-panel, var(--bm-shadow-soft, none)) !important;
}

html:root[data-theme] body .upload-page :is(
    .upload-header h1,
    .upload-panel h2,
    .bulk-update-box h3,
    .file-drop-title,
    .status-item strong,
    .progress-meta,
    .progress-meta strong,
    .upload-progress-percent
),
html:root[data-theme] body .upload-confirm-modal :is(.bm-modal-title, p, strong) {
    color: var(--upload-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .upload-page :is(
    .upload-lead,
    .panel-title-row p,
    .bulk-update-box p,
    .file-drop-detail,
    .progress-details,
    .kind-button small,
    .status-item span,
    .upload-progress-status,
    .upload-progress-details
),
html:root[data-theme] body .upload-confirm-modal :is(small, .upload-confirm-details) {
    color: var(--upload-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .upload-page :is(.eyebrow, .status-kind, .upload-progress-kicker) {
    color: var(--upload-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .upload-page :is(.package-badge, .kind-button, .ghost-button),
html:root[data-theme] body .upload-confirm-modal .ghost-button {
    color: var(--upload-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--upload-raised) !important;
    border-color: var(--upload-border) !important;
}

html:root[data-theme] body .upload-page :is(.kind-button:hover:not(:disabled), .kind-button.active, .ghost-button:hover:not(:disabled)),
html:root[data-theme] body .upload-confirm-modal .ghost-button:hover:not(:disabled) {
    color: var(--upload-accent) !important;
    -webkit-text-fill-color: currentColor !important;
    background: color-mix(in srgb, var(--upload-accent) 12%, var(--upload-raised)) !important;
    border-color: var(--upload-accent) !important;
}

html:root[data-theme] body .upload-page .file-drop {
    color: var(--upload-text) !important;
    background: var(--upload-raised) !important;
    border-color: color-mix(in srgb, var(--upload-accent) 62%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page .file-drop:hover {
    background: color-mix(in srgb, var(--upload-accent) 8%, var(--upload-raised)) !important;
    border-color: var(--upload-accent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--upload-accent) 45%, transparent) !important;
}

html:root[data-theme] body .upload-page :is(.package-badge, .file-drop-icon, .file-drop-action) {
    color: var(--upload-accent) !important;
    -webkit-text-fill-color: currentColor !important;
    background: color-mix(in srgb, var(--upload-accent) 12%, var(--upload-raised)) !important;
    border-color: color-mix(in srgb, var(--upload-accent) 34%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page .file-drop--selected {
    color: var(--upload-text) !important;
    background: color-mix(in srgb, var(--upload-accent-2) 10%, var(--upload-raised)) !important;
    border-color: var(--upload-accent-2) !important;
}

html:root[data-theme] body .upload-page .file-drop--selected .file-drop-icon {
    color: var(--upload-accent-2) !important;
    background: color-mix(in srgb, var(--upload-accent-2) 13%, var(--upload-raised)) !important;
    border-color: color-mix(in srgb, var(--upload-accent-2) 36%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page .file-drop--selected .file-drop-action {
    color: var(--upload-accent-2) !important;
}

html:root[data-theme] body .upload-page :is(.primary-button, .upload-submit-button),
html:root[data-theme] body .upload-confirm-modal .primary-button {
    color: var(--upload-bg) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--upload-accent) !important;
    border-color: var(--upload-accent) !important;
}

html:root[data-theme] body .upload-page :is(.primary-button, .upload-submit-button):hover:not(:disabled),
html:root[data-theme] body .upload-confirm-modal .primary-button:hover:not(:disabled) {
    background: var(--upload-accent-2) !important;
    border-color: var(--upload-accent-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--upload-accent) 18%, transparent) !important;
}

html:root[data-theme] body .upload-page :is(.bulk-update-stop-button, .upload-cancel-button),
html:root[data-theme] body .upload-confirm-modal :is(.bulk-update-stop-button, .upload-cancel-button) {
    color: var(--upload-accent-2) !important;
    -webkit-text-fill-color: currentColor !important;
    background: color-mix(in srgb, var(--upload-accent-2) 10%, var(--upload-raised)) !important;
    border-color: color-mix(in srgb, var(--upload-accent-2) 38%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page :is(.status-item, .bulk-update-box),
html:root[data-theme] body .upload-confirm-modal .upload-confirm-details--stacked > div {
    border-color: var(--upload-border) !important;
}

html:root[data-theme] body .upload-page :is(.status-item a, .upload-result a) {
    color: var(--upload-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .upload-page .upload-result {
    color: var(--upload-accent-2) !important;
    background: color-mix(in srgb, var(--upload-accent-2) 11%, var(--upload-raised)) !important;
    border: 1px solid color-mix(in srgb, var(--upload-accent-2) 35%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page .upload-alert-warning {
    color: var(--upload-accent-2) !important;
    background: color-mix(in srgb, var(--upload-accent-2) 12%, var(--upload-raised)) !important;
    border: 1px solid color-mix(in srgb, var(--upload-accent-2) 38%, var(--upload-border)) !important;
}

html:root[data-theme] body .upload-page .upload-alert-error {
    color: var(--upload-accent) !important;
    background: color-mix(in srgb, var(--upload-accent) 12%, var(--upload-raised)) !important;
    border: 1px solid color-mix(in srgb, var(--upload-accent) 38%, var(--upload-border)) !important;
}

/* Obje progressa uvijek koriste boju akcenta aktivne teme. Ista pravila važe
   za pojedinačno otpremanje i grupno slanje komandi. */
html:root[data-theme] body .upload-page :is(.progress-track, .upload-progress-meter) {
    background: var(--upload-progress-track) !important;
}

html:root[data-theme] body .upload-page .progress-fill {
    background: linear-gradient(90deg, var(--upload-progress-start), var(--upload-progress-end)) !important;
}

html:root[data-theme] body .upload-page .upload-progress-card {
    color: var(--upload-text) !important;
    background: var(--upload-raised) !important;
    border-color: var(--upload-border) !important;
    box-shadow: var(--bm-shadow-soft, none) !important;
}

html:root[data-theme] body .upload-page .upload-progress-percent {
    color: var(--upload-text) !important;
}

html:root[data-theme] body .upload-page .upload-progress-segment {
    background: var(--upload-progress-track) !important;
}

html:root[data-theme] body .upload-page .upload-progress-segment.is-filled {
    background: linear-gradient(180deg, var(--upload-progress-start), var(--upload-progress-end)) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--upload-progress-end) 35%, transparent) !important;
}

html:root[data-theme] body .upload-page .upload-progress-details {
    color: var(--upload-secondary) !important;
}

html:root[data-theme] body .upload-confirm-modal :is(.bm-modal-header, .bm-modal-footer) {
    color: var(--upload-text) !important;
    background: var(--upload-raised) !important;
    border-color: var(--upload-border) !important;
}

html:root[data-theme] body .upload-confirm-modal .bm-modal-close {
    color: var(--upload-secondary) !important;
    background: transparent !important;
}

html:root[data-theme] body .upload-confirm-modal .bm-modal-close:hover {
    color: var(--upload-accent) !important;
    background: color-mix(in srgb, var(--upload-accent) 10%, transparent) !important;
}