@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .subtab-content { display: none; }
        .subtab-content.active { display: block; }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Konsistensi tabel data pada layar sempit dan panel bertingkat */
        .overflow-x-auto,
        .app-table-scroll {
            -webkit-overflow-scrolling: touch;
        }
        .overflow-x-auto > table th,
        .overflow-x-auto > table td,
        .app-data-table th,
        .app-data-table td {
            vertical-align: middle;
        }
        .overflow-x-auto > table tbody td:last-child,
        .app-data-table tbody td:last-child {
            white-space: nowrap;
        }
        .overflow-x-auto > table button,
        .app-data-table button {
            vertical-align: middle;
            flex-shrink: 0;
        }

        @media (max-width: 640px) {
            .overflow-x-auto > table th,
            .overflow-x-auto > table td,
            .app-data-table th,
            .app-data-table td {
                padding-top: 0.65rem;
                padding-bottom: 0.65rem;
            }
        }

        /* ===== CSS KALENDER ===== */
        .calendar-day {
            aspect-ratio: 1/1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 6px 2px;
            border-radius: 12px;
            background: white;
            border: 1px solid #f1f5f9;
            transition: all 0.2s ease;
            cursor: default;
            min-height: 50px;
            position: relative;
        }
        .calendar-day:hover {
            border-color: #10b981;
            background: #f0fdf4;
        }
        .calendar-day.other-month {
            opacity: 0.3;
        }
        .calendar-day.today {
            border-color: #10b981;
            background: #ecfdf5;
        }
        .calendar-day .day-number {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }
        .calendar-day.today .day-number {
            color: #047857;
        }
        .calendar-day .event-dots {
            display: flex;
            gap: 3px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2px;
        }
        .calendar-day .event-dots .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .calendar-day .event-dots .dot.korwil {
            background: #10b981;
        }
        .calendar-day .event-dots .dot.kota {
            background: #3b82f6;
        }
        .calendar-day .event-dots .dot.sayap {
            background: #f59e0b;
        }
        .calendar-day.has-events:hover {
            cursor: pointer;
            border-color: #10b981;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
        }
        .calendar-day .event-count {
            font-size: 8px;
            font-weight: 700;
            color: #94a3b8;
            margin-top: 1px;
        }
        .calendar-day .event-count.has {
            color: #047857;
        }

        @media (max-width: 640px) {
            .calendar-day {
                min-height: 40px;
                padding: 4px 1px;
                border-radius: 8px;
            }
            .calendar-day .day-number {
                font-size: 11px;
            }
            .calendar-day .event-dots .dot {
                width: 4px;
                height: 4px;
            }
            .calendar-day .event-count {
                font-size: 7px;
            }
        }

        /* Animasi untuk export */
        .calendar-exporting #calendar-grid {
            background: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .calendar-exporting .calendar-day {
            border-color: #e2e8f0;
        }
        .calendar-exporting .calendar-day.has-events {
            border-color: #10b981;
        }

        /* Modal Jadwal Manaqib - Lebih Ringkas */
        .modal-jadwal-form .form-label {
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 2px;
        }
        .modal-jadwal-form .form-control {
            width: 100%;
            height: 38px;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            outline: none;
            font-size: 13px;
            background: white;
            color: #1e293b;
            transition: border-color 0.2s;
        }
        .modal-jadwal-form .form-control:focus {
            border-color: #10b981;
        }
        .modal-jadwal-form .form-textarea {
            width: 100%;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            outline: none;
            font-size: 13px;
            background: white;
            color: #1e293b;
            resize: none;
            transition: border-color 0.2s;
            min-height: 56px;
        }
        .modal-jadwal-form .form-textarea:focus {
            border-color: #10b981;
        }