src/app/employee/create/create.component.ts

@@ -46,7 +46,6 @@ import { debounceTime } from 'rxjs';
   ],
   templateUrl: './create.component.html',
   standalone: true,
-  styleUrl: './create.component.css',
 })
 export class CreateComponent implements OnInit {
   employeeForm!: FormGroup;

src/app/employee/delete/delete.component.ts

@@ -24,7 +24,6 @@ import EmployeeApiService from '../../services/employee-api.service';
   ],
   templateUrl: './delete.component.html',
   standalone: true,
-  styleUrl: './delete.component.css',
 })
 export class DeleteComponent {
   private apiService: EmployeeApiService = inject(EmployeeApiService);

src/app/employee/details/details.component.ts

@@ -14,7 +14,6 @@ import { DialogRef } from '@angular/cdk/dialog';
   imports: [MatDialogTitle, MatDialogContent, MatButton, MatDialogActions],
   templateUrl: './details.component.html',
   standalone: true,
-  styleUrl: './details.component.css',
 })
 export class DetailsComponent {
   employee: Employee = inject(MAT_DIALOG_DATA);

src/app/employee/edit/edit.component.ts

@@ -46,7 +46,6 @@ import { debounceTime } from 'rxjs';
   ],
   templateUrl: './edit.component.html',
   standalone: true,
-  styleUrl: './edit.component.css',
 })
 export class EditComponent implements OnInit {
   employeeForm!: FormGroup;

src/app/employee/table/table.component.css

@@ -1,73 +0,0 @@
-:host ::ng-deep {
-  .mat-mdc-card {
-    --mdc-elevated-card-container-color: transparent;
-    @apply !shadow-none !rounded-xl;
-  }
-
-  .mat-mdc-button-base {
-    --mat-mdc-button-persistent-ripple-color: currentColor;
-    @apply !rounded-lg;
-  }
-
-  .mat-mdc-progress-spinner {
-    --mdc-circular-progress-active-indicator-color: #2563eb;
-  }
-
-  .mdc-data-table__header-cell {
-    @apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6;
-  }
-
-  .mat-mdc-table {
-    @apply !bg-transparent !border-separate !border-spacing-y-2;
-
-    .mat-mdc-row {
-      @apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200;
-
-      &:hover {
-        @apply !bg-gray-50 !shadow-md !transform !scale-[1.01];
-      }
-
-      .mat-mdc-cell {
-        @apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl;
-      }
-    }
-
-    .mat-mdc-header-row {
-      @apply !bg-transparent;
-
-      .mat-mdc-header-cell {
-        @apply !border-b-0;
-      }
-    }
-  }
-
-  .mat-mdc-menu-panel {
-    @apply !rounded-xl !shadow-lg;
-  }
-
-  .mat-mdc-menu-item {
-    @apply !rounded-lg !mx-1 !my-0.5;
-  }
-
-  .mdc-button {
-    @apply !font-medium;
-
-    &.mat-primary {
-      @apply !bg-blue-600 !text-white hover:!bg-blue-700;
-    }
-
-    &.mat-warn {
-      @apply !bg-red-600 !text-white hover:!bg-red-700;
-    }
-  }
-
-  .mat-mdc-snack-bar-container {
-    &.error-snackbar {
-      @apply !rounded-xl;
-
-      .mdc-snackbar__surface {
-        @apply !bg-red-50 !text-red-900 !border !border-red-100;
-      }
-    }
-  }
-}

src/app/employee/table/table.component.ts

@@ -51,7 +51,6 @@ import { ErrorHandlerService } from '../../services/error.handler.service';
     MatInputModule,
   ],
   templateUrl: './table.component.html',
-  styleUrl: './table.component.css',
 })
 export class TableComponent implements OnInit {
   private readonly apiService: EmployeeApiService = inject(EmployeeApiService);

src/app/home/home.component.ts

@@ -6,6 +6,5 @@ import { QualificationsComponent } from '../qualification/table/table.component'
   selector: 'app-home',
   imports: [TableComponent, QualificationsComponent],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.css',
 })
 export class HomeComponent {}

src/app/qualification/create/create.component.ts

@@ -37,7 +37,6 @@ import { MatIcon } from '@angular/material/icon';
     MatIcon,
   ],
   templateUrl: './create.component.html',
-  styleUrl: './create.component.css',
 })
 export class CreateComponent {
   private formBuilder: FormBuilder = inject(FormBuilder);

src/app/qualification/delete/delete.component.ts

@@ -25,7 +25,6 @@ import { MatIcon } from '@angular/material/icon';
   ],
   templateUrl: './delete.component.html',
   standalone: true,
-  styleUrl: './delete.component.css',
 })
 export class DeleteComponent {
   public id: number = inject(MAT_DIALOG_DATA);

src/app/qualification/details/details.component.ts

@@ -26,7 +26,6 @@ import { MatIcon } from '@angular/material/icon';
     MatIcon,
   ],
   templateUrl: './details.component.html',
-  styleUrl: './details.component.css',
 })
 export class DetailsComponent {
   private qualificationService = inject(QualificationService);

src/app/qualification/edit/edit.component.ts

@@ -45,7 +45,6 @@ import { MatIcon } from '@angular/material/icon';
     MatIcon,
   ],
   templateUrl: './edit.component.html',
-  styleUrl: './edit.component.css',
 })
 export class EditComponent {
   public apiErrorMessage = '';

src/app/qualification/table/table.component.ts

@@ -50,7 +50,6 @@ import { ErrorHandlerService } from '../../services/error.handler.service';
     MatInputModule,
   ],
   templateUrl: './table.component.html',
-  styleUrl: './table.component.css',
 })
 export class QualificationsComponent implements OnInit {
   private readonly qualificationService: QualificationService =