/* Design Improvements for Contracts ERP System */

/* Improved Button Styles with Better Contrast */
.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 font-medium border-0 shadow-sm;
}

.btn-secondary {
    @apply bg-secondary-500 text-white hover:bg-secondary-600 font-medium border-0 shadow-sm;
}

.btn-info {
    @apply bg-blue-500 text-white hover:bg-blue-600 font-medium border-0 shadow-sm;
}

.btn-success {
    @apply bg-green-500 text-white hover:bg-green-600 font-medium border-0 shadow-sm;
}

.btn-warning {
    @apply bg-yellow-500 text-black hover:bg-yellow-600 font-medium border-0 shadow-sm;
}

.btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 font-medium border-0 shadow-sm;
}

/* Table Action Buttons - Enhanced Visibility */
.table .btn-group .btn {
    @apply m-1 shadow-md transition-all duration-200;
    transform: scale(1);
}

.table .btn-group .btn:hover {
    transform: scale(1.05);
}

/* Card Styles with Better Contrast */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden border border-gray-200;
}

.card-header {
    @apply p-4 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-bold;
}

/* Improved Table Styling */
.table {
    @apply w-full border-collapse;
}

.table th {
    @apply bg-gray-100 text-black font-semibold p-3 border-b-2 border-gray-200;
}

.table td {
    @apply p-3 border-b border-gray-200;
}

.table tr:hover {
    @apply bg-gray-50;
}

/* Action buttons in tables need special treatment for visibility */
.table .btn-info {
    @apply bg-blue-500 text-white border-blue-600;
}

.table .btn-warning {
    @apply bg-yellow-500 text-black border-yellow-600;
}

.table .btn-danger {
    @apply bg-red-500 text-white border-red-600;
}

/* Badge Styling */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary-100 text-primary-800;
}

.badge-secondary {
    @apply bg-secondary-100 text-secondary-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-info {
    @apply bg-blue-600 text-slate-950;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Dashboard Card Improvements */
.dashboard-card-primary {
    @apply bg-white p-4 rounded-lg shadow-md border-l-4 border-primary-500;
}

.dashboard-card-secondary {
    @apply bg-white p-4 rounded-lg shadow-md border-l-4 border-secondary-500;
}

.dashboard-card-success {
    @apply bg-white p-4 rounded-lg shadow-md border-l-4 border-green-500;
}

.dashboard-card-danger {
    @apply bg-white p-4 rounded-lg shadow-md border-l-4 border-red-500;
}

.dashboard-label {
    @apply text-black text-sm font-medium;
}

.dashboard-stat {
    @apply text-2xl font-bold text-black;
}

/* Form Controls */
.form-control {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50;
}

/* Alerts */
.alert {
    @apply p-4 mb-4 rounded-md border;
}

.alert-success {
    @apply bg-green-50 border-green-500 text-green-700;
}

.alert-danger {
    @apply bg-red-50 border-red-500 text-red-700;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-500 text-yellow-700;
}

.alert-info {
    @apply bg-blue-50 border-blue-500 text-blue-700;
}

/* Improved Navigation */
.nav-link {
    @apply text-black hover:text-primary-600 hover:bg-primary-50 px-3 py-2 rounded-md transition-colors duration-200;
}

.nav-link.active {
    @apply text-primary-700 bg-primary-50 font-medium;
}

/* Project Status Indicators */
.project-status-active {
    @apply inline-block w-3 h-3 rounded-full bg-primary-500 mr-2;
}

.project-status-pending {
    @apply inline-block w-3 h-3 rounded-full bg-secondary-500 mr-2;
}

.project-status-completed {
    @apply inline-block w-3 h-3 rounded-full bg-green-500 mr-2;
}

.project-status-cancelled {
    @apply inline-block w-3 h-3 rounded-full bg-red-500 mr-2;
}

/* Add button with icon - improved visibility */
.add-button {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-200 flex items-center;
}

.add-button i,
.add-button svg {
    @apply mr-2;
}

/* Action buttons in card headers */
.card-header .btn {
    @apply bg-white text-primary-700 hover:bg-primary-50 hover:text-primary-800 shadow-sm;
}