/* CrystalRP Admin - Tailwind Custom Styles */

/* Primary brand color */
:root {
    --primary-color: #2d6eb9;
    --primary-hover: #245a9a;
}

/* Active menu item styling */
nav a {
    color: #4B5563; /* gray-600 */
}

nav a:hover {
    background-color: #F3F4F6; /* gray-100 */
    color: #111827; /* gray-900 */
}

nav a.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    font-weight: 500;
}

nav a.active:hover {
    background-color: var(--primary-hover) !important;
}

/* DataTables styling adjustments for Tailwind */
.dataTables_wrapper {
    padding: 1rem;
}

.dataTables_filter input {
    @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
    margin-left: 0.5rem;
}

.dataTables_length select {
    @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
    margin: 0 0.5rem;
}

/* Pagination styling */
.dataTables_paginate .paginate_button {
    @apply px-3 py-1 mx-1 border border-gray-300 rounded hover:bg-gray-100;
}

.dataTables_paginate .paginate_button.current {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* Table styling */
table.dataTable thead th {
    @apply bg-gray-50 text-left text-xs font-medium text-gray-700 uppercase tracking-wider px-6 py-3;
}

table.dataTable tbody td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

table.dataTable tbody tr:hover {
    @apply bg-gray-50;
}

/* TinyMCE editor adjustments */
.tox-tinymce {
    @apply border border-gray-300 rounded-md;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
}

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

/* Loading spinner */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Utility classes */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.hover\:bg-primary:hover {
    background-color: var(--primary-hover) !important;
}