:root {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;
}

.btn {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors duration-150;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.input {
    @apply h-10 px-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.input-error {
    @apply border-red-500 focus:ring-red-500;
}

.label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.card {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm;
}

.table-container {
    @apply overflow-x-auto bg-white border border-gray-200 rounded-xl shadow-sm;
}

.table {
    @apply min-w-full;
    border-collapse: separate;
    border-spacing: 0;
}

.table th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider bg-gray-50/80 border-b border-gray-200;
}

.table th:first-child {
    @apply rounded-tl-xl;
}

.table th:last-child {
    @apply rounded-tr-xl;
}

.table td {
    @apply px-6 py-4 text-sm text-gray-700 border-b border-gray-100 whitespace-nowrap;
}

.table tbody tr {
    @apply bg-white transition-colors duration-150;
}

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

.table tbody tr:last-child td {
    @apply border-b-0;
}

.table tbody tr:last-child td:first-child {
    @apply rounded-bl-xl;
}

.table tbody tr:last-child td:last-child {
    @apply rounded-br-xl;
}

.table td.font-medium {
    @apply text-gray-900 font-semibold;
}

.table td.font-mono {
    @apply font-mono text-gray-800 bg-gray-50 px-3 py-1.5 rounded-md inline-block text-xs tracking-wider;
}

.table .actions-cell {
    @apply flex items-center justify-end gap-3;
}

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

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

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

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

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

.stat-card {
    @apply bg-white border border-gray-200 rounded-lg p-6;
}

.stat-card-label {
    @apply text-sm font-medium text-gray-500;
}

.stat-card-value {
    @apply text-2xl font-semibold text-gray-900 mt-1;
}

.icon-btn {
    @apply p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-all duration-150;
}

.icon-btn:hover {
    transform: translateY(-1px);
}

.text-link {
    @apply text-blue-600 hover:text-blue-800 font-medium transition-colors duration-150;
}

.sortable {
    @apply cursor-pointer select-none;
}

.sortable:hover {
    @apply text-gray-700;
}

.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full mx-4;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-3;
}

.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply mx-auto h-24 w-24 text-gray-300;
}

.empty-state-title {
    @apply mt-4 text-lg font-medium text-gray-900;
}

.empty-state-description {
    @apply mt-2 text-sm text-gray-500;
}

@media (max-width: 640px) {
    .table-mobile-card {
        @apply block;
    }
    
    .table-mobile-card thead {
        @apply hidden;
    }
    
    .table-mobile-card tbody tr {
        @apply block border border-gray-200 rounded-lg mb-4 p-4;
    }
    
    .table-mobile-card tbody td {
        @apply block text-right py-1 px-0;
    }
    
    .table-mobile-card tbody td::before {
        content: attr(data-label);
        @apply float-left font-medium text-gray-500;
    }
}