restructure user side css to improve scalability

public/css/app.css

@@ -172,21 +172,13 @@ [data-bs-theme=light] {
     --bs-body-font-family: 'Poppins', sans-serif;
     --bs-font-sans-serif: 'Poppins', sans-serif;
 
-    /* B. FONT SIZES (Ukuran) */
+    --text-xs: 0.75rem;
-    --fs-display: 2.5rem;
+    --text-sm: 0.875rem;
-    /* Judul Besar (Dashboard Number) */
+    --text-base: 1rem;
-    --fs-h1: 2rem;
+    --text-lg: 1.125rem;
-    /* Judul Halaman */
+    --text-xl: 1.25rem;
-    --fs-h2: 1.5rem;
+    --text-2xl: 1.5rem;
-    /* Sub-judul / Card Title */
+    --text-3xl: 1.875rem;
-    --fs-h3: 1.25rem;
-    /* Section Title */
-    --fs-body: 1rem;
-    /* Teks Normal (16px) */
-    --fs-small: 0.875rem;
-    /* Teks Kecil / Placeholder (14px) */
-    --fs-tiny: 0.75rem;
-    /* Caption sangat kecil (12px) */
 
     /* C. FONT WEIGHTS (Ketebalan) */
     --fw-light: 300;
@@ -6455,9 +6447,9 @@ .tooltip {
     --bs-tooltip-zindex: 1080;
     --bs-tooltip-max-width: 200px;
     --bs-tooltip-padding-x: .5rem;
-    --bs-tooltip-padding-y: .25rem;
+    --bs-tooltip-padding-y: .2rem;
     --bs-tooltip-margin: 0;
-    --bs-tooltip-font-size: .875rem;
+    --bs-tooltip-font-size: .725rem;
     --bs-tooltip-color: #fff;
     --bs-tooltip-bg: #000;
     --bs-tooltip-border-radius: .25rem;
@@ -6467,10 +6459,11 @@ .tooltip {
     z-index: var(--bs-tooltip-zindex);
     display: block;
     margin: var(--bs-tooltip-margin);
-    font-family: Nunito;
+    font-family: var(--bs-font-sans-serif);
     font-style: normal;
     font-weight: 400;
-    line-height: 1.5;
+    /* font-size: xx-small; */
+    /* line-height: 1.5; */
     text-align: left;
     text-align: start;
     text-decoration: none;
@@ -22232,8 +22225,8 @@ .card .card-header {
 
 .card .card-header h4,
 .card .card-header .h4 {
-    font-size: 1.2rem;
+    font-size: var(--text-base);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     margin-bottom: 0;
     padding-bottom: 0;
 }
@@ -22248,12 +22241,12 @@ .card .card-content {
 
 .card .card-body {
     margin-top: 0;
-    padding: 1.5rem
+    padding: 1rem
 }
 
 .card .card-heading {
     color: #555;
-    font-size: 1.5rem;
+    font-size: var(--text-base);
 }
 
 .card .card-img-overlay {
@@ -22823,7 +22816,7 @@ .modal.modal-borderless .modal-footer {
 }
 
 #sidebar .sidebar-wrapper {
-    left: -260px
+    left: -270px
 }
 
 #sidebar~#main {
@@ -22853,7 +22846,7 @@ #sidebar.active .sidebar-wrapper {
 }
 
 .sidebar-wrapper {
-    width: 260px;
+    width: 270px;
     height: 100vh;
     position: fixed;
     top: 0;
@@ -22865,7 +22858,7 @@ .sidebar-wrapper {
 }
 
 .sidebar-wrapper .sidebar-header {
-    padding: 2rem 2rem 1rem;
+    padding: 2rem 2rem 0rem;
     font-size: 2rem;
     font-weight: 700
 }
@@ -22886,23 +22879,25 @@ .sidebar-wrapper .menu {
 
 .sidebar-wrapper .menu .sidebar-title {
     padding: 0 1rem;
-    margin: 1.5rem 0 1rem;
+    margin: 0.5rem 0 .5rem;
     font-size: 1rem;
     list-style: none;
-    font-weight: 600;
+    font-weight: 500;
-    color: black
+    color: black;
+    border-bottom: 1px solid var(--bs-gray-200);
 }
 
 .sidebar-wrapper .menu .sidebar-link {
     display: block;
-    padding: .7rem 1rem;
+    padding: .65rem 1rem;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     border-radius: .5rem;
     transition: all .5s;
     text-decoration: none;
-    color: black
+    color: black;
+    font-weight: 500;
 }
 
 .sidebar-wrapper .menu .sidebar-link svg,
@@ -22915,7 +22910,7 @@ .sidebar-wrapper .menu .sidebar-link i:before {
 }
 
 .sidebar-wrapper .menu .sidebar-link span {
-    margin-left: 1rem
+    margin-left: 0.7rem;
 }
 
 .sidebar-wrapper .menu .sidebar-link:hover {
@@ -23527,10 +23522,18 @@ .page-item:last-child {
 }
 
 .table td,
-.dataTable-table td,
+.dataTable-table td {
+    vertical-align: middle !important;
+    font-size: var(--text-sm);
+    font-weight: var(--fw-regular);
+}
+
+
 .table thead th,
 .dataTable-table thead th {
-    vertical-align: middle !important
+    vertical-align: middle !important;
+    font-size: var(--text-sm);
+    font-weight: var(--fw-medium);
 }
 
 .table:not(.table-borderless) thead th,
@@ -23553,7 +23556,7 @@ .table.table-lg tr td,
 .table-lg.dataTable-table tr td,
 .table.table-lg tr th,
 .table-lg.dataTable-table tr th {
-    padding: 1.3rem
+    padding: .6rem
 }
 
 .table th {
@@ -23584,6 +23587,108 @@ .dataTables_length {
     margin-bottom: .5rem
 }
 
+/* 1. Header (Judul & Titik Tiga) */
+.stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.stat-header .bi {
+    line-height: 1;
+    /* Samakan line-height dengan teks */
+    display: flex;
+    /* Pastikan ikon behave sebagai kotak flex */
+    align-items: center;
+    /* Tengahkan isi ikon */
+}
+
+/* 2. Label Judul (Abu-abu kecil) */
+.stat-label {
+    font-size: var(--text-sm);
+    font-weight: var(--fw-semibold);
+    color: black;
+    margin: 0;
+    line-height: 1;
+}
+
+/* 3. Body (Wadah Icon & Angka) */
+.stat-body {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+/* 4. Kotak Icon (Teal Default) */
+.stat-icon {
+    width: 34px;
+    height: 34px;
+    background-color: #3f8c86;
+    /* Teal */
+    border-radius: 6px;
+    color: white;
+    flex-shrink: 0;
+    margin-right: .6rem;
+
+    /* Flexbox Parent */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* --- INI BAGIAN YANG AKU KEMBALIKAN (BIAR LURUS) --- */
+.stat-icon i,
+.stat-icon .bi {
+    font-size: 16px;
+
+    /* Properti wajib biar icon ga miring/turun */
+    line-height: 1 !important;
+    vertical-align: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    /* Balik lagi */
+    justify-content: center !important;
+    /* Balik lagi */
+    margin: 0 !important;
+    /* Balik lagi */
+    padding: 0 !important;
+    /* Balik lagi */
+}
+
+/* 5. Angka Utama */
+.stat-count {
+    font-size: var(--text-base);
+    font-weight: var(--fw-semibold);
+    color: black;
+    margin: 0;
+}
+
+/* 6. Subtext Bawah */
+.stat-subtext {
+    font-size: var(--text-xs);
+    color: var(--bs-gray-700);
+    font-weight: var(--fw-medium);
+}
+
+/* Utilitas */
+.menu-dots {
+    cursor: pointer;
+    color: var(--bs-gray-600);
+    font-size: var(--text-sm);
+}
+
+.stat-percent {
+    font-size: var(--text-sm);
+    font-weight: var(--fw-semibold);
+}
+
+.stat-month {
+    font-size: var(--text-xs);
+    color: var(--bs-gray-700);
+    font-weight: var(--fw-semibold);
+}
+
 .progress.progress-primary {
     overflow: visible
 }
@@ -23762,9 +23867,10 @@ #main-content {
 }
 
 
-.page-heading h3,
+.page-heading .page-title,
 .page-heading .h3 {
-    font-weight: 700
+    font-weight: var(--fw-medium);
+    font-size: var(--text-lg);
 }
 
 .page-title-headings {