/* Component-specific styles */

/* Button Components */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-outline {
    @apply bg-transparent border border-gray-300 hover:bg-gray-50 text-gray-800 font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

/* Card Components */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
}

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

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

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

/* Table Components */
.table-container {
    @apply overflow-x-auto rounded-lg border border-gray-200;
}

.table {
    @apply w-full text-left text-sm text-gray-600;
}

.table thead {
    @apply bg-gray-50 border-b border-gray-100;
}

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

.table tbody {
    @apply divide-y divide-gray-100;
}

.table td {
    @apply px-6 py-4;
}

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

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

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none;
}

/* Badge Components */
.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-danger {
    @apply bg-red-100 text-red-800;
}

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

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

.badge-primary {
    @apply bg-blue-600 text-white;
}

/* Alert Components */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Modal Components */
.modal-backdrop {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40;
}

.modal-container {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-hidden;
}

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

.modal-body {
    @apply p-6 overflow-y-auto;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50 flex gap-3;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-8 h-8;
}

.spinner-lg {
    @apply w-12 h-12;
}

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

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

/* Tooltip */
.tooltip-container {
    @apply relative inline-block;
}

.tooltip {
    @apply absolute invisible z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity;
}

.tooltip-container:hover .tooltip {
    @apply visible opacity-100;
}

.tooltip-top {
    @apply bottom-full left-1/2 transform -translate-x-1/2 mb-2;
}

.tooltip-bottom {
    @apply top-full left-1/2 transform -translate-x-1/2 mt-2;
}

.tooltip-left {
    @apply right-full top-1/2 transform -translate-y-1/2 mr-2;
}

.tooltip-right {
    @apply left-full top-1/2 transform -translate-y-1/2 ml-2;
}

/* Pagination */
.pagination {
    @apply flex items-center justify-between px-4 py-3 border-t border-gray-200;
}

.pagination-info {
    @apply text-sm text-gray-700;
}

.pagination-controls {
    @apply flex items-center gap-2;
}

.pagination-btn {
    @apply px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50;
}

.pagination-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

.pagination-btn.disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Toast Notification */
.toast {
    @apply fixed right-4 top-4 z-50 transform transition-all duration-300;
}

.toast-content {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border;
}

.toast-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.toast-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.toast-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.toast-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Timeline */
.timeline {
    @apply relative border-l border-gray-200 ml-3;
}

.timeline-item {
    @apply mb-6 ml-6;
}

.timeline-dot {
    @apply absolute -left-3 w-6 h-6 bg-blue-600 rounded-full border-4 border-white;
}

.timeline-date {
    @apply text-xs font-semibold text-blue-600;
}

.timeline-content {
    @apply p-3 bg-gray-50 rounded-lg border border-gray-100;
}

/* Stats Card */
.stats-card {
    @apply bg-white p-6 rounded-xl border border-gray-200 shadow-sm;
}

.stats-card-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-xl mb-4;
}

.stats-card-title {
    @apply text-xs font-bold text-gray-500 uppercase tracking-wider mb-1;
}

.stats-card-value {
    @apply text-2xl font-bold text-gray-800;
}

.stats-card-change {
    @apply text-xs font-medium mt-1;
}

.stats-card-change.positive {
    @apply text-green-600;
}

.stats-card-change.negative {
    @apply text-red-600;
}

/* Empty State */
.empty-state {
    @apply text-center py-12;
}

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

.empty-state-title {
    @apply text-lg font-semibold text-gray-700 mb-2;
}

.empty-state-description {
    @apply text-gray-500 mb-6 max-w-sm mx-auto;
}

/* Breadcrumb */
.breadcrumb {
    @apply flex items-center text-sm text-gray-500;
}

.breadcrumb-item {
    @apply flex items-center;
}

.breadcrumb-link {
    @apply hover:text-blue-600 transition-colors;
}

.breadcrumb-separator {
    @apply mx-2 text-gray-300;
}

/* Tabs */
.tabs {
    @apply border-b border-gray-200;
}

.tab-list {
    @apply flex -mb-px;
}

.tab-item {
    @apply mr-1;
}

