/* Base styles */
:root {
    --primary-color: #2563eb;
    --secondary-color: #4b5563;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
}

/* Dark mode variables */
.dark {
    --bg-primary: #1f2937;
    --bg-secondary: #374151;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
}

/* Light mode variables */
:root:not(.dark) {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
}

/* Typography */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* Navigation */
.nav-link {
    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium;
}

.nav-link:not(.active) {
    @apply border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700;
}

.nav-link.active {
    @apply border-blue-500 text-gray-900;
}

.mobile-nav-link {
    @apply block pl-3 pr-4 py-2 border-l-4 text-base font-medium;
}

.mobile-nav-link:not(.active) {
    @apply border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800;
}

.mobile-nav-link.active {
    @apply border-blue-500 text-blue-700 bg-blue-50;
}

/* Forms */
.form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
}

.form-select {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
}

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

/* Cards */
.card {
    @apply bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg;
}

.card-header {
    @apply px-4 py-5 sm:px-6;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.card-footer {
    @apply px-4 py-4 sm:px-6;
}

/* Alerts */
.alert {
    @apply rounded-md p-4 mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800;
}

.alert-error {
    @apply bg-red-50 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 text-blue-800;
}

/* Pagination */
.pagination-link {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
}

.pagination-current {
    @apply relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600;
}

/* Menu Items */
.menu-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700;
}

/* Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Responsive Images */
.img-responsive {
    @apply w-full h-full object-cover;
}

/* Stats Display */
.stat-value {
    @apply text-4xl font-bold text-gray-900 dark:text-white;
}

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

/* Review Stars */
.stars {
    @apply flex items-center;
}

.star {
    @apply text-yellow-400;
}

.star-empty {
    @apply text-gray-300;
}

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

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

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

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

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

.role-admin {
    @apply bg-purple-100 text-purple-800;
}

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

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