# UI Components & Styling

### Layout System

The application uses **Angular Flex Layout** for responsive design:
- Flexbox-based layouts
- Responsive breakpoints
- Dynamic layout changes

### CSS Framework

**Bootstrap 5.3.2** provides:
- Grid system
- Utility classes
- Responsive components
- Form controls

### Angular Material Components

Used throughout the application:
- `mat-card` - Card containers
- `mat-table` - Data tables with sorting and pagination
- `mat-dialog` - Modal dialogs
- `mat-form-field` - Form inputs
- `mat-select` - Dropdown selects
- `mat-datepicker` - Date pickers
- `mat-icon` - Material icons
- `mat-button` - Buttons
- `mat-menu` - Context menus
- `mat-toolbar` - Toolbars
- `mat-sidenav` - Side navigation

### Custom Components

#### Spinner Component (`shared/spinner.component`)
Loading indicator shown during async operations.

#### Modal Component (`modal/modal.component`)
Reusable modal dialog for various purposes.

#### Accordion Component (`shared/accordion/`)
Collapsible content panels.

### Perfect Scrollbar

Custom scrollbar styling for better aesthetics:
```typescript
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};
```

### Icons & Images

- Material Icons for standard UI elements
- Custom icons in `icons/` directory
- Static assets in `assets/` directory