/* Import animations */
@import 'animations.css';

/* Base Styles */
:root {
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
}



body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    @apply antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main Content Area */
.max-w-7xl {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    min-height: calc(100vh - 64px); /* Adjust based on your navigation height */
    display: flex;
    flex-direction: column;
}

/* Grid Container Adjustments */
.grid {
    flex: 1;
    height: 100%;
}

/* Card Adjustments */
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1;
}

/* Auth Pages Background */
body.auth-page {
    background-image: url('assets/images/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
}

body.auth-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.auth-container {
    position: relative;
    z-index: 2;
}

.auth-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Container Styles */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Button Styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

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

.btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600;
}

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

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

/* Card Styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl;
}

.card-header {
    @apply p-6 border-b border-gray-100 dark:border-gray-700;
}

.card-footer {
    @apply p-6 border-t border-gray-100 dark:border-gray-700;
}

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

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

.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white;
}

.form-checkbox {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded;
}

.form-radio {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300;
}

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

.alert-success {
    @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400;
}

.alert-error {
    @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.alert-info {
    @apply bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400;
}

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

.badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-400;
}

.badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}

/* Table Styles */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

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

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

.table tr {
    @apply bg-white dark:bg-gray-900;
}

.table tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-800/50;
}

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity;
}

.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-content {
    @apply relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg mx-auto my-8 p-6;
}

.modal-header {
    @apply border-b border-gray-100 dark:border-gray-700 pb-4 mb-4;
}

.modal-footer {
    @apply border-t border-gray-100 dark:border-gray-700 pt-4 mt-4;
}

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

/* Pagination */
.pagination {
    @apply flex items-center justify-center space-x-2;
}

.pagination-item {
    @apply px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200;
}

.pagination-item-active {
    @apply bg-primary-600 text-white;
}

.pagination-item-inactive {
    @apply text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-down {
    animation: slideInDown 0.3s ease-out;
}

.animate-slide-up {
    animation: slideInUp 0.3s ease-out;
}

/* Payment Page Specific Styles */
.payment-container {
    @apply max-w-3xl mx-auto mt-24 px-4 sm:px-6 lg:px-8;
}

.payment-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300;
}

.payment-header {
    @apply p-6 border-b border-gray-100 dark:border-gray-700;
}

.payment-body {
    @apply p-6 space-y-4;
}

.payment-item {
    @apply flex justify-between py-3 border-b border-gray-100 dark:border-gray-700 last:border-0;
}

.payment-label {
    @apply text-gray-600 dark:text-gray-400;
}

.payment-value {
    @apply font-semibold text-gray-900 dark:text-white;
}

.payment-total {
    @apply text-xl font-bold text-primary-600 dark:text-primary-400;
}

.payment-footer {
    @apply p-6 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700;
}

/* Auth Pages Styles */
.auth-container {
    @apply min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900;
}

.auth-card {
    @apply max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg;
}

.auth-header {
    @apply text-center;
}

.auth-title {
    @apply text-3xl font-extrabold text-gray-900 dark:text-white;
}

.auth-subtitle {
    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
}

.auth-form {
    @apply mt-8 space-y-6;
}

.auth-input {
    @apply appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm dark:bg-gray-700;
}

.auth-button {
    @apply group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200;
}

.auth-divider {
    @apply relative my-6;
}

.auth-divider-line {
    @apply absolute inset-0 flex items-center;
}

.auth-divider-text {
    @apply relative w-full text-center;
}

.auth-divider-text span {
    @apply px-3 bg-white dark:bg-gray-800 text-sm text-gray-500;
}

.auth-social-button {
    @apply w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .container-custom {
        @apply px-4;
    }
    
    .card {
        @apply rounded-lg;
    }
    
    .auth-card {
        @apply p-6;
    }
}

@media (min-width: 768px) {
    .container-custom {
        @apply px-6;
    }
}

@media (min-width: 1024px) {
    .container-custom {
        @apply px-8;
    }
} 


        .dashboard-container {
            width: 100%;
            padding: 2rem 3rem;
            flex-grow: 1;
        }