* { -webkit-font-smoothing: antialiased; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        
        :root {
          --sidebar-width: 256px;
          --sidebar-collapsed: 80px;
        }
        
        .sidebar {
          width: var(--sidebar-width);
          transition: width 0.3s ease-in-out;
        }
        
        .sidebar.collapsed {
          width: var(--sidebar-collapsed);
        }
        
        .sidebar.collapsed .sidebar-label { 
          display: none; 
        }
        
        .sidebar.collapsed .sidebar-item-text {
          display: none;
        }
        
        .main-content {
          margin-left: var(--sidebar-width);
          transition: margin-left 0.3s ease-in-out;
        }
        
        .main-content.sidebar-collapsed {
          margin-left: var(--sidebar-collapsed);
        }
        
        @media (max-width: 768px) {
          .sidebar {
            position: fixed;
            left: 0;
            height: 100%;
            z-index: 40;
            display: none;
          }
          
          .sidebar.mobile-open {
            display: flex;
          }
          
          .main-content {
            margin-left: 0;
            margin-bottom: 80px;
          }
          
          .desktop-sidebar-toggle {
            display: none;
          }
          
          .bottom-nav {
            display: flex;
          }
        }
        
        @media (min-width: 769px) {
          .bottom-nav {
            display: none;
          }
        }
        
        .fade-in { animation: fadeIn 0.3s ease-in; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
        .chart-container { position: relative; height: clamp(160px, 24vh, 300px); } /* ສູງຕາມຈໍ — Dashboard ພໍດີຈໍ (24/07/2026) */
        
        .status-up { @apply bg-emerald-100 text-emerald-800; }
        .status-down { @apply bg-red-100 text-red-800; }
        .status-maintenance { @apply bg-amber-100 text-amber-800; }
        
        .severity-critical { @apply bg-red-100 text-red-800; }
        .severity-major { @apply bg-orange-100 text-orange-800; }
        .severity-minor { @apply bg-yellow-100 text-yellow-800; }
        .status-active { @apply bg-emerald-100 text-emerald-800; }
        .status-planned { @apply bg-slate-100 text-slate-600; }
        .status-down { @apply bg-red-100 text-red-800; }
        .status-maintenance { @apply bg-amber-100 text-amber-800; }
        
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .dark ::-webkit-scrollbar-thumb { background: #475569; }
        .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Login page redesign (13/07/2026) - brand/form 2-column layout */
.llogo {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: inline-block;
}