/* assets/css/style.css */

/* Background Utama */
body {
    background: linear-gradient(135deg, #1e3a8a, #312e81, #4c1d95);
    background-attachment: fixed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Glassmorphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Glass Control Card */
.glass-control {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.glass-control:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-4px);
}

/* Square Card untuk Kontrol Perangkat */
.square-card {
    aspect-ratio: 1 / 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* ========================================= */
/* ANIMASI PERANGKAT */
/* ========================================= */

/* Lampu Menyala + Glow */
.lampu-nyala {
    animation: bulbGlow 1.5s ease-in-out infinite alternate;
    color: #fef08c !important;
    text-shadow: 0 0 25px #fef08c, 
                 0 0 50px #fef08c;
}

@keyframes bulbGlow {
    from { 
        filter: brightness(1) drop-shadow(0 0 10px #fef08c); 
    }
    to { 
        filter: brightness(1.4) drop-shadow(0 0 35px #fef08c); 
    }
}

/* Kipas Berputar */
.kipas-berputar {
    animation: fanSpin 0.7s linear infinite;
}

@keyframes fanSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pompa Air */
.pompa-aktif {
    animation: pumpShake 0.6s ease-in-out infinite alternate;
}

.pompa-aktif #waterWave {
    height: 75% !important;
    background: linear-gradient(transparent, #60a5fa, #3b82f6);
    animation: waterFlow 1.8s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.6);
}

@keyframes pumpShake {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(-3px) rotate(3deg); }
}

@keyframes waterFlow {
    0%, 100% { 
        transform: translateY(8px); 
        opacity: 0.85; 
    }
    50% { 
        transform: translateY(-6px); 
        opacity: 1; 
    }
}

/* ========================================= */
/* ANIMASI SUHU MONITORING */
/* ========================================= */

#suhuContainer {
    transition: all 0.5s ease;
}

/* Sidebar */
nav a {
    transition: all 0.3s ease;
}

nav a:hover {
    transform: translateX(4px);
}

/* Table Log */
table {
    border-collapse: collapse;
}

.log-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.log-table th, .log-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.log-table thead th { color: rgba(255,255,255,0.85); font-weight: 600; }
.log-table td { color: rgba(255,255,255,0.9); }

.log-card { padding: 0.9rem; }
.log-card .text-sm { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.log-card .font-medium { font-size: 1rem; }

.status-badge { padding: 0.35rem 0.9rem; font-size: 0.95rem; }

/* Log card (mobile-friendly) */
.log-card {
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.status-badge {
    display: inline-block;
    font-size: 0.9rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

/* Tidy log card and badge visuals */
.log-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0.9rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.log-card .text-xs { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.log-card .font-medium { font-size: 1rem; color: rgba(255,255,255,0.92); }

.status-badge { min-width: 48px; text-align: center; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }
.status-badge.bg-emerald-400\/20 { background-color: rgba(34,197,94,0.15); }
.status-badge.bg-red-400\/20 { background-color: rgba(248,113,113,0.12); }

/* Table container centering */
.glass.overflow-x-auto.max-w-4xl { max-width: 64rem; }

/* Responsive tweaks for log table */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    table.log-table thead { display: none; }
    table.log-table, table.log-table tbody, table.log-table tr, table.log-table td { display: block; width: 100%; }
    table.log-table tr { margin-bottom: 0.75rem; }
    table.log-table td { padding: 0.75rem 1rem; text-align: left; }
}

/* Responsive */
@media (max-width: 1024px) {
    .square-card {
        padding: 1.25rem;
    }
}

/* Mobile-specific improvements */
@media (max-width: 767px) {
    /* ensure main content not covered by mobile header */
    main { padding-top: 4rem; }

    /* make temperature prominent but responsive */
    #suhu { font-size: 2.25rem; line-height: 1; font-weight: 600; }

    /* humidity text responsive on small screens */
    #kelembaban { font-size: 2rem; line-height: 1.05; }
    #kelembaban span { font-size: 0.85rem; }

    /* make control cards more compact and consistent */
    .square-card {
        aspect-ratio: 1/1;
        padding: 1rem;
        border-radius: 14px;
    }

    .glass-control { padding: 1rem; }

    /* backdrop transition for mobile sidebar */
    #mobileSidebarBackdrop { transition: background-color 0.25s ease; }
}

@media (min-width: 768px) {
    /* larger temperature on desktops */
    #suhu { font-size: 3.5rem; }
}

/* ========================================= */
/* POWER BUTTON TOGGLE - UKURAN KECIL & PRESISI */
/* ========================================= */

.power-toggle {
  position: relative;
  width: 55px;
  height: 55px;
  cursor: pointer;
}

.power-toggle input {
  display: none;
}

.power-toggle .switch {
  width: 55px;
  height: 55px;
  background-color: #363636;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #555;
  box-shadow: 
    0 4px 10px rgba(0,0,0,0.5) inset,
    0 0 8px rgba(0,0,0,0.6);
  transition: all 0.4s ease;
}

.power-toggle input:checked + .switch {
  background-color: #2a9d8f;
  border-color: #7ed6c5;
  box-shadow: 
    0 0 18px #2a9d8f,
    0 0 35px rgba(42, 157, 143, 0.6),
    inset 0 0 12px rgba(255,255,255,0.5);
}

.power-toggle svg {
  width: 32px;
  height: 32px;
  transition: all 0.3s ease;
}

.power-toggle svg path {
  fill: #1f1f1f;
  transition: fill 0.3s ease;
}

.power-toggle input:checked + .switch svg path {
  fill: #ffffff;
}

/* Glow effect */
.power-toggle input:checked + .switch::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,157,143,0.35) 0%, transparent 70%);
  z-index: -1;
  animation: pulse-glow-small 2s infinite ease-in-out;
}

@keyframes pulse-glow-small {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.12); }
}

/* Additional smooth transitions */
.transition-all {
    transition: all 0.3s ease;
}