/* Dark Mode Overrides - Additional styling for dark themes */

/* Apply dark mode colors to specific elements */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Cards and panels in dark mode */
.dark-mode .bg-white {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-gray-50 {
    background-color: var(--bg-tertiary) !important;
}
.dark-mode .bg-blue-600
{
    background-color: var(--bg-secondary) !important;
}
.dark-mode .text-neutral-900
{
    color: var(--text-primary) !important;
}
.dark-mode .bg-blue-100
{
    background-color: var(--bg-tertiary) !important;
}
.dark-mode .text-blue-800
{
    color: var(--text-primary) !important;
}
.dark-mode .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

/* Arbitrary Tailwind background colors in dark mode */
.dark-mode .bg-\[\#FAFAFA\] {
    background-color: var(--bg-tertiary) !important;
}

/* Text colors in dark mode */
.dark-mode .text-gray-900 {
    color: var(--text-primary) !important;
}

.dark-mode .text-gray-700 {
    color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500 {
    color: var(--text-tertiary) !important;
}

.dark-mode .text-gray-600 {
    color: var(--text-secondary) !important;
}

/* Border colors in dark mode */
.dark-mode .border-gray-200 {
    border-color: var(--border-default) !important;
}

.dark-mode .border-gray-300 {
    border-color: var(--border-medium) !important;
}

/* Shadows in dark mode - more subtle */
.dark-mode .shadow-sm {
    box-shadow: var(--shadow-sm);
}

.dark-mode .shadow-md {
    box-shadow: var(--shadow-md);
}

.dark-mode .shadow-lg {
    box-shadow: var(--shadow-lg);
}

.dark-mode .shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* Hover states in dark mode */
.dark-mode tr:hover {
    background-color: var(--bg-hover) !important;
}

.dark-mode .hover\:bg-gray-50:hover {
    background-color: var(--bg-hover) !important;
}

.dark-mode .hover\:bg-gray-100:hover {
    background-color: var(--bg-hover) !important;
}

/* Input fields in dark mode */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-tertiary);
}

.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode textarea:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
}

/* Buttons in dark mode */
.dark-mode button
{
        border-color: var(--border-medium) !important;
        border: solid 1px;
}
.dark-mode button:not(.btn-primary):not(.theme-button-gradient) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.dark-mode button:not(.btn-primary):hover {
    background-color: var(--bg-active);
}

/* Dropdown menus in dark mode */
.dark-mode [x-show] {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

/* Theme panel stays light regardless of mode */
.theme-panel {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.theme-panel * {
    color: #111827 !important;
}

/* Code blocks in dark mode */
.dark-mode pre,
.dark-mode code {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Tables in dark mode */
.dark-mode table {
    border-color: var(--border-default);
}

.dark-mode thead {
    background-color: var(--bg-tertiary);
}

.dark-mode tbody tr {
    border-color: var(--border-light);
}

/* Links in dark mode */
.dark-mode a {
    color: var(--primary-400);
}

.dark-mode a:hover {
    color: var(--primary-300);
}

/* Scrollbar in dark mode */
.dark-mode ::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background-color: var(--border-medium);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-dark);
}

/* Selection in dark mode */
.dark-mode ::selection {
    background-color: var(--primary-900);
    color: var(--text-inverse);
}

/* Fix white text on white background issues */
.dark-mode .text-white {
    color: #ffffff !important;
}

/* Modal/Panel overlays */
.dark-mode .bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}