/* ==========================================================================
   Dark Mode Color Variables
   ========================================================================== */

:root {
    /* Colors - keeping the same primary/accent colors but adjusting for dark theme */
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --secondary-color: #64748b;
    --secondary-hover: #94a3b8;
    --accent-color: #0ea5e9;
    --accent-hover: #0284c7;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;

    /* Backgrounds - inverted for dark theme */
    --background-color: #0f172a;
    --surface-color: #1e293b;
    --surface-alternate-color: #334155;

    /* Text - inverted for dark theme */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-inverted: #0f172a;

    /* Borders & Shadows - adjusted for dark theme */
    --border-color: #334155;
    --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Additional dark mode specific overrides */
.pinned-section {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(59, 130, 246, 0.2) !important;
}

#theme-toggle:hover {
    background: rgba(59, 130, 246, 0.2) !important; }
/* Dark mode table row hover effect */
.data-table tr:hover td {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--text-primary) !important;
}