:root {
    --bg-color: #f8f9fa;
    --text-color: #333;
    --card-bg: #fff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --header-bg: #fff;
    --badge-primary: #0d6efd;
    --badge-success: #198754;
    --badge-danger: #dc3545;
    --badge-info: #0dcaf0;
    --badge-warning: #ffc107;
    --badge-secondary: #6c757d;
    --border-color: #dee2e6;
}

[data-theme="dark"] {
    --bg-color: #121212; /* Darker background for better contrast */
    --text-color: #e0e0e0; /* Lighter text for readability */
    --card-bg: #1e1e1e; /* Slightly lighter card background */
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
    --header-bg: #1a1a1a; /* Consistent header background */
    --badge-primary: #4a90e2; /* Softer blue for badges */
    --badge-success: #28a745; /* Standard green for success */
    --badge-danger: #dc3545; /* Standard red for danger */
    --badge-info: #17a2b8; /* Standard cyan for info */
    --badge-warning: #ffc107; /* Standard yellow for warning */
    --border-color: #333333; /* Subtle border color */
}

[data-theme="dark"] .card-header {
    background-color: #2a2a2a; /* Slightly darker background for contrast */
    color: var(--text-color); /* Ensure text is readable */
    border-bottom: 1px solid var(--border-color); /* Add subtle border */
    font-weight: 600; /* Keep font weight consistent */
}

[data-theme="dark"] .list-group-item {
    color: var(--text-color);
    background-color: var(--card-bg); /* Match card background */
}

[data-theme="dark"] .card-body {
    color: var(--text-color);
    background-color: var(--card-bg); /* Match card background */
}

[data-theme="dark"] .badge {
    color: #ffffff; /* Ensure badge text is always white */
    background-color: var(--badge-primary); /* Use primary badge color */
}

[data-theme="dark"] .table {
    background-color: var(--card-bg); /* Match card background */
    color: var(--text-color);
}

[data-theme="dark"] .table thead th, .table>:not(caption)>*>* {
    background-color: var(--header-bg); /* Match header background */
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color); /* Subtle border for contrast */
}

[data-theme="dark"] .table tbody tr {
    background-color: var(--card-bg); /* Match card background */
    border-bottom: 1px solid var(--border-color); /* Subtle border between rows */
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
}

[data-theme="dark"] .form-control {
    background-color: #2a2a2a; /* Slightly lighter input background */
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control::placeholder {
    color: #b0b0b0; /* Lighter gray for better visibility */
    opacity: 1; /* Ensure full opacity for readability */
}

[data-theme="dark"] .json-container {
    background-color: #1e1e1e; /* Match card background */
    color: var(--text-color);
    border: 1px solid var(--border-color); /* Add subtle border */
}

[data-theme="dark"] .json-key {
    color: #82aaff; /* Brighter blue for keys */
}

[data-theme="dark"] .json-string {
    color: #c3e88d; /* Brighter green for strings */
}

[data-theme="dark"] .json-number {
    color: #f78c6c; /* Brighter orange for numbers */
}

[data-theme="dark"] .json-boolean {
    color: #ffcb6b; /* Brighter yellow for booleans */
}

[data-theme="dark"] .json-null {
    color: #d4d4d4; /* Neutral gray for null */
}

[data-theme="dark"] .form-select {
    background-color: #2a2a2a; /* Match input background */
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-select:focus {
    background-color: #2a2a2a; /* Keep consistent on focus */
    color: var(--text-color);
    border-color: var(--badge-primary); /* Highlight border on focus */
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); /* Subtle focus shadow */
}

[data-theme="dark"] .card-header.bg-light {
    background-color: var(--header-bg); /* Match header background */
    color: var(--text-color); /* Ensure text is readable */
    border-bottom: 1px solid var(--border-color); /* Add subtle border */
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--badge-primary); /* Match primary badge color */
    border-color: var(--badge-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--badge-primary);
    color: #ffffff; /* Ensure text is readable */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.card {
    border: none;
    border-radius: 10px;
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, background-color 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card-header {
    background-color: var(--header-bg);
    border-bottom: none;
    font-weight: 600;
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom-color: var(--border-color);
}

.list-group-item {
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    background-color: var(--card-bg);
    color: var(--text-color);
}

.badge {
    font-size: 0.9rem;
    font-weight: 500;
}

.badge-primary { background-color: var(--badge-primary); }
.badge-success { background-color: var(--badge-success); }
.badge-danger { background-color: var(--badge-danger); }
.badge-info { background-color: var(--badge-info); }
.badge-warning { background-color: var(--badge-warning); }

.chart-container {
    background-color: var(--card-bg);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--card-shadow);
}

