/* assets/css/custom.css */
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Glass / gradients */
.glass{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.1)}
.glass-light{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(30,41,59,.4);border:1px solid rgba(148,163,184,.15)}
.glass-sidebar{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:rgba(15,23,42,.8);border-right:1px solid rgba(148,163,184,.1)}
.gradient-bg{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%)}
.gradient-accent{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 50%,#1e40af 100%)}
.gradient-dev{background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%)}
.gradient-success{background:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%)}
.gradient-warning{background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%)}
.gradient-danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%)}
.gradient-purple{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 50%,#6d28d9 100%)}

/* Animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse-slow{0%,100%{opacity:1}50%{opacity:.8}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.float{animation:float 6s ease-in-out infinite}
.pulse-slow{animation:pulse-slow 2s ease-in-out infinite}
.slide-in-left{animation:slide-in-left .5s ease-out}
.glow{animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(59,130,246,.4)}50%{box-shadow:0 0 30px rgba(59,130,246,.6)}}

/* Sidebar/menu */
.sidebar{transform:translateX(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sidebar.closed{transform:translateX(-100%)}
.menu-item{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:12px;margin:4px 0;display:block}
.menu-item:hover{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);transform:translateX(4px)}
.menu-item.active{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(29,78,216,.1));border-color:rgba(59,130,246,.5);box-shadow:0 4px 12px rgba(59,130,246,.2)}
.menu-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:0 3px 3px 0}

.stat-card{transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0)}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.chart-container{position:relative;height:300px}

.notification-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border:2px solid #0f172a}
.avatar{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:2px solid rgba(139,92,246,.3);transition:all .3s ease}
.avatar:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(139,92,246,.4)}

/* Dropdown visibility helper */
[id$='-menu']{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* Toggle switch */
.toggle-switch{position:relative;width:60px;height:30px;background:linear-gradient(135deg,#475569,#64748b);border-radius:25px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid rgba(148,163,184,.2);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.1)}
.toggle-switch.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:rgba(59,130,246,.3);box-shadow:0 0 20px rgba(59,130,246,.4),inset 0 2px 4px rgba(0,0,0,.2)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.toggle-switch.active .toggle-thumb{left:32px;background:linear-gradient(135deg,#fff,#f1f5f9);box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* Status dots */
.status-dot{width:8px;height:8px;border-radius:50%;position:relative}
.status-dot::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;animation:pulse-slow 2s infinite}
.status-active{background:#10b981}
.status-active::before{background:rgba(16,185,129,.4)}
.status-dev{background:#f59e0b}
.status-dev::before{background:rgba(245,158,11,.4)}
.status-inactive{background:#6b7280}
.status-inactive::before{background:rgba(107,114,128,.4)}

/* Zone card hover */
.zone-card{transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0)}
.zone-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.3);border-color:rgba(59,130,246,.3)}

/* Spinner */
.spinner{width:20px;height:20px;border:2px solid rgba(59,130,246,.3);border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(15,23,42,.5);border-radius:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#475569,#64748b);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#64748b,#94a3b8)}

@media (max-width:768px){
  .sidebar{position:fixed;z-index:50;height:100vh}
  .main-content{margin-left:0!important}
  .stat-card:hover{transform:none}
}