/* Personal Finance Manager - Custom Styles */

/* Base styles */
* {
    box-sizing: border-box;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* htmx loading indicator */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* Button styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-150;
}

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

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

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

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

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

/* Form input styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

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

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

/* Table styles */
.table {
    @apply w-full text-left;
}

.table th {
    @apply px-4 py-3 text-sm font-medium text-gray-500 bg-gray-50 border-b border-gray-200;
}

.table td {
    @apply px-4 py-3 text-sm text-gray-900 border-b border-gray-100;
}

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

/* Modal styles */
.modal {
    @apply fixed inset-0 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

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

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

.modal-footer {
    @apply flex justify-end space-x-3 p-6 border-t border-gray-200;
}

/* Stat card styles */
.stat-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.stat-card-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center;
}

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

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

/* Money display */
.money-positive {
    @apply text-green-600;
}

.money-negative {
    @apply text-red-600;
}

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

.progress-bar-fill {
    @apply h-full rounded-full transition-all duration-300;
}

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

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

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

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

/* Loading spinner */
.spinner {
    @apply animate-spin h-5 w-5 text-blue-600;
}

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

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

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

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

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

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