/* Silicon Valley inspired dark theme */
:root {
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --secondary: #4b5563;
    --secondary-hover: #374151;
    --success: #10b981;
    --success-hover: #059669;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --warning: #f59e0b;
    --warning-hover: #d97706;
    --background: #1a1f2e;
    --surface: #1f2937;
    --surface-hover: #374151;
    --text: #f3f4f6;
    --text-secondary: #9ca3af;
}

body {
    background-color: var(--background);
    color: var(--text);
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

/* Add these button styles */
.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

.btn-warning {
    @apply bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

.btn-sm {
    @apply py-1 px-2 text-sm;
}

/* Form Controls */
.form-control {
    @apply bg-gray-800 border-gray-700 text-white rounded-lg focus:ring-blue-500 focus:border-blue-500;
}

/* Form Select Styles */
.form-select {
    @apply bg-gray-800 border-gray-700 text-white rounded-lg focus:ring-blue-500 focus:border-blue-500;
}

/* Table Styles */
.table-modern {
    @apply w-full border-collapse;
}

.table-modern th {
    @apply bg-gray-800 text-left py-3 px-4 font-semibold text-gray-200;
}

.table-modern td {
    @apply py-3 px-4 border-t border-gray-700;
}

.table-modern tr:hover {
    @apply bg-gray-700 transition-colors duration-200;
}

/* Modal Styles */
.modal-content {
    background-color: var(--surface);
    border-color: var(--secondary);
}

.modal-header {
    border-bottom-color: var(--secondary);
}

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

.modal-footer {
    border-top-color: var(--secondary);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Pagination */
.pagination {
    @apply flex gap-2;
}

.pagination .page-item {
    @apply inline-flex;
}

.pagination .page-link {
    @apply px-4 py-2 rounded-lg transition-colors duration-200;
}

.pagination .active .page-link {
    @apply bg-blue-600 text-white;
}

/* Search Input */
.search-input {
    @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Table Header Sort Icons */
.sort-icon {
    @apply ml-2 text-gray-400;
}

.sort-active {
    @apply text-blue-500;
}

/* Card Styles */
.card {
    @apply bg-gray-900 rounded-xl shadow-lg overflow-hidden;
}

.card-header {
    @apply bg-gray-800 px-6 py-4 border-b border-gray-700;
}

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

/* Navigation */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-200;
}

/* Gradient Text */
.gradient-text {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent;
}

/* Add this to your button styles */
.btn-info {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
}

/* Import section styles */
.import-section {
    @apply bg-gray-800 rounded-lg p-4 mt-4;
}

.import-section-title {
    @apply text-lg font-semibold mb-2;
}

.import-section-description {
    @apply text-sm text-gray-400 mb-4;
}

/* Modern 3D Button Styles */
.btn-3d {
    @apply relative font-semibold px-4 py-2 rounded-lg;
    transition: all 0.2s ease;
    transform: translateY(-2px);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

.btn-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.btn-3d::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    opacity: 0;
    transition: all 0.2s ease;
}

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

.btn-3d:hover::after {
    opacity: 1;
}

.btn-3d:active {
    transform: translateY(1px);
}

.btn-3d.btn-primary {
    background: linear-gradient(45deg, #4f46e5, #6366f1);
    box-shadow: 0 4px 0 #3730a3,
                0 4px 6px rgba(79, 70, 229, 0.3),
                0 8px 16px rgba(79, 70, 229, 0.2);
}

.btn-3d.btn-success {
    background: linear-gradient(45deg, #10b981, #34d399);
    box-shadow: 0 4px 0 #047857,
                0 4px 6px rgba(16, 185, 129, 0.3),
                0 8px 16px rgba(16, 185, 129, 0.2);
}

.btn-3d.btn-warning {
    background: linear-gradient(45deg, #f59e0b, #fbbf24);
    box-shadow: 0 4px 0 #b45309,
                0 4px 6px rgba(245, 158, 11, 0.3),
                0 8px 16px rgba(245, 158, 11, 0.2);
}

.btn-3d.btn-danger {
    background: linear-gradient(45deg, #ef4444, #f87171);
    box-shadow: 0 4px 0 #b91c1c,
                0 4px 6px rgba(239, 68, 68, 0.3),
                0 8px 16px rgba(239, 68, 68, 0.2);
}

/* Add shine effect on hover */
.btn-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
    transition: 0.5s;
}

.btn-3d:hover::before {
    left: 125%;
}

/* Regular button improvements */
.btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-danger {
    @apply relative overflow-hidden font-semibold px-4 py-2 rounded-lg transition-all duration-200;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Add loading spinner for buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Stats Card */
.stats-card {
    @apply bg-gray-800 rounded-xl p-6;
    background: linear-gradient(135deg, rgba(31,41,55,0.95) 0%, rgba(17,24,39,0.95) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-number {
    @apply text-4xl font-bold mb-2;
    background: linear-gradient(135deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.stats-label {
    @apply text-sm font-medium;
    color: rgba(255,255,255,0.7);
}