/* Theme Variables */
:root {
    /* Light Mode Colors */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --border-color-dark: #d1d5db;
    --sidebar-bg: #588dbc;
    --sidebar-text: #ffffff;
    --sidebar-hover: #4a7ba8;
    --sidebar-border: #4a7ba8;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --card-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --netrun-blue: #588dbc;
    --netrun-gray: #979b9c;
    --header-color: #979b9c;
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: #334155;
    --border-color-dark: #475569;
    --sidebar-bg: #3d6a8f;
    --sidebar-text: #ffffff;
    --sidebar-hover: #2e5270;
    --sidebar-border: #2e5270;
    --input-bg: #1e293b;
    --input-border: #475569;
    --card-bg: #1e293b;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
}

/* Apply theme to body and common elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content area */
main {
    background-color: var(--bg-primary);
}

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

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

.bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

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

.text-gray-800 {
    color: var(--text-primary) !important;
}

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

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

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

/* Borders */
.border-gray-200 {
    border-color: var(--border-color) !important;
}

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

/* Sidebar */
aside {
    background-color: var(--sidebar-bg) !important;
}

aside .border-slate-700 {
    border-color: var(--sidebar-border) !important;
}

/* Forms and inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Tables */
table {
    background-color: var(--bg-secondary);
}

table thead {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

table tbody tr {
    border-color: var(--border-color);
}

table tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Fix table hover in dark mode - override Tailwind classes */
[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Ensure text remains visible on hover */
[data-theme="dark"] table tbody tr:hover td,
[data-theme="dark"] tbody tr:hover td,
[data-theme="dark"] tr:hover td {
    color: var(--text-primary) !important;
}

/* Buttons - maintain their colors but adjust for dark mode */
[data-theme="dark"] .bg-blue-500 {
    background-color: #3b82f6 !important;
}

[data-theme="dark"] .bg-blue-600 {
    background-color: #2563eb !important;
}

[data-theme="dark"] .bg-red-500 {
    background-color: #ef4444 !important;
}

[data-theme="dark"] .bg-green-500 {
    background-color: #10b981 !important;
}

/* Shadows */
.shadow {
    box-shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px 0 var(--shadow);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px var(--shadow-md), 0 2px 4px -1px var(--shadow-md);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px var(--shadow-lg), 0 4px 6px -2px var(--shadow-lg);
}

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.theme-toggle:hover {
    background-color: var(--sidebar-hover);
}

.theme-toggle i {
    font-size: 1.125rem;
    color: var(--text-primary);
    transition: transform 0.3s ease;
}

/* Icon rotation animation */
.theme-toggle.rotating i {
    transform: rotate(180deg);
}

/* Toast notifications dark mode */
[data-theme="dark"] .toastify.success {
    background: #064e3b;
    color: #86efac;
    border: 1px solid #065f46;
}

[data-theme="dark"] .toastify.error {
    background: #7f1d1d;
    color: #fca5a5;
    border: 1px solid #991b1b;
}

/* Tom Select Styling - Fix multi-select height and font consistency */
.ts-wrapper .ts-control {
    min-height: 76px !important;
    max-height: 76px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    padding: 6px 8px !important;
}

.ts-wrapper.multi .ts-control {
    display: flex !important;
    flex-wrap: wrap !important;
    scrollbar-width: thin;
}

.ts-wrapper.multi .ts-control::-webkit-scrollbar {
    width: 6px;
}

.ts-wrapper.multi .ts-control::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.ts-wrapper .ts-control > div {
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    margin: 1px 2px !important;
    white-space: nowrap !important;
}

.ts-wrapper .ts-control .item {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    padding: 2px 6px !important;
    margin: 1px 2px 1px 0 !important;
}

.ts-wrapper .ts-control input {
    font-size: 0.875rem !important;
    min-width: 60px !important;
}

.ts-wrapper .ts-dropdown {
    font-size: 0.875rem !important;
}

.ts-wrapper .ts-dropdown .option {
    font-size: 0.875rem !important;
    padding: 6px 8px !important;
}

/* Tom Select dark mode */
[data-theme="dark"] .ts-wrapper .ts-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ts-wrapper .ts-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ts-wrapper .ts-dropdown .option {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-theme="dark"] .ts-wrapper .ts-dropdown .active {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .ts-wrapper.multi .ts-control::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Font Awesome spinner animation - ensure it works */
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fa-spin {
    animation: fa-spin 1s infinite linear;
}

.fa-pulse {
    animation: fa-spin 1s infinite steps(8);
}

/* Desktop Sidebar NetRun Blue Styling */
aside.bg-slate-800 {
    background-color: var(--sidebar-bg) !important;
}

aside .border-slate-700 {
    border-color: var(--sidebar-border) !important;
}

aside .bg-slate-700 {
    background-color: var(--sidebar-hover) !important;
}

aside .hover\:bg-slate-700:hover {
    background-color: var(--sidebar-hover) !important;
}

aside .hover\:bg-slate-600:hover {
    background-color: var(--sidebar-hover) !important;
}

aside .bg-slate-600 {
    background-color: var(--sidebar-hover) !important;
}

aside .text-slate-300 {
    color: rgba(255, 255, 255, 0.9) !important;
}

aside .text-slate-400 {
    color: rgba(255, 255, 255, 0.7) !important;
}

aside .text-slate-500 {
    color: rgba(255, 255, 255, 0.6) !important;
}

aside .border-slate-600 {
    border-color: var(--sidebar-border) !important;
}

/* Page Headers and Titles with NetRun Gray */
h1, h2, h3 {
    color: var(--header-color) !important;
}

main h1, main h2, main h3 {
    color: var(--header-color) !important;
}

.text-slate-800 {
    color: var(--header-color) !important;
}

header h1 {
    color: var(--header-color) !important;
}

/* Custom Scrollbar Styling - NetRun Theme */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #588dbc 0%, #4a7ba8 100%);
    border-radius: 6px;
    border: 2px solid var(--bg-tertiary);
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6ba3d8 0%, #588dbc 100%);
    border-color: var(--bg-secondary);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #4a7ba8 0%, #3d6a8f 100%);
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3d6a8f 0%, #2e5270 100%);
    border: 2px solid #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #588dbc 0%, #3d6a8f 100%);
    border-color: #0f172a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #2e5270 0%, #1e3a52 100%);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #588dbc var(--bg-tertiary);
}

[data-theme="dark"] * {
    scrollbar-color: #3d6a8f #1e293b;
}

/* Prevent flash of unstyled content */
html:not([data-theme]) {
    visibility: hidden;
}

html[data-theme] {
    visibility: visible;
}