.text-upper{
    text-transform: uppercase;
}

.table-compact td,
.table-compact th {
    padding: 0.2rem 0.4rem;
    border: none;
    vertical-align: top;
    }

.table-compact {
    border-collapse: collapse;
    font-size: 12px;
    text-transform: uppercase;
}

.connection-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99998;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(2px);
	cursor: not-allowed;
}

.connection-widget {
    position: fixed;
    width: 390px;
    max-width: calc(100vw - 32px);
    display: none;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    color: #212529;
    z-index: 99999;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .25);
    border: 1px solid rgba(255, 255, 255, .75);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: all .28s cubic-bezier(.2, .8, .2, 1);
}

/* Offline / server error: tengah */
.connection-widget.is-center {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -46%) scale(.94);
}

.connection-widget.is-center.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Online kembali: pojok kanan bawah */
.connection-widget.is-corner {
    right: 24px;
    bottom: 24px;
    top: auto;
    left: auto;
    transform: translateY(24px) scale(.96);
}

.connection-widget.is-corner.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Shake khusus posisi tengah */
.connection-widget.shake.is-center {
    animation: connection-shake-center .42s ease;
}

@keyframes connection-shake-center {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    20% {
        transform: translate(calc(-50% - 7px), -50%) scale(1);
    }

    40% {
        transform: translate(calc(-50% + 7px), -50%) scale(1);
    }

    60% {
        transform: translate(calc(-50% - 4px), -50%) scale(1);
    }

    80% {
        transform: translate(calc(-50% + 4px), -50%) scale(1);
    }
}

/* Shake khusus posisi pojok */
.connection-widget.shake.is-corner {
    animation: connection-shake-corner .42s ease;
}

@keyframes connection-shake-corner {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    20% {
        transform: translateX(-7px) scale(1);
    }

    40% {
        transform: translateX(7px) scale(1);
    }

    60% {
        transform: translateX(-4px) scale(1);
    }

    80% {
        transform: translateX(4px) scale(1);
    }
}

/* Visual icon */
.connection-visual {
    position: relative;
    width: 74px;
    height: 74px;
    min-width: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-ring {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: connection-radar 1.8s infinite ease-out;
}

.connection-ring.ring-2 {
    animation-delay: .45s;
}

.connection-ring.ring-3 {
    animation-delay: .9s;
}

@keyframes connection-radar {
    0% {
        transform: scale(.35);
        opacity: .45;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.connection-icon {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: connection-float 1.8s infinite ease-in-out;
}

.connection-icon i {
    font-size: 30px;
}

@keyframes connection-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(-3deg);
    }
}

/* Text */
.connection-info {
    flex: 1;
    min-width: 0;
}

.connection-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}

.connection-message {
    font-size: 13px;
    line-height: 1.45;
    color: #6c757d;
}

.connection-retry {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
	color: inherit;
}

.connection-retry .spinner-grow {
    color: currentColor;
}

.connection-retry small {
    font-size: 12px;
	color: #878a99;
}

/* Offline internet */
.connection-widget.danger {
    color: #f06548;
}

.connection-widget.danger .connection-icon {
    background: rgba(240, 101, 72, .13);
    box-shadow: 0 0 0 8px rgba(240, 101, 72, .05);
}

.connection-widget.danger .connection-title {
    color: #f06548;
}

/* Server error */
.connection-widget.warning {
    color: #f7b84b;
}

.connection-widget.warning .connection-icon {
    background: rgba(247, 184, 75, .16);
    box-shadow: 0 0 0 8px rgba(247, 184, 75, .06);
}

.connection-widget.warning .connection-title {
    color: #d99000;
}

/* Online kembali */
.connection-widget.success {
    color: #0ab39c;
}

.connection-widget.success .connection-icon {
    background: rgba(10, 179, 156, .13);
    box-shadow: 0 0 0 8px rgba(10, 179, 156, .06);
    animation: connection-success-pop .55s ease;
}

.connection-widget.success .connection-title {
    color: #0ab39c;
}

.connection-widget.success .connection-ring {
    display: none;
}

.connection-widget.success .connection-retry {
    display: none;
}

@keyframes connection-success-pop {
    0% {
        transform: scale(.75);
        opacity: .4;
    }

    60% {
        transform: scale(1.16);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

body.connection-locked {
    overflow: hidden;
}

/* Responsive */
@media (max-width: 576px) {
    .connection-widget {
        width: calc(100vw - 28px);
        padding: 16px;
        border-radius: 18px;
        gap: 14px;
    }

    .connection-widget.is-corner {
        right: 14px;
        bottom: 14px;
    }

    .connection-visual {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .connection-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .connection-icon i {
        font-size: 26px;
    }

    .connection-title {
        font-size: 15px;
    }

    .connection-message {
        font-size: 12.5px;
    }
}