.contacts-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 24px;

    .actions-bar {
        clear: both;
        margin-bottom: -16px;

        mat-slide-toggle {
            transform: scale(0.8);
            margin-left: -0.5rem;
        }

        button {
            float: right;
        }
    }

    .table-container {
        position: relative;
        overflow: auto;
        border-radius: 8px;

        .loading-shade {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.7);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        mat-table {
            width: 100%;

            mat-icon {
                cursor: pointer;
                transition: all 0.2s ease;

                &:hover {
                    transform: scale(1.1);
                }
            }

            .mat-column-actions {
                width: 180px;
                text-align: center;
            }

            .mat-column-defaultContact {
                width: 80px;
                text-align: center;
            }
        }

        .no-data-message {
            text-align: center;
            padding: 0.9rem;
            color: rgba(0, 0, 0, 0.54);

            mat-icon {
                font-size: 1rem;
                width: 1rem;
                height: 1rem;
                margin-bottom: -3px;
            }
        }

        mat-paginator {
            border-top: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 0 0 8px 8px;
            padding-top: 4px;
        }
    }

    .form-container {
        background-color: white;
        padding: 24px;
        border-radius: 8px;
        margin-top: 16px;

        .form-header {
            // margin-bottom: 24px;

            h3 {
                margin: 0;
                color: var(--mat-sys-primary);
                font-weight: 500;
            }
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .form-row {
                display: flex;
                gap: 16px;
                align-items: start;

                mat-form-field {
                    flex: 1;
                }

                .small-field {
                    max-width: 120px;
                }
            }

            .form-actions {
                display: flex;
                justify-content: flex-end;
                gap: 16px;
                margin-top: 16px;
            }

            .readonly-section {
                padding-top: 0.5rem;
                border-top: 1px solid #eee;

                .readonly-fields {
                    display: flex;
                    gap: 2rem;

                    .field-column {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: 1.5rem;
                    }
                }

                .readonly-field {
                    label {
                        display: block;
                        font-size: 0.875rem;
                        color: #666;
                        margin-bottom: 0.25rem;
                    }

                    .readonly-value {
                        padding: 0.25rem;
                        font-size: 0.875rem;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}

// Responsive adjustments
@media (max-width: 768px) {
    .contacts-container {
        padding: 16px;

        .form-row {
            flex-direction: column;
            gap: 16px !important;

            .small-field {
                max-width: 100% !important;
            }
        }
    }
}