refactor: migrate CSS @import to JS-side imports (Phase 4c)

Replace style-block @import url() with script-setup side-effect
imports across 15 .vue files. Vite extracts shared CSS chunks
instead of inlining the file into each consumer's stylesheet, and
fallow/jscpd can now follow the dependency graph (the two CSS
files no longer surface as "unused"). Behavior-preserving for
report-tables.css and compact-form.css since their selectors are
already class-prefixed.

For schedule-shared.css, the bare h2/h3 element selectors are
re-scoped under .clinical-scheduler-container so the rules keep
their previous reach now that the file applies globally.

Drop the redundant colors.css @import in WeekCell.vue —
bootstrap-spa.ts already loads colors via styles/index.css for
every SPA.

Author: rlorenzo

VueApp/src/ClinicalScheduler/assets/schedule-shared.css

@@ -15,7 +15,7 @@
 }
 
 /* Shared typography for schedule pages */
-h3 {
+.clinical-scheduler-container h3 {
     color: var(--ucdavis-black-80);
     font-size: 16px;
     margin-top: 20px;
@@ -38,7 +38,7 @@ h3 {
 
 /* Mobile responsiveness for main headers */
 @media (max-width: 768px) {
-    h2 {
+    .clinical-scheduler-container h2 {
         font-size: 18px;
     }
 
@@ -93,7 +93,7 @@ h3 {
 }
 
 @media (max-width: 480px) {
-    h2 {
+    .clinical-scheduler-container h2 {
         font-size: 16px;
     }
 }

VueApp/src/ClinicalScheduler/components/WeekCell.vue

@@ -355,8 +355,6 @@ const cardClasses = computed(() => {
 </script>
 
 <style scoped>
-@import url("@/styles/colors.css");
-
 .week-schedule-card {
     max-width: 280px;
     min-width: 200px;

VueApp/src/ClinicalScheduler/pages/ClinicianScheduleView.vue

@@ -191,6 +191,7 @@ import { UI_CONFIG } from "../constants/app-constants"
 import { isRotationExcluded } from "../constants/rotation-constants"
 import { SCHEDULE_MESSAGES, SCHEDULE_LABELS } from "../constants/schedule-config"
 import { usePermissionChecks } from "../composables/use-permission-checks"
+import "../assets/schedule-shared.css"
 
 // Interface for clinician rotation item
 interface ClinicianRotationItem {
@@ -1353,9 +1354,6 @@ watch(
 </script>
 
 <style scoped>
-/* Import shared schedule styles */
-@import url("../assets/schedule-shared.css");
-
 /* Clinician page specific styling */
 @media (width <= 768px) {
     /* Extra spacing for clinician selector to match rotation page */

VueApp/src/ClinicalScheduler/pages/RotationScheduleView.vue

@@ -221,6 +221,7 @@ import ClinicianSelector from "../components/ClinicianSelector.vue"
 import YearSelector from "../components/YearSelector.vue"
 import SchedulerNavigation from "../components/SchedulerNavigation.vue"
 import type { WeekItem } from "../components/WeekScheduleCard.vue"
+import "../assets/schedule-shared.css"
 import StatusBanner from "@/components/StatusBanner.vue"
 import RecentSelections from "../components/RecentSelections.vue"
 import AccessDeniedCard from "../components/AccessDeniedCard.vue"
@@ -1238,9 +1239,6 @@ onMounted(() => initPage())
 </script>
 
 <style scoped>
-/* Import shared schedule styles */
-@import url("../assets/schedule-shared.css");
-
 /* No access section */
 .no-access-container {
     display: flex;

VueApp/src/Effort/pages/ClinicalEffort.vue

@@ -180,6 +180,7 @@ import { useEffortTypeColumns, getEffortTypeLabel, loadEffortTypeLabels } from "
 import ExportToolbar from "@/components/ExportToolbar.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import type { ClinicalEffortReport } from "../types"
+import "../report-tables.css"
 
 const $q = useQuasar()
 const route = useRoute()
@@ -309,10 +310,6 @@ async function initPage() {
 onMounted(() => initPage())
 </script>
 
-<style>
-@import url("../report-tables.css");
-</style>
-
 <style scoped>
 :deep(.report-table tbody tr) {
     border-bottom: 1px solid var(--ucdavis-black-20);

VueApp/src/Effort/pages/DeptSummary.vue

@@ -165,6 +165,7 @@ import ReportFilterForm from "../components/ReportFilterForm.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { DeptSummaryReport } from "../types"
+import "../report-tables.css"
 
 const {
     termCode,
@@ -186,9 +187,3 @@ const {
     getEffortTypes: (r) => r.effortTypes,
 })
 </script>
-
-<style>
-@import url("../report-tables.css");
-</style>
-
-<style scoped></style>

VueApp/src/Effort/pages/EvalDetail.vue

@@ -163,6 +163,7 @@ import ReportFilterForm from "../components/ReportFilterForm.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { EvalDetailReport } from "../types"
+import "../report-tables.css"
 
 const { termCode, loading, report, initialFilters, generateReport, handlePrint, handleExcelDownload } =
     useReportPage<EvalDetailReport>({
@@ -180,10 +181,6 @@ function formatNullableDecimal(value: number | null): string {
 }
 </script>
 
-<style>
-@import url("../report-tables.css");
-</style>
-
 <style scoped>
 .col-numeric {
     text-align: right;

VueApp/src/Effort/pages/EvalSummary.vue

@@ -106,6 +106,7 @@ import ReportFilterForm from "../components/ReportFilterForm.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { EvalSummaryReport } from "../types"
+import "../report-tables.css"
 
 const { termCode, loading, report, initialFilters, generateReport, handlePrint, handleExcelDownload } =
     useReportPage<EvalSummaryReport>({
@@ -119,10 +120,6 @@ function formatDecimal(value: number): string {
 }
 </script>
 
-<style>
-@import url("../report-tables.css");
-</style>
-
 <style scoped>
 .report-table {
     width: 50%;

VueApp/src/Effort/pages/MeritAverage.vue

@@ -201,6 +201,7 @@ import ReportFilterForm from "../components/ReportFilterForm.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { MeritAverageReport } from "../types"
+import "../report-tables.css"
 
 const {
     termCode,
@@ -223,10 +224,6 @@ const {
 })
 </script>
 
-<style>
-@import url("../report-tables.css");
-</style>
-
 <style scoped>
 .term-cell {
     font-size: 0.85em;

VueApp/src/Effort/pages/MeritDetail.vue

@@ -195,6 +195,7 @@ import ReportFilterForm from "../components/ReportFilterForm.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { MeritDetailReport } from "../types"
+import "../report-tables.css"
 
 const {
     termCode,
@@ -216,8 +217,4 @@ const {
 })
 </script>
 
-<style>
-@import url("../report-tables.css");
-</style>
-
 <style scoped></style>