*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333}.contacts-table{width:100%;border-collapse:collapse;background-color:#fff;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;border-radius:4px;overflow:hidden}.contacts-table th{background-color:#f5f5f5;padding:12px 16px;text-align:left;font-weight:500;color:#555;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:10}.contacts-table td{padding:12px 16px;border-bottom:1px solid #e0e0e0;vertical-align:middle}.contacts-table tr:last-child td{border-bottom:none}.contacts-table tr:hover{background-color:#0000000a}.contact-detail-overlay{position:fixed;top:0;right:0;width:40%;height:100vh;background-color:#fff;box-shadow:-2px 0 10px #0000001a;z-index:1000;overflow-y:auto;transform:translate(100%);transition:transform .3s ease-in-out}.contact-detail-overlay.open{transform:translate(0)}.contact-detail-header{padding:20px;background-color:#f5f5f5;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.contact-detail-content{padding:20px}.contact-detail-section{margin-bottom:20px}.contact-detail-section h3{margin-bottom:10px;color:#555;font-weight:500}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#555}.form-control{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;transition:border-color .2s}.form-control:focus{outline:none;border-color:#1976d2}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.p-4{padding:16px}