/* Admin Panel Core - Site Styles with Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Improve native form controls in dark mode */
html { color-scheme: light dark; }

/* Custom utility classes not covered by Tailwind */
.menu-item-active {
    @apply bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200;
}

.sidebar-visible {
    transform: translateX(0) !important;
}

.font-arabic {
    font-family: 'Noto Sans Arabic', sans-serif;
}

.font-kurdish {
    font-family: 'Noto Sans Arabic', sans-serif;
}

/* RTL Support Utilities */
[dir="rtl"] .rtl\:mr-0 {
    margin-right: 0;
}

[dir="rtl"] .rtl\:ml-0 {
    margin-left: 0;
}

[dir="rtl"] .rtl\:mr-2 {
    margin-right: 0.5rem;
}

[dir="rtl"] .rtl\:ml-2 {
    margin-left: 0.5rem;
}

[dir="rtl"] .rtl\:mr-3 {
    margin-right: 0.75rem;
}

[dir="rtl"] .rtl\:ml-3 {
    margin-left: 0.75rem;
}

[dir="rtl"] .rtl\:pr-0 {
    padding-right: 0;
}

[dir="rtl"] .rtl\:pl-0 {
    padding-left: 0;
}

[dir="rtl"] .rtl\:pr-2 {
    padding-right: 0.5rem;
}

[dir="rtl"] .rtl\:pl-2 {
    padding-left: 0.5rem;
}

[dir="rtl"] .rtl\:pr-3 {
    padding-right: 0.75rem;
}

[dir="rtl"] .rtl\:pl-3 {
    padding-left: 0.75rem;
}

[dir="rtl"] .rtl\:pr-11 {
    padding-right: 2.75rem;
}

[dir="rtl"] .rtl\:pl-11 {
    padding-left: 2.75rem;
}

[dir="rtl"] .rtl\:text-right {
    text-align: right;
}

[dir="rtl"] .rtl\:text-left {
    text-align: left;
}

[dir="rtl"] .rtl\:right-0 {
    right: 0;
}

[dir="rtl"] .rtl\:left-0 {
    left: 0;
}

[dir="rtl"] .rtl\:right-auto {
    right: auto;
}

[dir="rtl"] .rtl\:left-auto {
    left: auto;
}

/* Form styling improvements using Tailwind classes approach */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
    @apply placeholder-gray-500 dark:placeholder-gray-400;
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400;
    @apply focus:border-transparent;
}

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

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400;
    @apply focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
    @apply placeholder-gray-500 dark:placeholder-gray-400;
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400;
    @apply focus:border-transparent resize-y;
}

.form-checkbox {
    @apply h-4 w-4 rounded border-gray-300 dark:border-gray-600;
    @apply text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-400;
    @apply dark:bg-gray-700;
}

/* Button styles using Tailwind approach */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent;
    @apply text-sm font-medium rounded-md text-white;
    @apply bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
    @apply transition-colors duration-200;
}

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

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

/* Card components using Tailwind approach */
.card {
    @apply bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
    @apply bg-gray-50 dark:bg-gray-800;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700;
    @apply bg-gray-50 dark:bg-gray-800;
}

/* Table styles using Tailwind approach */
.table-container {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 rounded-lg;
}

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

.table-header {
    @apply bg-gray-50 dark:bg-gray-800;
}

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

.table-body {
    @apply bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200;
}

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

/* Status badge styles */
.badge {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full;
}

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

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

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

.badge-info {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-in-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-in-out;
}

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

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Sidebar animation styles */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

/* Mobile sidebar positioning */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
    }

    [dir="rtl"] #sidebar {
        transform: translateX(100%);
    }

    #sidebar.sidebar-visible {
        transform: translateX(0);
    }
}

/* Ensure sidebar labels wrap and scale on small screens */
#sidebar [sidebar-toggle-item],
#sidebar span[sidebar-toggle-item],
#sidebar a span {
    word-break: break-word;
}

@media (max-width: 640px) {
    #sidebar [sidebar-toggle-item],
    #sidebar span[sidebar-toggle-item],
    #sidebar a span {
        font-size: 0.95rem;
    }
}

/* Custom scrollbar for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .sidebar,
    .header,
    .print\:hidden {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-input,
    .form-select,
    .form-textarea {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode transition for smooth theme switching */
html, body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure all elements transition smoothly */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}

/* Prevent transitions during page load */
.preload * {
    transition: none !important;
}

/* Login page light/dark mode support */
body {
    background-color: #f3f4f6;
    color: #111827;
}

html.dark body {
    background-color: #111827;
    color: #f3f4f6;
}