.table-container {
max-height: 500px;
overflow-y: auto;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}

.table-container table {
margin-bottom: 0;
}

.table-container thead th {
position: sticky;
top: 0;
background-color: #f8f9fa;
z-index: 10;
cursor: pointer;
user-select: none;
}

.table-container thead th.sortable:hover {
background-color: #e9ecef;
}

.table-container th.sort-asc::after {
content: " ↑";
}

.table-container th.sort-desc::after {
content: " ↓";
}

.debug-section {
margin-bottom: 2rem;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #f8f9fa;
}

.debug-title {
border-bottom: 2px solid #0d6efd;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}

pre {
background-color: #e9ecef;
padding: 1rem;
border-radius: 0.25rem;
max-height: 400px;
overflow-y: auto;
}

.nav-pills .nav-link.active {
background-color: #0d6efd;
}

.hamburger-menu {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
cursor: pointer;
color: #0d6efd;
}

.sidebar {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background: #2c3e50;
color: white;
transition: left 0.3s ease;
z-index: 999;
padding-top: 60px;
}

.sidebar.open {
left: 0;
}

.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar li {
padding: 15px 20px;
border-bottom: 1px solid #34495e;
}

.sidebar li a {
color: white;
text-decoration: none;
display: block;
}

.sidebar li:hover {
background: #34495e;
}

.container {
padding-left: 60px;
}

.resize-handle {
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
cursor: col-resize;
background: rgba(0, 0, 0, 0.1);
}

.resize-handle:hover {
background: rgba(0, 0, 0, 0.2);
}

.session-row {
cursor: pointer;
}

.session-row:hover {
background-color: #f1f1f1 !important;
}

.auto-refresh-controls {
display: flex;
align-items: center;
gap: 10px;
}

.auto-refresh-controls input {
width: 60px;
}
#auto-refresh-loading {
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border-radius: 4px;
font-size: 0.9rem;
}
.table-loading {
position: relative;
opacity: 0.7;
}

.table-loading::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="%23007bff" d="M25,5A20,20,0,1,0,45,25,20,20,0,0,0,25,5Zm0,38A18,18,0,1,1,43,25,18,18,0,0,1,25,43Z" opacity=".25"/><path fill="%23007bff" d="M43.3,20.9A20,20,0,0,0,5,25a20,20,0,0,0,35.5,13.4"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></path></svg>') no-repeat center;
background-size: 50px 50px;
}

.auto-refresh-indicator {
font-size: 0.8em;
color: #6c757d;
}
.btn-highlight {
animation: pulse 1s infinite;
box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}