/* Tahap 136K44 — Progress bar final berwarna di semua halaman.
   Tujuan: setiap progress yang punya persentase > 0 wajib terlihat berwarna, bukan hitam saja. */

html[data-theme] .elok-progress-track,
html[data-theme] .elok-upload-progress-track {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .72) !important;
    border: 1px solid rgba(125, 211, 252, .14) !important;
    box-shadow: inset 0 1px 2px rgba(2, 6, 23, .35) !important;
}

html[data-theme="light"] .elok-progress-track,
html[data-theme="light"] .elok-upload-progress-track {
    background: rgba(226, 232, 240, .95) !important;
    border-color: rgba(14, 165, 233, .18) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10) !important;
}

html[data-theme] .elok-progress-bar,
html[data-theme] .elok-upload-progress-fill {
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 58%, #1d4ed8 100%) !important;
    box-shadow: 0 0 18px rgba(37, 99, 235, .30) !important;
    transition: width .45s ease, min-width .2s ease, filter .18s ease !important;
}

html[data-theme] .elok-progress-bar.is-info,
html[data-theme] .elok-progress-bar.is-primary,
html[data-theme] .elok-upload-progress-fill {
    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 58%, #1d4ed8 100%) !important;
    box-shadow: 0 0 18px rgba(37, 99, 235, .30) !important;
}

html[data-theme] .elok-progress-bar.is-success,
html[data-theme] .elok-upload-progress-fill[style*="width: 100"] {
    background: linear-gradient(90deg, #34d399 0%, #22c55e 55%, #16a34a 100%) !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, .30) !important;
}

html[data-theme] .elok-progress-bar.is-warning {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 58%, #d97706 100%) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, .28) !important;
}

html[data-theme] .elok-progress-bar.is-danger {
    background: linear-gradient(90deg, #fb7185 0%, #f43f5e 55%, #e11d48 100%) !important;
    box-shadow: 0 0 18px rgba(244, 63, 94, .28) !important;
}

/* Persentase kecil tetap wajib kelihatan. 0% tetap kosong. */
html[data-theme] .elok-progress-bar[style*="width: 0%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 0%"] {
    min-width: 0 !important;
    box-shadow: none !important;
}

html[data-theme] .elok-progress-bar[style*="width: 0."],
html[data-theme] .elok-progress-bar[style*="width: 1%"],
html[data-theme] .elok-progress-bar[style*="width: 2%"],
html[data-theme] .elok-progress-bar[style*="width: 3%"],
html[data-theme] .elok-progress-bar[style*="width: 4%"],
html[data-theme] .elok-progress-bar[style*="width: 5%"],
html[data-theme] .elok-progress-bar[style*="width: 6%"],
html[data-theme] .elok-progress-bar[style*="width: 7%"],
html[data-theme] .elok-progress-bar[style*="width: 8%"],
html[data-theme] .elok-progress-bar[style*="width: 9%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 0."],
html[data-theme] .elok-upload-progress-fill[style*="width: 1%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 2%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 3%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 4%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 5%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 6%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 7%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 8%"],
html[data-theme] .elok-upload-progress-fill[style*="width: 9%"] {
    min-width: 8px !important;
}

/* Fallback untuk progress lama yang belum sempat diganti class-nya. */
html[data-theme] .bg-gradient-to-r[style*="width:"] {
    min-height: 100% !important;
    box-shadow: 0 0 16px rgba(37, 99, 235, .22) !important;
}