/* Global Styles */
body {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* Dark Mode Base Styles */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: #181818;
    color: #e5e5e5;
}

/* Dark Mode Background Colors */
.dark .bg-white {
    background-color: #242424 !important;
}

.dark .bg-gray-50 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

/* Dark Mode Borders */
.dark .border-gray-200 {
    border-color: #3a3a3a !important;
}

.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

/* Dark Mode Text Colors */
.dark .text-gray-800 {
    color: #e5e5e5 !important;
}

.dark .text-gray-600 {
    color: #cccccc !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

/* Dark Mode Shadow */
.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Dark Mode Menu Items */
.dark .active-menu-item {
    border-color: #6366f1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dark .active-mobile-menu-item {
    background-color: #4338ca !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Dark Mode Tables */
.dark .table-row {
    background-color: #1f2937;
    color: #e5e5e5;
}

.dark .table-row:hover {
    background-color: #374151;
}

.dark .table-header {
    background-color: #111827;
    color: #e5e5e5;
}

.dark .table-cell {
    border-color: #374151;
}

/* Dark Mode Form Elements */
.dark .input-field {
    background-color: #374151;
    color: #e5e5e5;
    border-color: #4b5563;
}

.dark .input-field:focus {
    border-color: #6366f1;
}

/* Dark Mode Modals */
.dark .modal-content {
    background-color: #1f2937;
    color: #e5e5e5;
}

.dark .modal-header {
    background-color: #111827;
    border-color: #374151;
}

.dark .modal-footer {
    background-color: #111827;
    border-color: #374151;
}

/* Mobile Menu Styles - NEW */
.mobile-menu-panel {
    transition: transform 0.3s ease-in-out;
    width: 280px;
    z-index: 50;
}

.mobile-menu-overlay {
    transition: opacity 0.3s ease-in-out;
    z-index: 40;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #4b5563;
    border-radius: 0.375rem;
}

.dark .mobile-menu-item {
    color: #d1d5db;
}

.mobile-menu-item:hover {
    background-color: #f3f4f6;
}

.dark .mobile-menu-item:hover {
    background-color: #374151;
}

.mobile-menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

.mobile-menu-item.active {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 500;
}

.dark .mobile-menu-item.active {
    background-color: #312e81;
    color: #818cf8;
}

/* Prevent scrolling when mobile menu is open */
body.overflow-hidden {
    overflow: hidden !important;
}

/* Helper Classes */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow p-6;
}

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

.btn-secondary {
    @apply bg-white dark:bg-gray-600 py-2 px-4 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

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

/* Custom form input styles */
.form-input {
    @apply mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md;
}

/* Table styles */
.table-container {
    @apply bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden;
}

.table-header-row {
    @apply bg-gray-50 dark:bg-gray-900 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider;
}

/* Status indicators */
.status-active {
    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
}

.status-inactive {
    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
}

/* Alert styles */
.alert-success {
    @apply bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-700 text-green-700 dark:text-green-100 px-4 py-3 rounded relative mb-6;
}

.alert-error {
    @apply bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-100 px-4 py-3 rounded relative mb-6;
}

/* Responsive Helpers - NEW */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

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

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Focus Styles for Accessibility - NEW */
.focus-visible:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.dark .focus-visible:focus-visible {
    outline-color: #818cf8;
}

/* Toggle switch styles */
.toggle-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle-checkbox:checked {
    right: 0;
    left: auto;
    border-color: var(--accent-600, #4f46e5);
}

.toggle-checkbox:checked + .toggle-label {
    background-color: var(--accent-600, #4f46e5);
}

.toggle-label {
    width: 100%;
    height: 100%;
    transition: background-color 0.3s ease;
}

/* Accent color options */
.accent-color {
    position: relative;
}

.accent-color.active::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 16px;
}