.tab-button {
    @apply inline-flex items-center px-4 py-2 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.tab-button.active {
    @apply border-blue-500 text-blue-600;
}

.tab-content {
    @apply p-4;
}

/* Accordion */
.accordion {
    @apply border border-gray-200 rounded-lg overflow-hidden;
}

.accordion-item {
    @apply border-b border-gray-200 last:border-b-0;
}

.accordion-header {
    @apply flex justify-between items-center w-full px-4 py-3 text-left font-medium text-gray-700 hover:bg-gray-50;
}

.accordion-content {
    @apply px-4 py-3 bg-gray-50;
}

/* Dropdown */
.dropdown {
    @apply relative inline-block;
}

.dropdown-toggle {
    @apply flex items-center justify-between w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left;
}

/* Avatar */
.avatar {
    @apply rounded-full overflow-hidden;
}

.avatar-sm {
    @apply w-8 h-8;
}

.avatar-md {
    @apply w-12 h-12;
}

.avatar-lg {
    @apply w-16 h-16;
}

.avatar-placeholder {
    @apply bg-gray-300 flex items-center justify-center text-white font-bold;
}

/* Steps */
.steps {
    @apply flex items-center justify-between;
}

.step {
    @apply flex items-center;
}

.step-number {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2;
}

.step-number.active {
    @apply bg-blue-600 text-white border-blue-600;
}

.step-number.completed {
    @apply bg-green-600 text-white border-green-600;
}

.step-number.pending {
    @apply bg-gray-100 text-gray-400 border-gray-300;
}

.step-label {
    @apply ml-3 text-sm font-medium;
}

/* Tag Input */
.tag-input {
    @apply flex flex-wrap items-center gap-2 p-2 border border-gray-300 rounded-lg;
}

.tag {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

.tag-remove {
    @apply ml-1 text-blue-600 hover:text-blue-800;
}

.tag-input-field {
    @apply flex-1 min-w-0 border-0 focus:ring-0 focus:outline-none;
}

/* Rating */
.rating {
    @apply flex items-center;
}

.rating-star {
    @apply text-gray-300;
}

.rating-star.active {
    @apply text-yellow-400;
}

.rating-value {
    @apply ml-2 text-sm text-gray-600;
}

/* File Upload */
.file-upload {
    @apply relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors;
}

.file-upload input[type="file"] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-icon {
    @apply mx-auto h-12 w-12 text-gray-400;
}

.file-upload-text {
    @apply mt-2 text-sm text-gray-600;
}

.file-upload-hint {
    @apply mt-1 text-xs text-gray-500;
}

/* Range Slider */
.range-slider {
    @apply w-full;
}

.range-track {
    @apply relative h-2 bg-gray-200 rounded-full;
}

.range-fill {
    @apply absolute h-full bg-blue-600 rounded-full;
}

.range-thumb {
    @apply absolute top-1/2 w-4 h-4 bg-white border-2 border-blue-600 rounded-full -translate-y-1/2 cursor-pointer;
}

/* Color Picker */
.color-picker {
    @apply flex items-center gap-2 p-2 border border-gray-300 rounded-lg;
}

.color-preview {
    @apply w-8 h-8 rounded border border-gray-300;
}

.color-input {
    @apply flex-1 border-0 focus:ring-0 focus:outline-none text-sm;
}

/* Calendar */
.calendar {
    @apply bg-white rounded-lg shadow-lg border border-gray-200 p-4;
}

.calendar-header {
    @apply flex items-center justify-between mb-4;
}

.calendar-grid {
    @apply grid grid-cols-7 gap-1;
}

.calendar-day {
    @apply text-center text-sm font-medium text-gray-500 py-1;
}

.calendar-date {
    @apply text-center p-2 rounded-lg cursor-pointer hover:bg-gray-100;
}

.calendar-date.today {
    @apply bg-blue-100 text-blue-600;
}

.calendar-date.selected {
    @apply bg-blue-600 text-white;
}

.calendar-date.disabled {
    @apply text-gray-300 cursor-not-allowed hover:bg-transparent;
}