/* style.css */
:root {
    --color-primary: #2563EB;
    --color-connected: #10B981;
    --color-not-connected: #EF4444;
    --color-connecting: #F59E0B;
    font-family: 'Inter', sans-serif;
}

.status-dot {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.status-connected { background-color: var(--color-connected); }
.status-not_connected, .status-disconnected { background-color: var(--color-not-connected); }
.status-connecting { background-color: var(--color-connecting); }
.status-unknown, .status-offline { background-color: #9CA3AF; }

.scan-button {
    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
    box-shadow: 0 4px 15px -3px rgba(30, 64, 175, 0.4);
}

.scan-button:hover {
    filter: brightness(1.1);
}

.qr-image {
    width: 250px; 
    height: 250px; 
    border: 5px solid var(--color-connecting); 
    display: block;
    margin: 20px auto 10px auto;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Progress Bar Custom */
#progressBar {
    transition: width 0.4s ease;
}
/*......*/
body {
    -webkit-tap-highlight-color: transparent;
}

.text-shadow-glow {
    text-shadow: 0 0 15px rgba(234, 179, 8, 0.4);
}

/* Custom Scrollbar untuk Mobile */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 10px;
}

/* Animasi Masuk */
@keyframes fadeInCard {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rule-card {
    animation: fadeInCard 0.3s ease-out forwards;
}

/* Style untuk Input & Select agar seragam */
input, select {
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
input:focus, select:focus {
    border-color: #EAB308 !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}
/* Update style.css */

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 10px;
}
/* Transisi untuk kartu agar tidak kaku */
#unifiedSessionsOutput > div, #groupsOutput > div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Penyesuaian input */
input::placeholder {
    color: #4B5563;
}