:root{
 --primary-color:#007bff;
 --secondary-color:#6c757d;
 --success-color:#28a745;
 --danger-color:#dc3545;
 --warning-color:#ffc107;
 --info-color:#17a2b8;
 --light-color:#f8f9fa;
 --dark-color:#343a40;
}


body{
 font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}


.navbar-brand{
 font-weight:600;
}


.card{
 box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.075);
 border:1px solid rgba(0,0,0,0.125);
}

.card-header{
 background-color:var(--light-color);
 border-bottom:1px solid rgba(0,0,0,0.125);
}


.form-control:focus{
 border-color:var(--primary-color);
 box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25);
}


.table-responsive{
 border-radius:.375rem;
}

.table th{
 border-top:none;
 font-weight:600;
 background-color:var(--light-color);
}


.badge{
 font-size:.85em;
}


.btn{
 border-radius:.375rem;
}


.pagination .page-link{
 color:var(--primary-color);
}

.pagination .page-item.active .page-link{
 background-color:var(--primary-color);
 border-color:var(--primary-color);
}


.alert{
 border-radius:.375rem;
}


@media (max-width:768px){
 .table-responsive{
 font-size:.875rem;
 }
 
 .card-body{
 padding:1rem;
 }
 
 .btn-sm{
 padding:.25rem 0.5rem;
 font-size:.75rem;
 }
}


.loading{
 opacity:.6;
 pointer-events:none;
}


.fade-in{
 animation:fadeIn 0.3s ease-in;
}

@keyframes fadeIn{
 from{opacity:0}
 to{opacity:1}
}


footer{
 margin-top:3rem;
 border-top:1px solid rgba(0,0,0,0.125);
}


.card-header h6{
 color:#000 !important;
 font-weight:600;
}

.card-header .mb-0{
 color:#000 !important;
}


.card-header *{
 color:#000 !important;
}