::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fdf2f8; }
::-webkit-scrollbar-thumb { background: #fbcfe8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #f472b6; }

.progress-circle { transition: stroke-dashoffset 1s ease-in-out; }
.table-wrapper { width: 100%; overflow-x: auto; position: relative; scroll-behavior: smooth; }

.scroll-indicator {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.1); border-right: none; border-radius: 20px 0 0 20px;
    width: 40px; height: 60px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 50; opacity: 0.6; transition: opacity 0.2s;
    box-shadow: -2px 0 5px rgba(0,0,0,0.05);
}
.scroll-indicator:hover { opacity: 1; background: rgba(255, 255, 255, 0.9); }
.table-container-outer { position: relative; }

thead th { position: sticky; z-index: 35; top: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
thead tr:nth-child(2) th { top: 38px; }
thead tr:nth-child(3) th { top: 66px; }

.sticky-col-no { position: sticky; left: 0; z-index: 25; width: 40px; min-width: 40px; max-width: 40px; background-color: white; text-align: center; }
.sticky-col-nama { position: sticky; left: 40px; z-index: 25; width: 160px; min-width: 160px; max-width: 160px; background-color: white; }

thead .sticky-col-no, thead .sticky-col-nama { z-index: 40; background-color: #f3f4f6; }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes highlight-focus {
    0% { background-color: #fce7f3; }
    50% { background-color: #fbcfe8; }
    100% { background-color: transparent; }
}
.focus-pulse { animation: highlight-focus 2s ease-in-out; border-radius: 8px; }

.khs-edit-btn {
    color: #de3b71; background: #fdf2f8; border: 1px solid #fbcfe8;
    border-radius: 6px; width: 26px; height: 24px; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.khs-edit-btn:hover { background: #de3b71; color: #fff; border-color: #de3b71; }

.khs-swal-input {
    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    background: #f9fafb; outline: none; font-size: 15px; text-align: center;
    font-weight: 600;
}
.khs-swal-input:focus { border-color: #de3b71; box-shadow: 0 0 0 2px rgba(222,59,113,.25); }

@media (min-width: 768px) {
    .sticky-col-no { width: 50px; min-width: 50px; max-width: 50px; }
    .sticky-col-nama { left: 50px; width: 250px; min-width: 250px; max-width: 250px; }
    .khs-edit-btn { width: 30px; height: 26px; font-size: 12px; }
}