/* Themed scrollbars, app-wide (light + dark) */
* {
    scrollbar-width: thin;
    scrollbar-color: #d6d3d1 transparent;
}

.dark,
.dark * {
    scrollbar-color: #4b5563 transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a29e;
}

.dark::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Hide the scrollbar but keep the element scrollable */
.scrollbar-none {
    scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.CodeMirror {
    background-color: #fafaf9;
    height: 300px;
    border-radius: 3px;
    border: 2px solid #f5f5f4;
}

.dark .CodeMirror {
    background-color: #1e1e1e;
    border-color: #374151;
}

.my-chart {
    margin: 0 auto;
}

form.alert-rule textarea {
    height: 300px;
}

mark {
    background-color: #fef3c7
}

.dark mark {
    background-color: #78350f;
    color: #fef3c7;
}

/* Keyboard navigation highlight */
.kb-highlight {
    outline: 2px solid #d97706;
    outline-offset: -2px;
    background-color: rgba(217, 119, 6, 0.06);
}
.dark .kb-highlight {
    outline-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.08);
}