300	        .performer-card:hover {
301	            transform: rotate(0deg);
302	        }
303
304	        .performer-card::before {
305	            content: '';
306	            position: absolute;
307	            inset: 0;
308	            background: radial-gradient(circle at 80% 20%, rgba(184,130,42,.28) 0%, transparent 65%);
309	            pointer-events: none;
310	        }
311
312	        .performer-label {
313	            font-size: 10px;
314	            letter-spacing: .18em;
315	            text-transform: uppercase;
316	            color: rgba(255,255,255,.38);
317	            margin-bottom: 14px;
318	            display: flex;
319	            align-items: center;
320	            gap: 7px;
321	        }
322
323	        .performer-name {
324	            font-family: 'Fraunces', serif;
325	            font-size: 20px;
326	            font-weight: 600;
327	            color: #fff;
328	            line-height: 1.2;
329	            margin-bottom: 4px;
330	        }
331
332	        .performer-score {
333	            font-size: 11px;
334	            color: rgba(255,255,255,.45);
335	            margin-bottom: 16px;
336	        }
337
338	        .performer-track {
339	            height: 4px;
340	            background: rgba(255,255,255,.1);
341	            border-radius: 99px;
342	            overflow: hidden;
343	        }
344
345	        .performer-fill {
346	            height: 100%;
347	            border-radius: 99px;
348	            background: linear-gradient(90deg, var(--gold), var(--gold-light));
349	            transition: width 1.4s cubic-bezier(.16,1,.3,1);
350	        }
351
352	        .performer-bottom {
353	            display: flex;
354	            justify-content: space-between;
355	            align-items: baseline;
356	            margin-top: 8px;
357	        }
358
359	        .performer-pct {
360	            font-family: 'Fraunces', serif;
361	            font-size: 28px;
362	            font-weight: 700;
363	            color: var(--gold-light);
364	            line-height: 1;
365	        }
366
367	        .performer-sub {
368	            font-size: 11px;
369	            color: rgba(255,255,255,.35);
370	        }
371
372	        /* MAIN */
373	        .main {
374	            padding: 32px 56px 56px;
375	        }
376
377	        /* STAT CARDS */
378	        .stats-grid {
379	            display: grid;
380	            grid-template-columns: repeat(4, 1fr);
381	            gap: 16px;
382	            margin-bottom: 28px;
383	        }
384
385	        .stat-card {
386	            background: var(--surface);
387	            border: 1px solid var(--border);
388	            border-radius: var(--r-lg);
389	            padding: 22px 22px 20px;
390	            position: relative;
391	            overflow: hidden;
392	            box-shadow: var(--shadow-sm);
393	            animation: fadeUp .5s ease both;
394	            transition: box-shadow .25s ease, border-color .25s ease;
395	        }
396
397	        .stat-card:hover {
398	            box-shadow: var(--shadow-md);
399	            border-color: var(--border-dark);
400	        }
401
402	        .stat-accent {
403	            position: absolute;
404	            top: 0;
405	            left: 0;
406	            right: 0;
407	            height: 3px;
408	            border-radius: var(--r-lg) var(--r-lg) 0 0;
409	        }
410
411	        .stat-icon-wrap {
412	            width: 40px;
413	            height: 40px;
414	            border-radius: 10px;
415	            display: flex;
416	            align-items: center;
417	            justify-content: center;
418	            margin-bottom: 14px;
419	        }
420
421	        .stat-num {
422	            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
423	            font-size: 42px;
424	            font-weight: 700;
425	            line-height: 1;
426	            letter-spacing: -.02em;
427	            color: var(--ink);
428	        }
429
430	        .stat-num .unit {
431	            font-size: 24px;
432	            font-weight: 300;
433	            color: var(--gold);
434	        }
435
436	        .stat-lbl {
437	            font-size: 11px;
438	            font-weight: 500;
439	            color: var(--ink-muted);
440	            letter-spacing: .07em;
441	            text-transform: uppercase;
442	            margin-top: 6px;
443	        }
444
445	        .stat-tag {
446	            display: inline-flex;
447	            align-items: center;
448	            gap: 4px;
449	            font-size: 11px;
450	            font-weight: 500;
451	            margin-top: 10px;
452	            padding: 3px 8px;
453	            border-radius: 99px;
454	        }
455
456	        /* SECTION / CONTROLS */
457	        .section-head {
458	            display: flex;
459	            align-items: center;
460	            justify-content: space-between;
461	            margin-bottom: 10px;
462	            gap: 16px;
463	            flex-wrap: wrap;
464	        }
465
466	        .section-title {
467	            font-size: 13px;
468	            font-weight: 600;
469	            color: var(--ink);
470	            display: flex;
471	            align-items: center;
472	            gap: 8px;
473	        }
474
475	        .count-badge {
476	            background: var(--bg-alt);
477	            border: 1px solid var(--border);
478	            border-radius: 99px;
479	            padding: 2px 10px;
480	            font-size: 11px;
481	            font-weight: 500;
482	            color: var(--ink-soft);
483	        }
484
485	        .controls-row {
486	            display: flex;
487	            align-items: center;
488	            gap: 10px;
489	            flex-wrap: wrap;
490	        }
491
492	        .dept-row {
493	            display: flex;
494	            align-items: center;
495	            gap: 8px;
496	            margin-bottom: 14px;
497	            flex-wrap: wrap;
498	        }
499
500	        .dept-label {
501	            font-size: 11px;
502	            font-weight: 500;
503	            color: var(--ink-muted);
504	            letter-spacing: .06em;
505	            text-transform: uppercase;
506	        }
507
508	        .search-wrap {
509	            position: relative;
510	        }
511
512	        .search-icon {
513	            position: absolute;
514	            left: 12px;
515	            top: 50%;
516	            transform: translateY(-50%);
517	            color: var(--ink-muted);
518	            pointer-events: none;
519	        }
520
521	        .search-input {
522	            background: var(--white);
523	            border: 1px solid var(--border);
524	            border-radius: var(--r-sm);
525	            padding: 9px 14px 9px 36px;
526	            width: 220px;
527	            color: var(--ink);
528	            font-family: 'DM Sans', sans-serif;
529	            font-size: 13px;
530	            outline: none;
531	            transition: border-color .2s, box-shadow .2s;
532	            box-shadow: var(--shadow-sm);
533	        }
534
535	        .search-input::placeholder {
536	            color: var(--ink-muted);
537	        }
538
539	        .search-input:focus {
540	            border-color: var(--gold-border);
541	            box-shadow: 0 0 0 3px var(--gold-pale);
542	        }
543
544	        .filter-group {
545	            display: flex;
546	            align-items: center;
547	            background: var(--white);
548	            border: 1px solid var(--border);
549	            border-radius: var(--r-sm);
550	            overflow: hidden;
551	            box-shadow: var(--shadow-sm);
552	        }
553
554	        .filter-btn {
555	            display: flex;
556	            align-items: center;
557	            gap: 6px;
558	            padding: 8px 13px;
559	            font-family: 'DM Sans', sans-serif;
560	            font-size: 12px;
561	            font-weight: 500;
562	            color: var(--ink-soft);
563	            background: transparent;
564	            border: none;
565	            border-right: 1px solid var(--border);
566	            cursor: pointer;
567	            transition: background .15s, color .15s;
568	            white-space: nowrap;
569	        }
570
571	        .filter-btn:last-child {
572	            border-right: none;
573	        }
574
575	        .filter-btn:hover {
576	            background: var(--bg);
577	            color: var(--ink);
578	        }
579
580	        .filter-btn.active {
581	            background: var(--gold-pale);
582	            color: var(--gold);
583	        }
584
585	        .dept-btn {
586	            display: inline-flex;
587	            align-items: center;
588	            gap: 6px;
589	            padding: 6px 12px;
590	            font-family: 'DM Sans', sans-serif;
591	            font-size: 11px;
592	            font-weight: 500;
593	            color: var(--ink-soft);
594	            background: var(--white);
595	            border: 1px solid var(--border);
596	            border-radius: 99px;
597	            cursor: pointer;
598	            transition: background .15s, color .15s, border-color .15s;
599	            box-shadow: var(--shadow-sm);

        .performer-card:hover {
            transform: rotate(0deg);
        }

        .performer-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 80% 20%, rgba(184,130,42,.28) 0%, transparent 65%);
            pointer-events: none;
        }

        .performer-label {
            font-size: 10px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255,255,255,.38);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .performer-name {
            font-family: 'Fraunces', serif;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .performer-score {
            font-size: 11px;
            color: rgba(255,255,255,.45);
            margin-bottom: 16px;
        }

        .performer-track {
            height: 4px;
            background: rgba(255,255,255,.1);
            border-radius: 99px;
            overflow: hidden;
        }

        .performer-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
            transition: width 1.4s cubic-bezier(.16,1,.3,1);
        }

        .performer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 8px;
        }

        .performer-pct {
            font-family: 'Fraunces', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--gold-light);
            line-height: 1;
        }

        .performer-sub {
            font-size: 11px;
            color: rgba(255,255,255,.35);
        }

        /* MAIN */
        .main {
            padding: 32px 56px 56px;
        }

        /* STAT CARDS */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            padding: 22px 22px 20px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            animation: fadeUp .5s ease both;
            transition: box-shadow .25s ease, border-color .25s ease;
        }

        .stat-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--border-dark);
        }

        .stat-accent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: var(--r-lg) var(--r-lg) 0 0;
        }

        .stat-icon-wrap {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
        }

        .stat-num {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 42px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -.02em;
            color: var(--ink);
        }

        .stat-num .unit {
            font-size: 24px;
            font-weight: 300;
            color: var(--gold);
        }

        .stat-lbl {
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-muted);
            letter-spacing: .07em;
            text-transform: uppercase;
            margin-top: 6px;
        }

        .stat-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 500;
            margin-top: 10px;
            padding: 3px 8px;
            border-radius: 99px;
        }

        /* SECTION / CONTROLS */
        .section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            gap: 16px;
            flex-wrap: wrap;
        }

        .section-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .count-badge {
            background: var(--bg-alt);
            border: 1px solid var(--border);
            border-radius: 99px;
            padding: 2px 10px;
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-soft);
        }

        .controls-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .dept-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .dept-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-muted);
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .search-wrap {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ink-muted);
            pointer-events: none;
        }

        .search-input {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            padding: 9px 14px 9px 36px;
            width: 220px;
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input::placeholder {
            color: var(--ink-muted);
        }

        .search-input:focus {
            border-color: var(--gold-border);
            box-shadow: 0 0 0 3px var(--gold-pale);
        }

        .filter-group {
            display: flex;
            align-items: center;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 13px;
            font-family: 'DM Sans', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink-soft);
            background: transparent;
            border: none;
            border-right: 1px solid var(--border);
            cursor: pointer;
            transition: background .15s, color .15s;
            white-space: nowrap;
        }

        .filter-btn:last-child {
            border-right: none;
        }

        .filter-btn:hover {
            background: var(--bg);
            color: var(--ink);
        }

        .filter-btn.active {
            background: var(--gold-pale);
            color: var(--gold);
        }

        .dept-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-soft);
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 99px;
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm);


