/* ===========================================================================
   Panel Suhu & Getaran — lapisan animasi & polish di atas AdminLTE 3.
   File ini hanya menambah; tidak menimpa struktur AdminLTE.
   =========================================================================== */

:root {
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring:   cubic-bezier(0.34, 1.24, 0.64, 1);
    --dur-sidebar:   0.34s;
}

/* ---------------------------------------------------------------------------
   1. Sidebar buka/tutup
   AdminLTE sudah punya transisi 0.3s linear-ish; di sini dibuat lebih halus
   dan elemen di dalamnya ikut beranimasi supaya terasa satu gerakan.
   --------------------------------------------------------------------------- */

.main-sidebar,
.main-sidebar .brand-link,
.content-wrapper,
.main-header,
.main-footer {
    transition: margin-left var(--dur-sidebar) var(--ease-out-soft),
                width var(--dur-sidebar) var(--ease-out-soft) !important;
}

/* Teks brand & user-panel meredup saat sidebar menyempit. */
.brand-text,
.sidebar .user-panel .info,
.nav-sidebar .nav-link p {
    transition: opacity 0.22s var(--ease-out-soft),
                transform 0.28s var(--ease-out-soft),
                margin-left var(--dur-sidebar) var(--ease-out-soft);
}

.sidebar-collapse .brand-text,
.sidebar-collapse .sidebar .user-panel .info {
    opacity: 0;
    transform: translateX(-8px);
}

/* Saat sidebar mini di-hover, AdminLTE melebarkannya lagi — kembalikan teksnya
   dengan lembut, bukan muncul mendadak. */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .info {
    opacity: 1;
    transform: translateX(0);
}

/* Tombol hamburger: beri umpan balik saat ditekan. */
[data-widget="pushmenu"] {
    transition: transform 0.2s var(--ease-spring), color 0.2s ease;
}
[data-widget="pushmenu"]:hover  { transform: scale(1.12); }
[data-widget="pushmenu"]:active { transform: scale(0.9); }

/* Ikon menu bergeser sedikit saat hover. */
.nav-sidebar .nav-link {
    transition: background-color 0.2s ease, padding-left 0.2s var(--ease-out-soft);
}
.nav-sidebar .nav-link:hover  { padding-left: 1.15rem; }
.nav-sidebar .nav-icon        { transition: transform 0.25s var(--ease-spring); }
.nav-sidebar .nav-link:hover .nav-icon { transform: scale(1.15); }

/* ---------------------------------------------------------------------------
   2. Kartu muncul bertahap saat halaman dibuka
   --------------------------------------------------------------------------- */

@keyframes panel-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel-animate > .row > [class*="col-"],
.panel-animate > .card {
    animation: panel-rise 0.45s var(--ease-out-soft) backwards;
}

/* Jeda bertingkat supaya terbaca sebagai satu gelombang. */
.panel-animate > .row:nth-of-type(1) > [class*="col-"]:nth-child(1) { animation-delay: 0.00s; }
.panel-animate > .row:nth-of-type(1) > [class*="col-"]:nth-child(2) { animation-delay: 0.05s; }
.panel-animate > .row:nth-of-type(1) > [class*="col-"]:nth-child(3) { animation-delay: 0.10s; }
.panel-animate > .row:nth-of-type(1) > [class*="col-"]:nth-child(4) { animation-delay: 0.15s; }
.panel-animate > .row:nth-of-type(2) > [class*="col-"]:nth-child(1) { animation-delay: 0.18s; }
.panel-animate > .row:nth-of-type(2) > [class*="col-"]:nth-child(2) { animation-delay: 0.23s; }
.panel-animate > .row:nth-of-type(2) > [class*="col-"]:nth-child(3) { animation-delay: 0.28s; }
.panel-animate > .row:nth-of-type(3) > [class*="col-"]                { animation-delay: 0.32s; }
.panel-animate > .row:nth-of-type(4) > [class*="col-"]                { animation-delay: 0.38s; }

/* ---------------------------------------------------------------------------
   3. Kartu angkat saat hover
   --------------------------------------------------------------------------- */

.small-box,
.info-box,
.card {
    transition: transform 0.25s var(--ease-out-soft),
                box-shadow 0.25s var(--ease-out-soft);
}
.small-box:hover,
.info-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14) !important;
}

/* Warna kartu status berubah mulus saat ambang terlampaui. */
.small-box {
    transition: transform 0.25s var(--ease-out-soft),
                box-shadow 0.25s var(--ease-out-soft),
                background-color 0.5s ease;
}

/* Ikon besar di kartu sedikit bergerak saat hover. */
.small-box .icon > i {
    transition: transform 0.3s var(--ease-spring), opacity 0.3s ease;
}
.small-box:hover .icon > i {
    transform: scale(1.12) rotate(-6deg);
}

/* ---------------------------------------------------------------------------
   4. Kedipan saat nilai diperbarui oleh polling
   --------------------------------------------------------------------------- */

@keyframes value-flash {
    0%   { background-color: rgba(255, 255, 255, .55); }
    100% { background-color: transparent; }
}

.value-updated {
    animation: value-flash 0.7s var(--ease-out-soft);
    border-radius: 4px;
}

/* Baris baru pada tabel live menyelinap masuk. */
@keyframes row-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.row-new { animation: row-slide-in 0.4s var(--ease-out-soft); }

/* ---------------------------------------------------------------------------
   5. Badge status koneksi
   --------------------------------------------------------------------------- */

.conn-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    vertical-align: middle;
}

/* Denyut hanya saat online — offline harus terlihat diam. */
@keyframes conn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.badge-success .conn-dot { animation: conn-pulse 1.8s infinite; }

#conn-badge {
    transition: background-color 0.35s ease;
}

/* ---------------------------------------------------------------------------
   6. Halaman login
   --------------------------------------------------------------------------- */

.login-page {
    background: linear-gradient(135deg, #0f2537 0%, #1a3a52 55%, #234b68 100%);
}

.login-box {
    animation: panel-rise 0.5s var(--ease-out-soft);
}

.login-card-body {
    border-radius: 0.5rem;
}

.login-logo i {
    animation: logo-float 3.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.btn-login {
    transition: transform 0.18s var(--ease-spring), box-shadow 0.2s ease;
}
.btn-login:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.btn-login:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   7. Hormati preferensi pengguna yang mematikan animasi
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}