/* UCZ Theme Colors */
:root {
    --ucz-blue: #003876;
    --ucz-blue-dark: #002855;
    --ucz-blue-light: #004c9e;
    --ucz-gray: #f3f4f6;
    --ucz-text: #1f2937;
    --ucz-text-light: #6b7280;
    --ucz-success: #059669;
    --ucz-error: #dc2626;
    --ucz-warning: #d97706;
}

/* Common Button Styles */
.btn {
    @apply px-6 py-2.5 rounded-lg font-medium transition-colors duration-200;
}

.btn-primary {
    @apply bg-ucz-blue text-white hover:bg-ucz-blue-dark;
}

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

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

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

/* Form Styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ucz-blue focus:border-ucz-blue;
}

.form-select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ucz-blue focus:border-ucz-blue bg-white;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

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

.card-header {
    @apply bg-ucz-blue text-white p-6;
}

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

.card-footer {
    @apply bg-gray-50 px-6 py-4 border-t border-gray-200;
}

/* Alert Styles */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-700 border border-green-200;
}

.alert-error {
    @apply bg-red-100 text-red-700 border border-red-200;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-700 border border-yellow-200;
}

.alert-info {
    @apply bg-blue-100 text-blue-700 border border-blue-200;
}

/* Table Styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

/* Navigation Styles */
.nav-link {
    @apply text-gray-600 hover:text-ucz-blue transition-colors duration-200;
}

.nav-link.active {
    @apply text-ucz-blue font-medium;
}

/* Badge Styles */
.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-yellow-100 text-yellow-800;
}

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

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

/* Modal Styles */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

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

.modal-header {
    @apply bg-ucz-blue text-white p-6 rounded-t-xl;
}

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

.modal-footer {
    @apply bg-gray-50 px-6 py-4 rounded-b-xl border-t border-gray-200;
}

/* Utility Classes */
.text-ucz-blue {
    color: var(--ucz-blue);
}

.bg-ucz-blue {
    background-color: var(--ucz-blue);
}

.border-ucz-blue {
    border-color: var(--ucz-blue);
}

.hover\:bg-ucz-blue:hover {
    background-color: var(--ucz-blue);
}

.hover\:text-ucz-blue:hover {
    color: var(--ucz-blue);
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .card-header {
        @apply p-4;
    }

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

    .card-footer {
        @apply px-4;
    }

    .btn {
        @apply w-full justify-center;
    }
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full h-5 w-5 border-2;
    border-top-color: var(--ucz-blue);
    border-right-color: var(--ucz-blue);
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.spinner-lg {
    @apply h-8 w-8 border-4;
}

/* Progress Bar */
.progress {
    @apply overflow-hidden bg-gray-200 rounded-full h-2;
}

.progress-bar {
    @apply bg-ucz-blue h-2 transition-all duration-300;
}

/* Custom Scrollbar */
.scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--ucz-blue) var(--ucz-gray);
}

.scrollbar-custom::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: var(--ucz-gray);
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: var(--ucz-blue);
    border-radius: 3px;
}