@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for Caligenix Order Admin Portal */
@layer base {
    :root {
        --primary-color: #12504a;
        --button-color: #000000;
    }
    
    body {
        @apply bg-white text-gray-800;
    }
    
    h1 {
        @apply text-2xl font-bold text-primary mb-4;
    }
    
    h2 {
        @apply text-xl font-bold text-primary mb-3;
    }
    
    h3 {
        @apply text-lg font-bold text-primary mb-2;
    }
}

@layer components {
    .btn-primary {
        @apply bg-button text-white font-medium py-2 px-4 rounded hover:bg-gray-800 transition-colors duration-200;
    }
    
    .btn-secondary {
        @apply bg-primary text-white font-medium py-2 px-4 rounded hover:bg-opacity-90 transition-colors duration-200;
    }
    
    .card {
        @apply bg-white rounded-lg shadow-md p-6 mb-4;
    }
    
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
    
    .nav-link {
        @apply flex items-center px-4 py-2 text-gray-100 hover:bg-opacity-20 hover:bg-white rounded transition-colors duration-200;
    }
    
    .nav-link.active {
        @apply bg-white bg-opacity-20;
    }
}

/* Custom styles for the data grid */
.data-grid {
    @apply w-full border-collapse;
}

.data-grid th {
    @apply bg-primary text-white px-4 py-2 text-left font-medium;
}

.data-grid td {
    @apply border-b border-gray-200 px-4 py-2;
}

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

/* Custom styles for the dashboard cards */
.stat-card {
    @apply bg-white rounded-lg shadow p-4 flex flex-col;
}

.stat-card-title {
    @apply text-sm text-gray-500 mb-1;
}

.stat-card-value {
    @apply text-2xl font-bold text-primary;
}

/* Custom styles for the login page */
.login-container {
    @apply flex items-center justify-center min-h-screen bg-gray-100;
}

.login-card {
    @apply bg-white rounded-lg shadow-lg p-8 w-full max-w-md;
}

.login-logo {
    @apply mx-auto mb-6 max-w-xs;
}