/* CMG360 Expenses - Custom Styles */

/* Hide elements with x-cloak until Alpine.js loads */
[x-cloak] {
    display: none !important;
}

/* Form input styles */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
    @apply block w-full rounded-md border-gray-300 shadow-sm;
    @apply focus:border-blue-500 focus:ring-blue-500;
    @apply text-gray-900 text-sm;
    padding: 0.5rem 0.75rem;
    border-width: 1px;
}

/* Input with currency prefix */
input.input-currency {
    padding-left: 2rem !important;
}

/* Style for select elements */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* File input styling */
input[type="file"] {
    @apply text-sm text-gray-500;
}

input[type="file"]::file-selector-button {
    @apply mr-4 py-2 px-4;
    @apply rounded-md border-0;
    @apply text-sm font-medium;
    @apply bg-blue-50 text-blue-700;
    @apply cursor-pointer;
}

input[type="file"]::file-selector-button:hover {
    @apply bg-blue-100;
}

/* Toast notifications */
.toast {
    @apply max-w-sm w-full p-4 rounded-lg shadow-lg;
    animation: slideIn 0.3s ease-out;
}

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

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

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

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-exit {
    animation: slideOut 0.3s ease-in forwards;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-200;
    border-top-color: #3b82f6;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200;
}

.card-hover:hover {
    @apply shadow-md transform -translate-y-0.5;
}

/* Mobile-first responsive table */
@media (max-width: 768px) {
    .responsive-table {
        @apply block;
    }

    .responsive-table thead {
        @apply hidden;
    }

    .responsive-table tbody tr {
        @apply block mb-4 border rounded-lg p-4;
    }

    .responsive-table tbody td {
        @apply block text-right;
    }

    .responsive-table tbody td::before {
        content: attr(data-label);
        @apply float-left font-medium text-gray-500;
    }
}

/* Drag and drop zone */
.drop-zone {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-6;
    @apply transition-colors duration-200;
}

.drop-zone.dragover {
    @apply border-blue-500 bg-blue-50;
}

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

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

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

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        @apply bg-white;
    }

    .print-full-width {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Focus visible for accessibility */
*:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Smooth transitions */
* {
    @apply transition-colors duration-150;
}

/* Ensure proper font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}