@import "tailwindcss";

/* Custom CSS Variables for theming */
@theme {
    --color-primary-50: #f0fdf4;
    --color-primary-100: #dcfce7;
    --color-primary-200: #bbf7d0;
    --color-primary-300: #86efac;
    --color-primary-400: #4ade80;
    --color-primary-500: #22c55e;
    --color-primary-600: #16a34a;
    --color-primary-700: #15803d;
    --color-primary-800: #166534;
    --color-primary-900: #14532d;
    --color-primary-950: #052e16;

    /* Honeyguide brand colors */
    --color-honeyguide: #e6a817;
    --color-honeyguide-dark: #c98f0f;
    --color-honeyguide-light: #f5c33d;
}

/* Dark mode configuration */
@custom-variant dark (&:where(.dark, .dark *));

/* Base styles */
body {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-200;
}

/* Dashboard card styles */
.dashboard-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(229, 231, 235);
    padding: 1.5rem;
    transition: all 0.2s;
}
.dashboard-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .dashboard-card {
    background-color: rgb(31, 41, 55);
    border-color: rgb(55, 65, 81);
}

/* Stat card styles */
.stat-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(229, 231, 235);
    padding: 1.5rem;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.stat-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .stat-card {
    background-color: rgb(31, 41, 55);
    border-color: rgb(55, 65, 81);
}

.stat-value {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.stat-label {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

.stat-change-positive {
    @apply text-green-600 dark:text-green-400 text-sm font-medium;
}

.stat-change-negative {
    @apply text-red-600 dark:text-red-400 text-sm font-medium;
}

/* Sidebar styles */
.sidebar {
    @apply fixed left-0 top-0 h-screen w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-transform duration-300;
}

.sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200;
}

.sidebar-link-active {
    @apply bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400;
}

/* Chart container */
.chart-container {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(229, 231, 235);
    padding: 1.5rem;
    transition: all 0.2s;
    min-height: 300px;
}
.chart-container:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .chart-container {
    background-color: rgb(31, 41, 55);
    border-color: rgb(55, 65, 81);
}

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

.data-table th {
    @apply px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700;
}

.data-table td {
    @apply px-4 py-4 text-sm text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700;
}

.data-table tr:hover {
    @apply bg-gray-50 dark:bg-gray-700/50;
}

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

.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 focus:ring-gray-500;
}

/* Input styles */
.form-input {
    @apply w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
}

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

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

.badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.badge-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.badge-danger {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}

.badge-info {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
}

/* Line clamp utility */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}