.table-container {
    font-family: Arial, sans-serif;
    margin: 20px;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Light Mode Styles */
.table-container[data-color-mode="light"] {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.table-container[data-color-mode="light"] .data-table {
    color: #333333;
}
.table-container[data-color-mode="light"] .data-table th {
    background-color: #f5f5f5;
    color: #333333;
}
.table-container[data-color-mode="light"] .data-table tr {
    border-bottom: 1px solid #e0e0e0;
}
.table-container[data-color-mode="light"] .data-table tr:hover {
    background-color: #f9f9f9;
}

/* Dark Mode Styles */
.table-container[data-color-mode="dark"] {
    background-color: #2d2d2d;
    color: #f0f0f0;
    border: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.table-container[data-color-mode="dark"] .data-table {
    color: #f0f0f0;
}
.table-container[data-color-mode="dark"] .data-table th {
    background-color: #3d3d3d;
    color: #f0f0f0;
}
.table-container[data-color-mode="dark"] .data-table tr {
    border-bottom: 1px solid #444;
}
.table-container[data-color-mode="dark"] .data-table tr:hover {
    background-color: #383838;
}

/* Common Styles */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
/*.color-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.table-container[data-color-mode="light"] .color-mode-toggle {
    background-color: #f0f0f0;
}
.table-container[data-color-mode="dark"] .color-mode-toggle {
    background-color: #444;
}
.color-mode-toggle .dark-icon {
    display: none;
}
.table-container[data-color-mode="dark"] .color-mode-toggle .light-icon {
    display: none;
}
.table-container[data-color-mode="dark"] .color-mode-toggle .dark-icon {
    display: inline;
}*/

.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th, .data-table td {
    padding: 12px 15px;
    text-align: left;
}
.table-scroll {
    overflow-x: auto;
}

/* Row-specific styles */
.inactive-row {
    opacity: 0.8;
}
.table-container[data-color-mode="light"] .inactive-row {
    color: #666;
}
.table-container[data-color-mode="dark"] .inactive-row {
    color: #aaa;
}

.on-leave-row {
    font-weight: bold;
}
.table-container[data-color-mode="light"] .on-leave-row {
    color: #e67e22;
}
.table-container[data-color-mode="dark"] .on-leave-row {
    color: #f39c12;
}