/* Modern Background Image with Semi-transparent Overlay */
        /* Use ::before pseudo-element instead of background-attachment:fixed
           to avoid expensive repaint on every scroll tick */
        body {
            scroll-behavior: smooth;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -20;
            background-image:
                linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 248, 255, 0.9) 100%),
                url("../img/background.jpeg");
            background-position: center;
            background-size: cover;
            will-change: transform;
            /* promote to its own compositor layer */
        }

        /* Premium Glass Effect */
        .glass-panel {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        /* Scrollbar Styling */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Utilities */
        .delay-100 {
            animation-delay: 100ms;
        }

        .delay-200 {
            animation-delay: 200ms;
        }

        .delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-2000 {
            animation-delay: 2s;
        }

        .animation-delay-4000 {
            animation-delay: 4s;
        }

        /* Gradient Text Masking */
        .text-gradient-animated {
            background-size: 200% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* ===== SCROLL PERFORMANCE ===== */
        /* content-visibility:auto — browser completely skips rendering
           off-screen sections until they scroll into view */
        .perf-section {
            content-visibility: auto;
            /* hint to browser about rough section height so layout doesn't shift */
            contain-intrinsic-size: auto 600px;
        }

        /* Limit paint/layout to within each card — prevents a single card
           animation from triggering a full-page repaint */
        .perf-card {
            contain: layout style;
        }

        .status-dot {
            position: absolute;
            top: 1.1rem;
            right: 1.1rem;
            z-index: 10;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 9999px;
            border: 2px solid rgba(255, 255, 255, 0.95);
            background: #94a3b8;
        }
        .status-dot.up {
            background: #22c55e;
        }
        .status-dot.down {
            background: #ef4444;
        }
        .status-dot.maintenance {
            background: #f59e0b;
        }

        /* ===== DARK MODE ===== */
        html.dark body::before {
            background-image:
                linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.95) 100%),
                url("../img/background.jpeg");
        }
        html.dark .glass-panel {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(71, 85, 105, 0.5);
        }
        html.dark,
        html.dark body {
            color: #e2e8f0;
        }
        html.dark .text-dwisma-dark,
        html.dark .text-slate-800,
        html.dark .text-slate-700,
        html.dark h1, html.dark h2, html.dark h3, html.dark h4,
        html.dark .font-extrabold.text-slate-800,
        html.dark .font-extrabold.text-slate-700,
        html.dark .font-black.text-slate-800,
        html.dark .font-semibold.text-slate-700 {
            color: #f1f5f9;
        }
        html.dark .text-slate-500,
        html.dark .text-slate-400,
        html.dark .text-slate-600 {
            color: #94a3b8;
        }
        html.dark #ai-chat-messages .chat-msg.bot {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(71, 85, 105, 0.5);
            color: #e2e8f0;
        }
        html.dark #ai-chat-input {
            background: #1e293b;
            border-color: #334155;
            color: #e2e8f0;
        }
        html.dark #ai-chat-input-area {
            background: rgba(30, 41, 59, 0.3);
            border-color: rgba(71, 85, 105, 0.4);
        }
        html.dark #ai-chat-panel {
            background: rgba(15, 23, 42, 0.85);
            border-color: rgba(71, 85, 105, 0.5);
        }
        html.dark #blob1 { background: rgba(99, 102, 241, 0.25); }
        html.dark #blob2 { background: rgba(14, 165, 233, 0.2); }
        html.dark #blob3 { background: rgba(217, 70, 239, 0.2); }
        html.dark .bg-white\/60,
        html.dark .bg-white\/70,
        html.dark .bg-white\/\[\.60\],
        html.dark nav .bg-white\/60 {
            background: rgba(30, 41, 59, 0.5);
        }
        html.dark nav button,
        html.dark nav a {
            color: #e2e8f0;
        }
        html.dark nav .text-slate-700 {
            color: #e2e8f0;
        }
        html.dark #dark-toggle,
        html.dark #dark-toggle-mobile {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(71, 85, 105, 0.4);
            color: #e2e8f0;
        }
        html.dark #dark-toggle:hover,
        html.dark #dark-toggle-mobile:hover {
            color: #f59e0b;
        }
        html.dark .border-white,
        html.dark .border-white\/80,
        html.dark .border-white\/60 {
            border-color: rgba(71, 85, 105, 0.5);
        }
        html.dark .shadow-glass {
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        }
        html.dark .perf-card {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(71, 85, 105, 0.4);
        }
        html.dark .perf-card .bg-white {
            background: rgba(30, 41, 59, 0.8);
        }
        html.dark .typing-indicator {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(71, 85, 105, 0.5);
        }
        html.dark #search-input {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(71, 85, 105, 0.4);
            color: #e2e8f0;
        }
        html.dark #search-input::placeholder {
            color: #64748b;
        }
        html.dark #search-empty p {
            color: #94a3b8;
        }
        html.dark .perf-card .bg-white\/\[\.60\],
        html.dark .perf-card a .bg-white {
            background: rgba(30, 41, 59, 0.8);
        }
        html.dark #kalender-list .timeline-item {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(71, 85, 105, 0.4);
        }
        html.dark #kalender-list .timeline-date {
            color: #94a3b8;
        }
        html.dark #kalender-list .timeline-line {
            background: rgba(71, 85, 105, 0.4);
        }

        /* Timeline Kalender */
        #kalender-list .timeline-track {
            position: relative;
        }
        #kalender-list .timeline-track::before {
            content: '';
            position: absolute;
            left: 24px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #10b981, #14b8a6, #06b6d4);
            border-radius: 2px;
        }
        #kalender-list .timeline-item {
            position: relative;
            padding: 16px 20px 16px 60px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 16px;
            transition: all .3s;
        }
        #kalender-list .timeline-item:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
        }
        #kalender-list .timeline-dot {
            position: absolute;
            left: 16px;
            top: 22px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #10b981;
            border: 3px solid #fff;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
            z-index: 1;
        }
        #kalender-list .timeline-date {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #kalender-list .timeline-title {
            font-size: 15px;
            font-weight: 800;
            color: #1e293b;
            margin-top: 2px;
        }
        #kalender-list .timeline-desc {
            font-size: 13px;
            color: #94a3b8;
            font-weight: 500;
            margin-top: 2px;
        }
        #kalender-list .timeline-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.12);
            color: #059669;
        }
        html.dark #kalender-list .timeline-title {
            color: #f1f5f9;
        }
        html.dark #kalender-list .timeline-dot {
            border-color: #1e293b;
        }

        /* Timeline aktif — menyala */
        #kalender-list .timeline-item.active {
            border-color: #10b981;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.1);
            animation: glowPulse 2s ease-in-out infinite;
        }
        #kalender-list .timeline-item.active .timeline-dot {
            background: #10b981;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.6);
            animation: dotPulse 2s ease-in-out infinite;
        }
        #kalender-list .timeline-item.active .timeline-title {
            color: #059669;
        }
        html.dark #kalender-list .timeline-item.active .timeline-title {
            color: #34d399;
        }
        #kalender-list .timeline-item.past {
            opacity: .45;
            filter: grayscale(.6);
        }
        #kalender-list .timeline-item.past:hover {
            opacity: .7;
            filter: grayscale(.3);
        }
        html.dark #kalender-list .timeline-item.active {
            border-color: #34d399;
            box-shadow: 0 0 20px rgba(52, 211, 153, 0.25), 0 0 60px rgba(52, 211, 153, 0.08);
        }

        html.dark #kalender-list .timeline-item.past {
            opacity: .35;
        }
        #kalender-list .toggle-all-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 20px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 13px;
            color: #059669;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.2);
            cursor: pointer;
            transition: all .3s;
        }
        #kalender-list .toggle-all-btn:hover {
            background: rgba(16, 185, 129, 0.15);
            transform: translateY(-1px);
        }
        html.dark #kalender-list .toggle-all-btn {
            color: #34d399;
            background: rgba(52, 211, 153, 0.1);
            border-color: rgba(52, 211, 153, 0.2);
        }
        html.dark #kalender-list .toggle-all-btn:hover {
            background: rgba(52, 211, 153, 0.18);
        }

        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.1); }
            50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.5), 0 0 80px rgba(16, 185, 129, 0.2); }
        }
        @keyframes dotPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.6); }
            50% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.2), 0 0 30px rgba(16, 185, 129, 0.8); }
        }

