/*----------------------------------PILL BADGE -------------------------------------*/
/* dasar badge sama seperti kemarin */
.ui-pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    font-weight: 500;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
}

/* clickable look & feel */
.ui-pill-badge-clickable {
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03);
    transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

    .ui-pill-badge-clickable:hover {
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
        transform: translateY(-1px);
    }

    .ui-pill-badge-clickable:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    }

/* VARIANT COLORS (solid) */
.ui-pill-badge-success {
    background: linear-gradient(120deg, rgba(40, 167, 69, 0.08), rgba(40, 167, 69, 0.2));
    border-color: rgba(40, 167, 69, 0.5);
    color: #0f5132;
}

.ui-pill-badge-warning {
    background: linear-gradient(120deg, rgba(255, 193, 7, 0.16), rgba(255, 193, 7, 0.28));
    border-color: rgba(255, 193, 7, 0.65);
    color: #664d03;
}

.ui-pill-badge-danger {
    background: linear-gradient(120deg, rgba(220, 53, 69, 0.12), rgba(220, 53, 69, 0.28));
    border-color: rgba(220, 53, 69, 0.6);
    color: #842029;
}

.ui-pill-badge-secondary,
.ui-pill-badge-neutral {
    background: linear-gradient(120deg, rgba(108, 117, 125, 0.06), rgba(108, 117, 125, 0.16));
    border-color: rgba(108, 117, 125, 0.45);
    color: #343a40;
}

/* OUTLINE variants = untuk badge statis (PPN, dsb.) */
.ui-pill-badge-outline-success {
    background: rgba(40, 167, 69, 0.02);
    border-color: rgba(40, 167, 69, 0.5);
    color: #0f5132;
}

.ui-pill-badge-outline-secondary,
.ui-pill-badge-outline-neutral {
    background: rgba(108, 117, 125, 0.02);
    border-color: rgba(108, 117, 125, 0.4);
    color: #343a40;
}

.ui-pill-badge-success-dark {
    background: linear-gradient(120deg, rgba(40, 167, 69, 0.18), rgba(40, 167, 69, 0.38));
    border-color: rgba(40, 167, 69, 0.75);
    color: #0b3d24;
}

.ui-pill-badge-outline-success-dark {
    background: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.75);
    color: #0b3d24;
}

/* PRIMARY (solid) */
.ui-pill-badge-primary {
    background: linear-gradient(120deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.2));
    border-color: rgba(13, 110, 253, 0.5);
    color: #052c65;
}

/* OUTLINE PRIMARY */
.ui-pill-badge-outline-primary {
    background: rgba(13, 110, 253, 0.02);
    border-color: rgba(13, 110, 253, 0.5);
    color: #052c65;
}
/*--------------------------------------PILL BADGE---------------------------------*/


/*-------------------------------------loader----------------------------------*/
/* ===== HoloLoader (clean + table skeleton) ===== */
.hl {
    width: 100%;
}

.hl--overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}

.hl-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .40);
    backdrop-filter: blur(10px);
}

.hl-card {
    position: relative;
    width: 100%;
    min-height: var(--hl-minh);
    border-radius: var(--hl-radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 18px 50px rgba(15,23,42,0.10);
    overflow: hidden;
}

.hl--overlay .hl-card {
    width: min(1100px, calc(100% - 24px));
}

.hl-head {
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    background: radial-gradient(600px 120px at 20% 0%, rgba(37,99,235,0.10), transparent 60%), radial-gradient(600px 120px at 80% 0%, rgba(2,132,199,0.08), transparent 60%);
}

.hl-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hl-title {
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(15,23,42,0.92);
}

.hl-sub {
    margin-top: 2px;
    font-size: .92rem;
    color: rgba(15,23,42,0.62);
}

.hl-orbit {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(37,99,235,0.12);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,0.18);
}

    .hl-orbit::before {
        content: "";
        position: absolute;
        inset: 7px;
        border-radius: 999px;
        border: 2px solid rgba(37,99,235,0.18);
    }

    .hl-orbit::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--hl-accent);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(0deg) translateX(12px);
        animation: hl-orbit 1.05s linear infinite;
    }

@keyframes hl-orbit {
    to {
        transform: translate(-50%,-50%) rotate(360deg) translateX(12px);
    }
}

.hl-meter {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15,23,42,0.06);
    overflow: hidden;
}

