:root {
    --bg-color: #ffffff;
    --text-color: #111827;
    /*--header-bg-color: #f9fafb;*/
    --table-header-bg-color: #f3f4f6;
    --table-border-color: #e5e7eb;
    --table-row-hover-bg-color: #f9fafb;
    --dropdown-bg-color: #ffffff;
    --dropdown-hover-bg-color: #f3f4f6;
    --input-border-color: #d1d5db;
    --button-bg-color: #374151; /* bg-gray-700 */
    --button-hover-bg-color: #1f2937; /* bg-gray-800 */
    --link-color: #2563eb;
}

body.theme-dim {
    --bg-color: #374151;
    --text-color: #d1d5db;
    /*--header-bg-color: #1f2937;*/
    --table-header-bg-color: #4b5563;
    --table-border-color: #4b5563;
    --table-row-hover-bg-color: #4b5563;
    --dropdown-bg-color: #4b5563;
    --dropdown-hover-bg-color: #6b7280;
    --input-border-color: #6b7280;
    --button-bg-color: #93c5fd;
    --button-hover-bg-color: #60a5fa;
    --link-color: #93c5fd;
}

body.theme-dark {
    --bg-color: #111827;
    --text-color: #9ca3af;
    /*--header-bg-color: #030712;*/
    --table-header-bg-color: #1f2937;
    --table-border-color: #374151;
    --table-row-hover-bg-color: #1f2937;
    --dropdown-bg-color: #1f2937;
    --dropdown-hover-bg-color: #374151;
    --input-border-color: #374151;
    --button-bg-color: #93c5fd;
    --button-hover-bg-color: #60a5fa;
    --link-color: #93c5fd;
}

/* Застосування змінних до елементів */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}
header {
    background-color: var(/*--header-bg-color*/);
    border-color: var(--table-border-color);
}
table, th, td {
    border-color: var(--table-border-color);
}
thead {
    background-color: var(--table-header-bg-color);
}
tr:hover {
    background-color: var(--table-row-hover-bg-color);
}
.dropdown-content {
    background-color: var(--dropdown-bg-color);
}
.dropdown-content a, .dropdown-content label {
    color: var(--text-color);
}
.dropdown-content a:hover, .dropdown-content label:hover {
    background-color: var(--dropdown-hover-bg-color);
}
#search-input {
    border-color: var(--input-border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}
#filter-btn, #sort-btn {
    background-color: var(--button-bg-color);
}
#filter-btn:hover, #sort-btn:hover {
    background-color: var(--button-hover-bg-color);
}
a {
    color: var(--link-color);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}