#ai-chat-btn {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 9999;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
            color: #fff;
            border: none;
            box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s;
            animation: chatPulse 2.5s ease-in-out infinite;
        }
        #ai-chat-btn::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
            z-index: -1;
            animation: chatRing 2.5s ease-in-out infinite;
        }
        @keyframes chatPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5); }
            50% { transform: scale(1.05); box-shadow: 0 12px 48px rgba(139, 92, 246, 0.7); }
        }
        @keyframes chatRing {
            0%, 100% { opacity: .5; transform: scale(1); }
            50% { opacity: 0; transform: scale(1.3); }
        }
        #ai-chat-btn:hover {
            animation: none;
            transform: scale(1.12);
            box-shadow: 0 16px 48px rgba(139, 92, 246, 0.6);
        }
        #ai-chat-btn i {
            font-size: 28px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        @media (max-width: 640px) {
            #ai-chat-btn {
                width: 50px;
                height: 50px;
                bottom: 18px;
                right: 18px;
            }
            #ai-chat-btn i {
                font-size: 22px;
            }
            #ai-chat-label {
                font-size: 12px;
                padding: 6px 12px;
                bottom: 34px;
                right: 76px;
            }
            #ai-chat-panel {
                width: calc(100vw - 24px);
                height: 60vh;
                bottom: 76px;
                right: 12px;
            }
        }

        #ai-chat-label {
            position: fixed;
            bottom: 46px;
            right: 104px;
            z-index: 9998;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #fff;
            padding: 8px 16px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            pointer-events: none;
            animation: labelIn .5s ease .5s both;
        }
        #ai-chat-label::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-left-color: rgba(15, 23, 42, 0.85);
        }
        @keyframes labelIn {
            from { opacity: 0; transform: translateX(10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        #ai-chat-panel {
            position: fixed;
            bottom: 92px;
            right: 24px;
            z-index: 9999;
            width: 360px;
            max-width: calc(100vw - 48px);
            height: 520px;
            max-height: calc(100vh - 140px);
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 24px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        #ai-chat-panel.open {
            display: flex;
        }

        #ai-chat-header {
            padding: 16px 20px;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }
        #ai-chat-header i {
            font-size: 22px;
        }
        #ai-chat-header span {
            flex: 1;
            font-size: 15px;
        }
        #ai-chat-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            opacity: .7;
            padding: 0;
        }
        #ai-chat-close:hover {
            opacity: 1;
        }

        #ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            scroll-behavior: smooth;
        }
        #ai-chat-messages::-webkit-scrollbar {
            width: 4px;
        }
        #ai-chat-messages::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .chat-msg {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.5;
            animation: msgIn .3s ease;
        }
        @keyframes msgIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .chat-msg.user {
            align-self: flex-end;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        .chat-msg.bot {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(226, 232, 240, 0.8);
            color: #1e293b;
            border-bottom-left-radius: 4px;
        }
        .chat-msg.bot i {
            margin-right: 6px;
        }
        .quick-q {
            font-size:11px;padding:6px 12px;border-radius:999px;border:1px solid #cbd5e1;
            background:#f8fafc;color:#475569;cursor:pointer;font-weight:600;
            transition:all 0.2s;white-space:nowrap;
        }
        .quick-q:hover { background:#e2e8f0;border-color:#94a3b8; }
        html.dark .quick-q { background:#1e293b;border-color:#334155;color:#cbd5e1; }
        html.dark .quick-q:hover { background:#334155; }

        #ai-chat-input-area {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid rgba(226, 232, 240, 0.6);
            background: rgba(255, 255, 255, 0.5);
        }
        #ai-chat-input {
            flex: 1;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 14px;
            outline: none;
            background: #fff;
            font-family: inherit;
        }
        #ai-chat-input:focus {
            border-color: #3b82f6;
        }
        #ai-chat-send {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #fff;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all .2s;
        }
        #ai-chat-send:hover {
            transform: scale(1.05);
        }
        #ai-chat-send i {
            font-size: 18px;
        }
        #ai-chat-send:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        .typing-indicator {
            align-self: flex-start;
            display: flex;
            gap: 4px;
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 16px;
            border-bottom-left-radius: 4px;
        }
        .typing-indicator span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #94a3b8;
            animation: typing 1.4s infinite;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: .2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: .4s;
        }
        @keyframes typing {
            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: .4;
            }
            30% {
                transform: translateY(-6px);
                opacity: 1;
            }
        }