600	            white-space: nowrap;
601	        }
602
603	        .dept-btn:hover {
604	            background: var(--bg);
605	            color: var(--ink);
606	        }
607
608	        .dept-btn.active {
609	            background: var(--gold-pale);
610	            border-color: var(--gold-border);
611	            color: var(--gold);
612	        }
613
614	        .sort-btn {
615	            display: flex;
616	            align-items: center;
617	            gap: 6px;
618	            padding: 9px 14px;
619	            background: var(--white);
620	            border: 1px solid var(--border);
621	            border-radius: var(--r-sm);
622	            font-family: 'DM Sans', sans-serif;
623	            font-size: 12px;
624	            font-weight: 500;
625	            color: var(--ink-soft);
626	            cursor: pointer;
627	            box-shadow: var(--shadow-sm);
628	            transition: background .15s, border-color .15s, color .15s;
629	            white-space: nowrap;
630	        }
631
632	        .sort-btn:hover {
633	            background: var(--bg);
634	            border-color: var(--border-dark);
635	            color: var(--ink);
636	        }
637
638	        /* TABLE */
639	        .table-card {
640	            background: var(--surface);
641	            border: 1px solid var(--border);
642	            border-radius: var(--r-xl);
643	            overflow: hidden;
644	            box-shadow: var(--shadow-md);
645	        }
646
647	        .table-head {
648	            display: grid;
649	            grid-template-columns: 1.4fr 80px 1fr 90px 140px;
650	            padding: 12px 28px;
651	            background: var(--bg-alt);
652	            border-bottom: 1px solid var(--border);
653	            column-gap: 16px;
654	        }
655
656	        .th {
657	            font-size: 10px;
658	            font-weight: 600;
659	            letter-spacing: .12em;
660	            text-transform: uppercase;
661	            color: var(--ink-muted);
662	        }
663
664	        .th.right {
665	            text-align: right;
666	        }
667
668	        .th.center {
669	            text-align: center;
670	        }
671
672	        .learner-row {
673	            display: grid;
674	            grid-template-columns: 1.4fr 80px 1fr 90px 140px;
675	            column-gap: 16px;
676	            align-items: center;
677	            padding: 15px 24px;
678	            border-bottom: 1px solid var(--border);
679	            transition: background .15s;
680	            animation: fadeUp .4s ease both;
681	        }
682
683	        .learner-row:last-child {
684	            border-bottom: none;
685	        }
686
687	        .learner-row:hover {
688	            background: var(--bg);
689	        }
690
691	        .learner-info {
692	            display: flex;
693	            align-items: center;
694	            gap: 12px;
695	            overflow: hidden;
696	        }
697
698	        .avatar {
699	            width: 36px;
700	            height: 36px;
701	            border-radius: 50%;
702	            display: flex;
703	            align-items: center;
704	            justify-content: center;
705	            font-family: 'Fraunces', serif;
706	            font-size: 13px;
707	            font-weight: 700;
708	            flex-shrink: 0;
709	            border: 2px solid;
710	        }
711
712	        .learner-meta {
713	            overflow: hidden;
714	        }
715
716	        .learner-name {
717	            font-size: 13px;
718	            font-weight: 500;
719	            color: var(--ink);
720	            white-space: nowrap;
721	            overflow: hidden;
722	            text-overflow: ellipsis;
723	        }
724
725	        .learner-dept {
726	            font-size: 10px;
727	            color: var(--ink-muted);
728	            margin-top: 2px;
729	            white-space: nowrap;
730	            overflow: hidden;
731	            text-overflow: ellipsis;
732	        }
733
734	        .cell {
735	            font-size: 13px;
736	            color: var(--ink-soft);
737	        }
738
739	        .cell.right {
740	            text-align: right;
741	        }
742
743	        .cell.center {
744	            text-align: center;
745	        }
746
747	        .sessions-done {
748	            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
749	            font-weight: 700;
750	            color: var(--ink);
751	            font-size: 26px;
752	            letter-spacing: -0.02em;
753	            line-height: 1;
754	        }
755
756	        .progress-cell {
757	            padding-right: 8px;
758	            padding-left: 4px;
759	        }
760
761	        .progress-track {
762	            height: 6px;
763	            background: var(--bg-alt);
764	            border-radius: 99px;
765	            overflow: hidden;
766	            border: 1px solid var(--border);
767	        }
768
769	        .progress-fill {
770	            height: 100%;
771	            border-radius: 99px;
772	            transition: width 1.2s cubic-bezier(.16,1,.3,1);
773	        }
774
775	        .progress-lbl {
776	            font-size: 10px;
777	            color: var(--ink-muted);
778	            margin-top: 4px;
779	        }
780
781	        .pct-cell {
782	            text-align: right;
783	            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
784	            font-size: 24px;
785	            font-weight: 700;
786	            line-height: 1;
787	        }
788
789	        .pct-cell small {
790	            font-family: 'DM Sans', sans-serif;
791	            font-size: 11px;
792	            font-weight: 400;
793	            color: var(--ink-muted);
794	        }
795
796	        .week-badge {
797	            display: inline-flex;
798	            align-items: center;
799	            justify-content: center;
800	            padding: 3px 10px;
801	            border-radius: 99px;
802	            font-size: 10px;
803	            font-weight: 600;
804	        }
805
806	        .w0 {
807	            background: var(--slate-bg);
808	            color: var(--ink-muted);
809	            border: 1px solid var(--slate-border);
810	        }
811
812	        .w1 {
813	            background: var(--blue-bg);
814	            color: var(--blue);
815	            border: 1px solid var(--blue-border);
816	        }
817
818	        .w2 {
819	            background: var(--amber-bg);
820	            color: var(--amber);
821	            border: 1px solid var(--amber-border);
822	        }
823
824	        .w3 {
825	            background: var(--green-bg);
826	            color: var(--green);
827	            border: 1px solid var(--green-border);
828	        }
829
830	        .status-badge {
831	            display: inline-flex;
832	            align-items: center;
833	            gap: 5px;
834	            padding: 4px 10px;
835	            border-radius: 99px;
836	            font-size: 10px;
837	            font-weight: 600;
838	        }
839
840	        .not-started {
841	            background: var(--slate-bg);
842	            color: var(--ink-muted);
843	            border: 1px solid var(--slate-border);
844	        }
845
846	        .in-progress {
847	            background: var(--amber-bg);
848	            color: var(--amber);
849	            border: 1px solid var(--amber-border);
850	        }
851
852	        .completed {
853	            background: var(--green-bg);
854	            color: var(--green);
855	            border: 1px solid var(--green-border);
856	        }
857
858	        .not-activated {
859	            background: #fff0ee;
860	            color: #d64828;
861	            border: 1px solid #f5b5a8;
862	        }
863
864	        .row-num {
865	            font-family: 'Fraunces', serif;
866	            font-size: 13px;
867	            font-weight: 600;
868	            color: var(--ink-muted);
869	            min-width: 22px;
870	            text-align: right;
871	            flex-shrink: 0;
872	        }
873
874	        .batch-pill {
875	            display: inline-flex;
876	            align-items: center;
877	            padding: 1px 7px;
878	            border-radius: 99px;
879	            font-size: 9px;
880	            font-weight: 700;
881	            letter-spacing: .06em;
882	            vertical-align: middle;
883	        }
884
885	        .batch-1 {
886	            background: var(--blue-bg);
887	            color: var(--blue);
888	            border: 1px solid var(--blue-border);
889	        }
890
891	        .batch-2 {
892	            background: var(--violet-bg);
893	            color: var(--violet);
894	            border: 1px solid var(--violet-border);
895	        }
896
897	        .batch-btn {
898	            display: inline-flex;
899	            align-items: center;
900	            gap: 6px;
901	            padding: 6px 12px;
902	            font-family: 'DM Sans', sans-serif;
903	            font-size: 11px;
904	            font-weight: 500;
905	            color: var(--ink-soft);
906	            background: var(--white);
907	            border: 1px solid var(--border);
908	            border-radius: 99px;
909	            cursor: pointer;
910	            transition: background .15s, color .15s, border-color .15s;
911	            box-shadow: var(--shadow-sm);
912	            white-space: nowrap;
913	        }
914
915	        .batch-btn:hover {
916	            background: var(--bg);
917	            color: var(--ink);
918	        }
919
920	        .batch-btn.active {
921	            background: var(--gold-pale);
922	            border-color: var(--gold-border);
923	            color: var(--gold);
924	        }
925
926	        /* EMPTY */
927	        .empty-state {
928	            padding: 56px 24px;
929	            text-align: center;
930	            color: var(--ink-muted);
931	            font-size: 13px;
932	            display: none;
933	        }
934
935	        .card-footer {
936	            display: none;
937	        }
938
939	        /* FOOTER */
940	        .footer {
941	            text-align: center;
942	            padding: 20px 56px;
943	            font-size: 11px;
944	            color: var(--ink-muted);
945	            border-top: 1px solid var(--border);
946	            background: var(--white);
947	            letter-spacing: .05em;
948	        }
949
950	        .footer strong {
951	            color: var(--gold);
952	            font-weight: 600;
953	        }
954
955	        @media (max-width:1140px) {
956	            .stats-grid {
957	                grid-template-columns: repeat(2, 1fr);
958	            }
959	            .table-head, .learner-row {
960	                grid-template-columns: 1.2fr 70px 1fr 80px 130px;
961	                column-gap: 10px;
962	            }
963	        }
964
965	        @media (max-width:900px) {
966	            .topbar {
967	                padding: 0 16px;
968	                height: 48px;
969	            }
970	            .topbar-tag:last-child {
971	                display: none;
972	            }
973	            .hero {
974	                padding: 24px 16px 20px;
975	            }
976	            .main {
977	                padding: 16px 16px 48px;
978	            }
979	            .footer {
980	                padding: 14px 16px;
981	                font-size: 10px;
982	            }
983	            .hero-inner {
984	                flex-direction: column;
985	                gap: 16px;
986	            }
987	            .hero-title {
988	                font-size: 28px;
989	            }
990	            .hero-meta {
991	                flex-wrap: wrap;
992	                width: 100%;
993	            }
994	            .meta-chip {
995	                padding: 8px 14px;
996	                font-size: 11px;
997	                flex: 1 1 40%;
998	            }
999	            .stats-grid {

            white-space: nowrap;
        }

        .dept-btn:hover {
            background: var(--bg);
            color: var(--ink);
        }

        .dept-btn.active {
            background: var(--gold-pale);
            border-color: var(--gold-border);
            color: var(--gold);
        }

        .sort-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            font-family: 'DM Sans', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink-soft);
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            transition: background .15s, border-color .15s, color .15s;
            white-space: nowrap;
        }

        .sort-btn:hover {
            background: var(--bg);
            border-color: var(--border-dark);
            color: var(--ink);
        }

        /* TABLE */
        .table-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-xl);
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .table-head {
            display: grid;
            grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            padding: 12px 28px;
            background: var(--bg-alt);
            border-bottom: 1px solid var(--border);
            column-gap: 16px;
        }

        .th {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink-muted);
        }

        .th.right {
            text-align: right;
        }

        .th.center {
            text-align: center;
        }

        .learner-row {
            display: grid;
            grid-template-columns: 1.4fr 80px 1fr 90px 140px;
            column-gap: 16px;
            align-items: center;
            padding: 15px 24px;
            border-bottom: 1px solid var(--border);
            transition: background .15s;
            animation: fadeUp .4s ease both;
        }

        .learner-row:last-child {
            border-bottom: none;
        }

        .learner-row:hover {
            background: var(--bg);
        }

        .learner-info {
            display: flex;
            align-items: center;
            gap: 12px;
            overflow: hidden;
        }

        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Fraunces', serif;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
            border: 2px solid;
        }

        .learner-meta {
            overflow: hidden;
        }

        .learner-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .learner-dept {
            font-size: 10px;
            color: var(--ink-muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cell {
            font-size: 13px;
            color: var(--ink-soft);
        }

        .cell.right {
            text-align: right;
        }

        .cell.center {
            text-align: center;
        }

        .sessions-done {
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-weight: 700;
            color: var(--ink);
            font-size: 26px;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .progress-cell {
            padding-right: 8px;
            padding-left: 4px;
        }

        .progress-track {
            height: 6px;
            background: var(--bg-alt);
            border-radius: 99px;
            overflow: hidden;
            border: 1px solid var(--border);
        }

        .progress-fill {
            height: 100%;
            border-radius: 99px;
            transition: width 1.2s cubic-bezier(.16,1,.3,1);
        }

        .progress-lbl {
            font-size: 10px;
            color: var(--ink-muted);
            margin-top: 4px;
        }

        .pct-cell {
            text-align: right;
            font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
        }

        .pct-cell small {
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            font-weight: 400;
            color: var(--ink-muted);
        }

        .week-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 10px;
            border-radius: 99px;
            font-size: 10px;
            font-weight: 600;
        }

        .w0 {
            background: var(--slate-bg);
            color: var(--ink-muted);
            border: 1px solid var(--slate-border);
        }

        .w1 {
            background: var(--blue-bg);
            color: var(--blue);
            border: 1px solid var(--blue-border);
        }

        .w2 {
            background: var(--amber-bg);
            color: var(--amber);
            border: 1px solid var(--amber-border);
        }

        .w3 {
            background: var(--green-bg);
            color: var(--green);
            border: 1px solid var(--green-border);
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 99px;
            font-size: 10px;
            font-weight: 600;
        }

        .not-started {
            background: var(--slate-bg);
            color: var(--ink-muted);
            border: 1px solid var(--slate-border);
        }

        .in-progress {
            background: var(--amber-bg);
            color: var(--amber);
            border: 1px solid var(--amber-border);
        }

        .completed {
            background: var(--green-bg);
            color: var(--green);
            border: 1px solid var(--green-border);
        }

        .not-activated {
            background: #fff0ee;
            color: #d64828;
            border: 1px solid #f5b5a8;
        }

        .row-num {
            font-family: 'Fraunces', serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-muted);
            min-width: 22px;
            text-align: right;
            flex-shrink: 0;
        }

        .batch-pill {
            display: inline-flex;
            align-items: center;
            padding: 1px 7px;
            border-radius: 99px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .06em;
            vertical-align: middle;
        }

        .batch-1 {
            background: var(--blue-bg);
            color: var(--blue);
            border: 1px solid var(--blue-border);
        }

        .batch-2 {
            background: var(--violet-bg);
            color: var(--violet);
            border: 1px solid var(--violet-border);
        }

        .batch-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-soft);
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 99px;
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            box-shadow: var(--shadow-sm);
            white-space: nowrap;
        }

        .batch-btn:hover {
            background: var(--bg);
            color: var(--ink);
        }

        .batch-btn.active {
            background: var(--gold-pale);
            border-color: var(--gold-border);
            color: var(--gold);
        }

        /* EMPTY */
        .empty-state {
            padding: 56px 24px;
            text-align: center;
            color: var(--ink-muted);
            font-size: 13px;
            display: none;
        }

        .card-footer {
            display: none;
        }

        /* FOOTER */
        .footer {
            text-align: center;
            padding: 20px 56px;
            font-size: 11px;
            color: var(--ink-muted);
            border-top: 1px solid var(--border);
            background: var(--white);
            letter-spacing: .05em;
        }

        .footer strong {
            color: var(--gold);
            font-weight: 600;
        }

        @media (max-width:1140px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .table-head, .learner-row {
                grid-template-columns: 1.2fr 70px 1fr 80px 130px;
                column-gap: 10px;
            }
        }

        @media (max-width:900px) {
            .topbar {
                padding: 0 16px;
                height: 48px;
            }
            .topbar-tag:last-child {
                display: none;
            }
            .hero {
                padding: 24px 16px 20px;
            }
            .main {
                padding: 16px 16px 48px;
            }
            .footer {
                padding: 14px 16px;
                font-size: 10px;
            }
            .hero-inner {
                flex-direction: column;
                gap: 16px;
            }
            .hero-title {
                font-size: 28px;
            }
            .hero-meta {
                flex-wrap: wrap;
                width: 100%;
            }
            .meta-chip {
                padding: 8px 14px;
                font-size: 11px;
                flex: 1 1 40%;
            }
            .stats-grid {


1000	                grid-template-columns: repeat(2, 1fr);
1001	                gap: 10px;
1002	            }
1003	            .stat-num {
1004	                font-size: 32px;
1005	            }
1006	            .stat-card {
1007	                padding: 16px 16px 14px;
1008	            }
1009	            .section-head {
1010	                flex-direction: column;
1011	                align-items: flex-start;
1012	                gap: 10px;
1013	            }
1014	            .controls-row {
1015	                width: 100%;
1016	                gap: 8px;
1017	            }
1018	            .search-wrap {
1019	                width: 100%;
1020	            }
1021	            .search-input {
1022	                width: 100%;
1023	                box-sizing: border-box;
1024	            }
1025	            .filter-group {
1026	                width: 100%;
1027	                overflow-x: auto;
1028	                -webkit-overflow-scrolling: touch;
1029	                display: flex;
1030	                flex-wrap: nowrap;
1031	            }
1032	            .filter-btn {
1033	                flex-shrink: 0;
1034	                justify-content: center;
1035	                padding: 10px 12px;
1036	                font-size: 11px;
1037	                min-height: 40px;
1038	            }
1039	            .dept-row, .batch-row {
1040	                flex-wrap: nowrap;
1041	                overflow-x: auto;
1042	                -webkit-overflow-scrolling: touch;
1043	                padding-bottom: 4px;
1044	            }
1045	            .dept-btn, .batch-btn {
1046	                flex-shrink: 0;
1047	                min-height: 36px;
1048	            }
1049	            .sort-btn {
1050	                min-height: 40px;
1051	            }
1052	            .table-head {
1053	                display: none;
1054	            }
1055	            .table-card {
1056	                background: transparent;
1057	                border: none;
1058	                box-shadow: none;
1059	            }
1060	            .learner-row {
1061	                display: flex !important;
1062	                flex-direction: column !important;
1063	                gap: 0;
1064	                padding: 0;
1065	                margin-bottom: 10px;
1066	                border: 1px solid var(--border);
1067	                border-radius: var(--r-lg);
1068	                background: var(--white);
1069	                box-shadow: var(--shadow-sm);
1070	                overflow: hidden;
1071	                column-gap: 0;
1072	                transition: box-shadow .2s;
1073	            }
1074	            .learner-row:active {
1075	                box-shadow: var(--shadow-md);
1076	            }
1077	            .learner-row:last-child {
1078	                border-bottom: 1px solid var(--border);
1079	            }
1080	            .learner-info {
1081	                padding: 14px 16px 12px;
1082	                border-bottom: 1px solid var(--border);
1083	                width: 100%;
1084	            }
1085	            .row-num {
1086	                font-size: 12px;
1087	                min-width: 18px;
1088	            }
1089	            .avatar {
1090	                width: 40px;
1091	                height: 40px;
1092	                font-size: 14px;
1093	            }
1094	            .learner-name {
1095	                font-size: 14px;
1096	            }
1097	            .learner-dept {
1098	                font-size: 11px;
1099	                margin-top: 3px;
1100	            }
1101	            .progress-cell {
1102	                padding: 12px 16px 12px !important;
1103	                border-bottom: 1px solid var(--border);
1104	                width: 100%;
1105	            }
1106	            .sessions-done {
1107	                font-size: 20px;
1108	            }
1109	            .pct-cell {
1110	                display: none !important;
1111	            }
1112	            .cell.center {
1113	                display: none !important;
1114	            }
1115	            .card-footer {
1116	                display: flex !important;
1117	                align-items: center;
1118	                justify-content: space-between;
1119	                padding: 10px 16px;
1120	                background: var(--bg-alt);
1121	            }
1122	            .card-footer-pct {
1123	                font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
1124	                font-size: 22px;
1125	                font-weight: 700;
1126	            }
1127	        }
1128
1129	        @media (max-width:480px) {
1130	            .topbar {
1131	                padding: 0 14px;
1132	                height: 46px;
1133	            }
1134	            .brand-sep, .brand-sub {
1135	                display: none;
1136	            }
1137	            .hero {
1138	                padding: 18px 14px 16px;
1139	            }
1140	            .hero-pill {
1141	                font-size: 10px;
1142	                padding: 4px 10px 4px 8px;
1143	                margin-bottom: 12px;
1144	            }
1145	            .hero-title {
1146	                font-size: 22px;
1147	                line-height: 1.18;
1148	            }
1149	            .hero-meta {
1150	                flex-direction: column;
1151	                border-radius: var(--r-sm);
1152	            }
1153	            .meta-chip {
1154	                flex: 1 1 100%;
1155	                border-right: none !important;
1156	                border-bottom: 1px solid var(--border);
1157	                padding: 9px 14px;
1158	            }
1159	            .meta-chip:last-child {
1160	                border-bottom: none;
1161	            }
1162	            .main {
1163	                padding: 14px 14px 56px;
1164	            }
1165	            .stats-grid {
1166	                grid-template-columns: 1fr 1fr;
1167	                gap: 8px;
1168	                margin-bottom: 20px;
1169	            }
1170	            .stat-card {
1171	                padding: 14px 14px 12px;
1172	                border-radius: var(--r-md);
1173	            }
1174	            .stat-num {
1175	                font-size: 26px;
1176	            }
1177	            .stat-num .unit {
1178	                font-size: 16px;
1179	            }
1180	            .stat-icon-wrap {
1181	                width: 32px;
1182	                height: 32px;
1183	                border-radius: 8px;
1184	                margin-bottom: 10px;
1185	            }
1186	            .stat-lbl {
1187	                font-size: 10px;
1188	            }
1189	            .stat-tag {
1190	                display: none;
1191	            }
1192	            .section-title {
1193	                font-size: 12px;
1194	            }
1195	            .count-badge {
1196	                font-size: 10px;
1197	            }
1198	            .filter-btn {
1199	                padding: 10px 10px;
1200	                font-size: 10px;
1201	            }
1202	            .dept-btn, .batch-btn {
1203	                font-size: 10px;
1204	                padding: 6px 10px;
1205	            }
1206	            .sort-btn {
1207	                font-size: 11px;
1208	                padding: 9px 12px;
1209	            }
1210	            .search-input {
1211	                font-size: 13px;
1212	                padding: 10px 14px 10px 34px;
1213	            }
1214	            .learner-row {
1215	                border-radius: var(--r-md);
1216	                margin-bottom: 8px;
1217	            }
1218	            .learner-info {
1219	                padding: 12px 14px 10px;
1220	            }
1221	            .avatar {
1222	                width: 36px;
1223	                height: 36px;
1224	                font-size: 12px;
1225	            }
1226	            .learner-name {
1227	                font-size: 13px;
1228	            }
1229	            .learner-dept {
1230	                font-size: 10px;
1231	            }
1232	            .progress-cell {
1233	                padding: 10px 14px 10px !important;
1234	            }
1235	            .sessions-done {
1236	                font-size: 18px;
1237	            }
1238	            .card-footer {
1239	                padding: 9px 14px;
1240	            }
1241	            .card-footer-pct {
1242	                font-size: 20px;
1243	            }
1244	            .status-badge {
1245	                font-size: 9px;
1246	                padding: 3px 8px;
1247	            }
1248	            .batch-pill {
1249	                font-size: 8px;
1250	                padding: 1px 6px;
1251	            }
1252	            .footer {
1253	                font-size: 10px;
1254	                padding: 12px 14px;
1255	            }
1256	        }
1257	    </style>
1258
1259
1260
1261