.btn-outline-primary {
    transition: all 0.3s;
    color: var(--text-color);
    border-color: var(--badge-primary);
}

.btn-outline-primary:hover {
    background-color: var(--badge-primary);
    color: #fff;
}

/* Truncate long URLs with ellipsis and show full text on hover */
#request-log td:nth-child(2) {
    max-width: 200px; /* Adjust this width as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#request-log td:nth-child(2):hover {
    position: relative;
}

#request-log td:nth-child(2):hover::after {
    content: attr(data-full-url);
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    white-space: normal;
    max-width: 400px;
    word-wrap: break-word;
}

/* Ensure table header stays fixed while body scrolls */
.table-responsive table {
    width: 100%;
}

.table-responsive thead {
    position: sticky;
    top: 0;
    background-color: var(--header-bg);
    z-index: 1;
}

/* Fix for request log table scrolling */
.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}

/* Important: Make tbody display as table-row-group, not block */
#request-log {
    display: table-row-group !important;
}

/* Truncate long URLs with ellipsis and show full text on hover */
#request-log td:nth-child(2) {
    max-width: 300px; /* Adjust this width as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Only show hover effect for elements with the 'truncated-url' class */
#request-log td.truncated-url:hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
    z-index: 1;
}

#request-log td.truncated-url:hover::before {
    content: attr(data-full-url);
    position: absolute;
    left: 0;
    top: 100%;
    width: 300px;
    background-color: var(--card-bg);
    border: 1px solid var(--text-color);
    padding: 5px;
    border-radius: 3px;
    box-shadow: var(--card-shadow);
    word-break: break-all;
    white-space: normal;
    z-index: 10;
}

/* Ensure table column widths are appropriate */
#request-log td:nth-child(1) { /* Timestamp */
    width: 160px;
}
#request-log td:nth-child(3) { /* Total Time */
    width: 120px;
}
#request-log td:nth-child(4) { /* Response Code */
    width: 120px;
}
#request-log td:nth-child(5) { /* Details */
    width: 100px;
}

/* JSON formatter styles */
.json-formatter {
    background: none;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}

.json-container {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 0.25rem;
    padding: 10px;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .json-formatter {
    background: #2c3034;
}

.json-key {
    color: #7e57c2;
}

.json-string {
    color: #4caf50;
}

.json-number {
    color: #2196f3;
}

.json-boolean {
    color: #ff9800;
}

.json-null {
    color: #9e9e9e;
}

[data-theme="dark"] .json-key {
    color: #82aaff; /* Brighter blue for keys */
}

[data-theme="dark"] .json-string {
    color: #c3e88d; /* Brighter green for strings */
}

[data-theme="dark"] .json-number {
    color: #f78c6c; /* Brighter orange for numbers */
}

[data-theme="dark"] .json-boolean {
    color: #ffcb6b; /* Brighter yellow for booleans */
}

[data-theme="dark"] .json-null {
    color: #d4d4d4; /* Neutral gray for null */
}

/* Adjust table styles */
.card-body .table {
    font-size: 0.9rem;
}

.card-body .table td code {
    white-space: pre-wrap;
    max-width: 300px;
    display: block;
    overflow-x: auto;
}

/* Enhance accordion for custom events */
.accordion-button {
    padding: 0.5rem 1rem;
}

.accordion-body {
    padding: 1rem;
}

/* Truncated URL styling */
.truncated-url {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip for truncated URLs */
.truncated-url:hover {
    position: relative;
    cursor: help;
}

.truncated-url:hover::after {
    content: attr(data-full-url);
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 5px;
    white-space: nowrap;
    max-width: 100vw;
    overflow: hidden;
    text-overflow: ellipsis;
}