.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
}
.page-header h2{
font-weight:700;
color:var(--secondary);
}
.page-header small{
color:#777;
}
.utility-table{
margin-top:6px;
}
.utility-table tbody tr{
transition:.25s;
}
.utility-table tbody tr:hover{
background:#F9F7F3;
}
.utility-table td{
vertical-align:middle;
}
.badge-category{
background:#EEF5FF;
color:#1565C0;
padding:4px 9px;
border-radius:14px;
font-size:11px;
font-weight:600;
}
.btn-sm{
padding:6px 9px;
border-radius:8px;
margin-right:3px;
}
.empty-box{
padding:35px 20px;
text-align:center;
}
.empty-box i{
font-size:42px;
color:var(--accent);
margin-bottom:10px;
}
.empty-box h5{
font-weight:700;
margin-bottom:6px;
}
.empty-box p{
color:#777;
}
.utility-form-card{
padding:18px;
}
.utility-form-card .form-label{
font-weight:600;
margin-bottom:5px;
color:var(--secondary);
}
.utility-form-card .form-control,
.utility-form-card .form-select{
min-height:42px;
border-radius:9px;
}
.utility-form-card .form-control:focus,
.utility-form-card .form-select:focus{
border-color:var(--primary);
box-shadow:0 0 0 .2rem rgba(94,140,97,.15);
}
.form-footer{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:14px;
padding-top:14px;
border-top:1px solid var(--border);
}
.utility-profile{
padding:18px;
}
.utility-profile-card{
background:var(--resident);
padding:18px;
border-radius:14px;
text-align:center;
height:100%;
box-shadow:var(--shadow);
}
.utility-avatar{
width:85px;
height:85px;
margin:auto;
margin-bottom:12px;
border-radius:50%;
background:white;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:var(--primary);
box-shadow:var(--shadow);
}
.utility-profile-card h3{
font-weight:700;
color:var(--secondary);
margin-bottom:5px;
}
.utility-profile-card p{
color:#777;
}
.utility-info{
background:white;
padding:18px;
border-radius:14px;
box-shadow:var(--shadow);
height:100%;
}
.utility-info h5{
font-weight:700;
margin-bottom:7px;
color:var(--secondary);
}
.info-item{
margin-bottom:12px;
}
.info-item label{
display:block;
font-size:12px;
font-weight:600;
color:#777;
margin-bottom:3px;
}
.info-item p{
margin:0;
font-weight:600;
word-break:break-word;
}
.action-buttons{
display:flex;
gap:7px;
}
.delete-card{
padding:25px;
}
.delete-icon{
width:80px;
height:80px;
margin:auto;
margin-bottom:12px;
border-radius:50%;
background:#FDECEC;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
color:#dc3545;
}
.delete-actions{
display:flex;
justify-content:center;
gap:10px;
margin-top:18px;
}
.form-check-input{
transform:scale(1.2);
cursor:pointer;
}
.form-check-label{
cursor:pointer;
font-weight:600;
}
@media(max-width:991px){
.utility-profile-card{
margin-bottom:20px;
}
.action-buttons{
flex-direction:column;
}
.action-buttons .btn{
width:100%;
}
}
@media(max-width:768px){
.page-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.form-footer{
flex-direction:column;
}
.form-footer .btn{
width:100%;
}
.delete-actions{
flex-direction:column;
}
.delete-actions .btn{
width:100%;
}
}