/* Светлая тема (по умолчанию) */
:root {
    --background-color: white;
    --text-color: #333333;
    --table-border-color: #ddd;
    --table-background-color-1: #f2f2f2;
    --table-background-color-2: #f9f9f9;
    --table-background-color-3: #f1f1f1;
    --collapsible-bg-color: #e8e8e8;
    --modal-bg: #fefefe;
    --input-bg: #ededed;
    --scrollbar-hover: #c6c6c6;
}

[data-theme='dark'] {
    --background-color: #333333;
    --text-color: white;
    --table-border-color: #5a5a5a;
    --table-background-color-1: #727272;
    --table-background-color-2: #4e4e4e;
    --table-background-color-3: #707070;
    --collapsible-bg-color: #4f4f4f;
    --modal-bg: #5a5a5a;
    --input-bg: #5a5a5a;
    --scrollbar-hover: #3d3d3d;
}

/* Применение переменных */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: color .2s ease, background-color .2s ease;
}

.container {
    border-color: var(--text-color);
    background-color: var(--background-color);
    transition: border-color .2s ease, background-color .2s ease;
}

h2 {
    color: var(--text-color);
    transition: color .2s ease;
}

input {
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
    background-color: var(--input-bg) !important;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    transition: color .2s ease, background-color .2s ease;
}

.table-container::-webkit-scrollbar-thumb, .day-records::-webkit-scrollbar-thumb {
    background-color: var(--input-bg) !important;
    border-radius: 10px;
    transition: background-color .2s ease;
}
.table-container::-webkit-scrollbar-thumb:hover, .day-records::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover) !important;
}

table th,
table td {
    border-color: var(--table-border-color);
    transition: border-color .2s ease;
}

table th {
    background-color: var(--table-background-color-1);
    transition: background-color .2s ease;
}

table tr:nth-child(even) {
    background-color: var(--table-background-color-2);
    transition: background-color .2s ease;
}

table tr:hover {
    background-color: var(--table-background-color-3);
    transition: background-color .2s ease;
}

.td-record, .td-employee {
    background-color: var(--table-background-color-3);
}

.collapsible {
    background-color: var(--collapsible-bg-color);
    color: var(--text-color);
    transition: color .2s ease, background-color .2s ease;
}

.modal-content {
    background-color: var(--modal-bg);
    transition: background-color .2s ease;
}

.close:hover,
.close:focus {
    color: var(--text-color);
}

.time-slot {
    background-color: var(--table-background-color-2);
}

.time-slot:hover {
    background-color: var(--table-background-color-3);
    color: var(--text-color);
}