1262

1263
🤖

1264	            AI Coder
1265

1266	            DEWA
1267

1268

1269

1270
1271	                Live data
1272

1273

1274

1275
1276
1277

1278

1279

1280
📊 Learning Analytics

1281
AI Coder: Vibe Coder to Agentic Engineer

1282

1283
78 enrolled total

1284
93 sessions total

1285
3 week program

1286
Avg. —% complete

1287
— min watched total

1288

1289

1290

1291

1292
1293
1294

1295

1296

1297

1298
👥

1299
78

1300
Total Enrolled

1301
3 companies

1302

1303
1304

1305

1306
📈

1307
—%

1308
Average Progress

1309
Across all learners

1310

1311
1312

1313

1314
⚡

1315
—

1316
In Progress

1317
Actively learning

1318

1319
1320

1321

1322
⏸

1323
—

1324
Not Started

1325
0% completed

1326

1327

1328
1329
1330

1331
Learner Progress

1332	            78 learners
1333

1334
1335

1336

1337	                <button class="filter-btn active" onclick="setStatus('all', this)">All</button>
1338	                <button class="filter-btn" onclick="setStatus('in-progress', this)">In Progress</button>
1339	                <button class="filter-btn" onclick="setStatus('not-started', this)">Not Started</button>
1340	                <button class="filter-btn" onclick="setStatus('completed', this)">Completed</button>
1341	                <button class="filter-btn" onclick="setStatus('not-activated', this)">Not Activated</button>
1342