.hl-meter__bar {
    height: 100%;
    width: 42%;
    background: linear-gradient(90deg, transparent, var(--hl-accent), transparent);
    filter: blur(0.0px);
    animation: hl-meter 1.1s ease-in-out infinite;
}

@keyframes hl-meter {
    0% {
        transform: translateX(-120%);
        opacity: .7;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(220%);
        opacity: .7;
    }
}

/* table skeleton */
.hl-table {
    padding: 14px 14px 8px;
}

.hl-thead, .hl-tr {
    display: grid;
    grid-template-columns: var(--hl-cols);
    gap: 10px;
    align-items: center;
}

.hl-thead {
    padding: 10px 10px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,0.03);
    border: 1px solid rgba(15,23,42,0.05);
}

.hl-tbody {
    padding: 10px;
}

.hl-tr {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(15,23,42,0.05);
}

    .hl-tr:last-child {
        border-bottom: none;
    }

.hl-th {
    height: 12px;
    border-radius: 8px;
}

.hl-td {
    height: 12px;
    border-radius: 10px;
}

/* list skeleton */
.hl-list {
    padding: 14px;
}

.hl-li {
    padding: 12px;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.70);
}

.hl-li__a {
    height: 14px;
    width: 38%;
    border-radius: 10px;
}

.hl-li__b {
    height: 12px;
    width: 68%;
    margin-top: 10px;
    border-radius: 10px;
}

.hl-li__c {
    height: 12px;
    width: 52%;
    margin-top: 8px;
    border-radius: 10px;
}

.hl-foot, .hl-min {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 16px;
    color: rgba(15,23,42,0.62);
}

.hl-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15,23,42,0.35);
    animation: hl-dot 1.0s ease-in-out infinite;
}

    .hl-dots span:nth-child(2) {
        animation-delay: .12s;
    }

    .hl-dots span:nth-child(3) {
        animation-delay: .24s;
    }

@keyframes hl-dot {
    0%,100% {
        transform: translateY(0);
        opacity: .55;
    }

    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

/* shimmer */
.hl-skel {
    position: relative;
    background: rgba(15,23,42,0.07);
    overflow: hidden;
}

    .hl-skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.00) 100%);
        animation: hl-shimmer 1.15s infinite;
    }

@keyframes hl-shimmer {
    100% {
        transform: translateX(120%);
    }
}

/*---------------------------------------loader--------------------------------*/
/*-------------------------------------TOAST----------------------------------*/
.ordo-toast-host {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.ordo-toast {
    display: grid;
    grid-template-columns: 34px 1fr 26px;
    gap: 10px;
    align-items: start;
    padding: 12px 12px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    animation: ordoToastIn 180ms ease-out;
}

@keyframes ordoToastIn {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ordo-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.04);
}

.ordo-toast-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.ordo-toast-msg {
    font-size: 12px;
    color: rgba(0,0,0,.72);
    margin-top: 2px;
}

.ordo-toast-close {
    border: none;
    background: transparent;
    color: rgba(0,0,0,.55);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin-top: 2px;
}

    .ordo-toast-close:hover {
        color: rgba(0,0,0,.85);
    }

.ordo-toast-bar {
    height: 3px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.ordo-toast-bar-fill {
    height: 100%;
    width: 100%;
    transform-origin: left;
}

@keyframes ordoToastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* level colors */
.ordo-toast-success {
    border-left: 4px solid #2fb344;
}

.ordo-toast-error {
    border-left: 4px solid #e03131;
}

.ordo-toast-warning {
    border-left: 4px solid #f08c00;
}

.ordo-toast-info {
    border-left: 4px solid #228be6;
}

.ordo-toast-success .ordo-toast-icon {
    background: rgba(47,179,68,.12);
    color: #2fb344;
}

.ordo-toast-error .ordo-toast-icon {
    background: rgba(224,49,49,.12);
    color: #e03131;
}

.ordo-toast-warning .ordo-toast-icon {
    background: rgba(240,140,0,.14);
    color: #f08c00;
}

.ordo-toast-info .ordo-toast-icon {
    background: rgba(34,139,230,.12);
    color: #228be6;
}

.ordo-toast-success .ordo-toast-bar-fill {
    background: #2fb344;
}

.ordo-toast-error .ordo-toast-bar-fill {
    background: #e03131;
}

.ordo-toast-warning .ordo-toast-bar-fill {
    background: #f08c00;
}

.ordo-toast-info .ordo-toast-bar-fill {
    background: #228be6;
}

/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/