1343

1344
1345

1346	            High to Low
1347	            <button class="sort-btn" onclick="toggleSort()">High to Low</button>
1348

1349
1350

1351	            Batch:
1352	            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
1353	            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
1354	            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>
1355

1356
1357

1358	            Dept:
1359	            <button class="dept-btn active" onclick="setDept('all', this)">All departments</button>
1360	            <button class="dept-btn" onclick="setDept('Innovation & The Future', this)">Innovation & The Future</button>
1361	            <button class="dept-btn" onclick="setDept('Digital DEWA', this)">Digital DEWA</button>
1362	            <button class="dept-btn" onclick="setDept('Ducont', this)">Ducont</button>
1363	            <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING', this)">Power & Water</button>
1364	            <button class="dept-btn" onclick="setDept('BS&HR', this)">BS&HR</button>
1365	            <button class="dept-btn" onclick="setDept('Transmission Power', this)">Transmission Power</button>
1366	            <button class="dept-btn" onclick="setDept('Generation', this)">Generation</button>
1367	            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>
1368	            <button class="dept-btn" onclick="setDept('Internal Audit', this)">Internal Audit</button>
1369

1370
1371

1372

1373	                <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1374	                    <circle cx="11" cy="11" r="8"></circle>
1375	                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
1376	                </svg>
1377	                <input type="text" id="search-input" class="search-input" placeholder="Search learner...">
1378

1379

1380
1381
1382

1383

1384
Learner

1385
Batch

1386
Progress

1387
Done

1388
Status

1389

1390

1391

1392
1393

1394	            No learners match your filter.
1395

1396

1397
1398
1399

grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            .stat-num {
                font-size: 32px;
            }
            .stat-card {
                padding: 16px 16px 14px;
            }
            .section-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .controls-row {
                width: 100%;
                gap: 8px;
            }
            .search-wrap {
                width: 100%;
            }
            .search-input {
                width: 100%;
                box-sizing: border-box;
            }
            .filter-group {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                display: flex;
                flex-wrap: nowrap;
            }
            .filter-btn {
                flex-shrink: 0;
                justify-content: center;
                padding: 10px 12px;
                font-size: 11px;
                min-height: 40px;
            }
            .dept-row, .batch-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 4px;
            }
            .dept-btn, .batch-btn {
                flex-shrink: 0;
                min-height: 36px;
            }
            .sort-btn {
                min-height: 40px;
            }
            .table-head {
                display: none;
            }
            .table-card {
                background: transparent;
                border: none;
                box-shadow: none;
            }
            .learner-row {
                display: flex !important;
                flex-direction: column !important;
                gap: 0;
                padding: 0;
                margin-bottom: 10px;
                border: 1px solid var(--border);
                border-radius: var(--r-lg);
                background: var(--white);
                box-shadow: var(--shadow-sm);
                overflow: hidden;
                column-gap: 0;
                transition: box-shadow .2s;
            }
            .learner-row:active {
                box-shadow: var(--shadow-md);
            }
            .learner-row:last-child {
                border-bottom: 1px solid var(--border);
            }
            .learner-info {
                padding: 14px 16px 12px;
                border-bottom: 1px solid var(--border);
                width: 100%;
            }
            .row-num {
                font-size: 12px;
                min-width: 18px;
            }
            .avatar {
                width: 40px;
                height: 40px;
                font-size: 14px;
            }
            .learner-name {
                font-size: 14px;
            }
            .learner-dept {
                font-size: 11px;
                margin-top: 3px;
            }
            .progress-cell {
                padding: 12px 16px 12px !important;
                border-bottom: 1px solid var(--border);
                width: 100%;
            }
            .sessions-done {
                font-size: 20px;
            }
            .pct-cell {
                display: none !important;
            }
            .cell.center {
                display: none !important;
            }
            .card-footer {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                padding: 10px 16px;
                background: var(--bg-alt);
            }
            .card-footer-pct {
                font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif;
                font-size: 22px;
                font-weight: 700;
            }
        }

        @media (max-width:480px) {
            .topbar {
                padding: 0 14px;
                height: 46px;
            }
            .brand-sep, .brand-sub {
                display: none;
            }
            .hero {
                padding: 18px 14px 16px;
            }
            .hero-pill {
                font-size: 10px;
                padding: 4px 10px 4px 8px;
                margin-bottom: 12px;
            }
            .hero-title {
                font-size: 22px;
                line-height: 1.18;
            }
            .hero-meta {
                flex-direction: column;
                border-radius: var(--r-sm);
            }
            .meta-chip {
                flex: 1 1 100%;
                border-right: none !important;
                border-bottom: 1px solid var(--border);
                padding: 9px 14px;
            }
            .meta-chip:last-child {
                border-bottom: none;
            }
            .main {
                padding: 14px 14px 56px;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 20px;
            }
            .stat-card {
                padding: 14px 14px 12px;
                border-radius: var(--r-md);
            }
            .stat-num {
                font-size: 26px;
            }
            .stat-num .unit {
                font-size: 16px;
            }
            .stat-icon-wrap {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                margin-bottom: 10px;
            }
            .stat-lbl {
                font-size: 10px;
            }
            .stat-tag {
                display: none;
            }
            .section-title {
                font-size: 12px;
            }
            .count-badge {
                font-size: 10px;
            }
            .filter-btn {
                padding: 10px 10px;
                font-size: 10px;
            }
            .dept-btn, .batch-btn {
                font-size: 10px;
                padding: 6px 10px;
            }
            .sort-btn {
                font-size: 11px;
                padding: 9px 12px;
            }
            .search-input {
                font-size: 13px;
                padding: 10px 14px 10px 34px;
            }
            .learner-row {
                border-radius: var(--r-md);
                margin-bottom: 8px;
            }
            .learner-info {
                padding: 12px 14px 10px;
            }
            .avatar {
                width: 36px;
                height: 36px;
                font-size: 12px;
            }
            .learner-name {
                font-size: 13px;
            }
            .learner-dept {
                font-size: 10px;
            }
            .progress-cell {
                padding: 10px 14px 10px !important;
            }
            .sessions-done {
                font-size: 18px;
            }
            .card-footer {
                padding: 9px 14px;
            }
            .card-footer-pct {
                font-size: 20px;
            }
            .status-badge {
                font-size: 9px;
                padding: 3px 8px;
            }
            .batch-pill {
                font-size: 8px;
                padding: 1px 6px;
            }
            .footer {
                font-size: 10px;
                padding: 12px 14px;
            }
        }
    </style>

🤖

            AI Coder

            DEWA

                Live data

📊 Learning Analytics

AI Coder: Vibe Coder to Agentic Engineer

78 enrolled total

93 sessions total

3 week program

Avg. —% complete

— min watched total

👥

78

Total Enrolled

3 companies

📈

—%

Average Progress

Across all learners

⚡

—

In Progress

Actively learning

⏸

—

Not Started

0% completed

Learner Progress

            78 learners

                <button class="filter-btn active" onclick="setStatus('all', this)">All</button>
                <button class="filter-btn" onclick="setStatus('in-progress', this)">In Progress</button>
                <button class="filter-btn" onclick="setStatus('not-started', this)">Not Started</button>
                <button class="filter-btn" onclick="setStatus('completed', this)">Completed</button>
                <button class="filter-btn" onclick="setStatus('not-activated', this)">Not Activated</button>

            High to Low
            <button class="sort-btn" onclick="toggleSort()">High to Low</button>

            Batch:
            <button class="batch-btn active" onclick="setBatch('all', this)">All</button>
            <button class="batch-btn" onclick="setBatch(1, this)">Batch 1 — before Apr 1</button>
            <button class="batch-btn" onclick="setBatch(2, this)">Batch 2 — Apr 1 onwards</button>

            Dept:
            <button class="dept-btn active" onclick="setDept('all', this)">All departments</button>
            <button class="dept-btn" onclick="setDept('Innovation & The Future', this)">Innovation & The Future</button>
            <button class="dept-btn" onclick="setDept('Digital DEWA', this)">Digital DEWA</button>
            <button class="dept-btn" onclick="setDept('Ducont', this)">Ducont</button>
            <button class="dept-btn" onclick="setDept('POWER & WATER PLANNING', this)">Power & Water</button>
            <button class="dept-btn" onclick="setDept('BS&HR', this)">BS&HR</button>
            <button class="dept-btn" onclick="setDept('Transmission Power', this)">Transmission Power</button>
            <button class="dept-btn" onclick="setDept('Generation', this)">Generation</button>
            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>
            <button class="dept-btn" onclick="setDept('Internal Audit', this)">Internal Audit</button>

                <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" id="search-input" class="search-input" placeholder="Search learner...">

Learner

Batch

Progress

Done

Status

            No learners match your filter.


1400	        AI Coder: Vibe Coder to Agentic Engineer · DEWA Cohort · Mar 18 – Apr 9, 2026 · 93 Sessions · 3 Weeks
1401

1402
1403
1710
1711
1712	```
1713
1714	**Key Data Structures:**
1715
1716	- **TOTAL**: 93 sessions per learner
1717	- **DATA array**: 78 learner objects with: name, pct (completion %), done (sessions), mins (watched), grp (department), status, week, batch, initials, pal (color scheme), started (date)
1718	- **Filter state**: activeStatus, activeDept, activeBatch, sortAsc, searchQuery
1719	- **Rendering**: Dynamic HTML generation with staggered animations, progress bar fills, color-coded status badges

AI Coder: Vibe Coder to Agentic Engineer · DEWA Cohort · Mar 18 – Apr 9, 2026 · 93 Sessions · 3 Weeks

```

**Key Data Structures:**

- **TOTAL**: 93 sessions per learner
- **DATA array**: 78 learner objects with: name, pct (completion %), done (sessions), mins (watched), grp (department), status, week, batch, initials, pal (color scheme), started (date)
- **Filter state**: activeStatus, activeDept, activeBatch, sortAsc, searchQuery
- **Rendering**: Dynamic HTML generation with staggered animations, progress bar fills, color-coded status badges


Now I have everything I need. Let me create the new dashboard with only the non-Innovation, non-Digital DEWA, non-Ducont learners (9 learners: Power & Water, BS&HR, Transmission, Generation, Biz Dev, Internal Audit).