html, body {
    background-color: var(--mantine-color-body) !important;
    color: var(--mantine-color-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure full height coverage */
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.result-card-body {
    padding-top: 2px;
    padding-bottom: 2px;
}

.result-card-citation-text {
    margin-bottom: 0;
    font-size: small;
}

.result-card-location-text {
    margin-bottom: 0;
}

.card-button {
    color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 5px !important;
}

/* Remove top border from dbc.Card element that contains all Tab contents */
.no-top-border {
    border-top: none !important;
    border-radius: 0 0 10px 10px;
    border-color: rgb(222, 226, 230);
}

/* .card-button :active {
    box-shadow: none;
    background-color: transparent;
}
.card-button :hover {
    box-shadow: none;
    background-color: transparent;
} */


.speaker-00 {
    background-color: rgba(255, 163, 163, 0.2);
    border-radius: 12px;
    padding: 8px;
}

.speaker-01 {
    background-color: rgba(122, 208, 255, 0.2);
    border-radius: 12px;
    padding: 8px;
}

.speaker-02 {
    background-color: rgba(255, 229, 116, 0.2);
    border-radius: 12px;
    padding: 8px;
}

.speaker-03 {
    background-color: rgba(139, 104, 255, 0.2);
    border-radius: 12px;
    padding: 8px;
}

/*
Search term_colorid tags
*/
.term-item {
    color: #111;
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 28px;
    margin: 4px 2px;
    border: 0;
    border-radius: 20px;
    background-color: rgba(234, 234, 234, 0.6);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflow text */
    text-overflow: ellipsis;
    /* Add ellipsis to cropped text */
    flex-shrink: 0;
    /* Allow the item to shrink if necessary */
    box-sizing: border-box;
}

.term-item::before {
    content: "";
    width: 20px;
    height: 40px;
    border-radius: 16px 0 0 16px;
    position: absolute;
    left: 0;
    top: 0;
}

.hit-count {
    display: inline-block;
    padding: 0px 8px 0px 15px;
    margin: 1px 5px;
    border: 0 solid;
    border-radius: 14px;
    background-color: #eee;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    width: auto !important;
}

.hit-count::before {
    content: "";
    width: 12px;
    height: 24px;
    border-radius: 12px 0 0 12px;
    border: 2px;
    position: absolute;
    left: 0;
    top: 0;
}

.term-color-0::before {
    background-color: #4c72b0;
}

.term-color-1::before {
    background-color: #3aba57;
}

.term-color-2::before {
    background-color: #c53a5b;
}

.term-color-3::before {
    background-color: #8172b3;
}

.term-color-4::before {
    background-color: #bfa545;
}

.term-color-5::before {
    background-color: #64b5cd;
}

.term-color-6::before {
    background-color: #6c4c20;
}

.term-color-7::before {
    background-color: #e37c4d;
}

.term-color-8::before {
    background-color: #555555;
}

.term-color-9::before {
    background-color: #606805;
}

.highlight-color-0 {
    box-shadow: 0 0 7px #4c72b0;
}

.highlight-color-1 {
    box-shadow: 0 0 7px #3aba57;
}

.highlight-color-2 {
    box-shadow: 0 0 7px #c53a5b;
}

.highlight-color-3 {
    box-shadow: 0 0 7px #8172b3;
}

.highlight-color-4 {
    box-shadow: 0 0 7px #bfa545;
}

.highlight-color-5 {
    box-shadow: 0 0 7px #64b5cd;
}

.highlight-color-6 {
    box-shadow: 0 0 7px #6c4c20;
}

.highlight-color-7 {
    box-shadow: 0 0 7px #e37c4d;
}

.highlight-color-8 {
    box-shadow: 0 0 7px #555555;
}

.highlight-color-9 {
    box-shadow: 0 0 7px #606805;
}



/*
Term tag alignment within their container
*/
.d-flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

/*
Half-circle highlight effect for text spans
*/
.half-circle-highlight {
    color: #000;
    padding: 0 5px 0 12px;
    /* Add padding around the text */
    position: relative;
    top: -2px;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.8);
    /* box-shadow: #00000020 5px 5px 5px; */
    border-radius: 12px;
    border: 0px solid white;
    /* box-shadow: 0 0 10px #cc88ff; */
}

.half-circle-highlight::before {
    content: "";
    width: 9.75px;
    height: 19.5px;
    border-radius: 13px 0 0 13px;
    border: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.transcript {
    max-height: calc(100vh - 380px);
    /* max-height: 50vh; */
    overflow-y: auto;
    padding: 1rem;
    padding-right: 0;
    box-sizing: border-box;
    position: relative;
    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.transcript::before {
    content: "";
    display: block;
    height: 50vh;
    width: 100%;
}

.transcript::after {
    content: "";
    display: block;
    height: 50vh;
    width: 100%;
}

.episode-list {
    max-height: 55vh;
    overflow-y: auto;
    padding: 1rem;
}


/* AG Table tooltip */
.custom-tooltip {
    width: 500px;
    height: 600px;
    overflow-y: auto;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    color: #333;
    z-index: 1000;
}

[data-mantine-color-scheme="light"] .transcript-segment.active-segment {
    color: #224499;
    text-shadow: 0 0 15px #4488ff;
    transition: text-shadow 0.4s;
    transition: color 0.4s;
}

[data-mantine-color-scheme="dark"] .transcript-segment.active-segment {
    color: #fff;
    text-shadow: 0 0 35px #fff;
    transition: text-shadow 0.4s;
    transition: color 0.4s;
}

#transcript-episode-graph {
    height: 100% !important;
    min-height: 0 !important;
}

.col-search-hits {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 20px !important;
    /* max-width: 20px !important; */
    /* width: 20px !important;
    min-width: 20px !important; */
}

/* AG Grid theme support */
.ag-theme-quartz {
    --ag-background-color: var(--mantine-color-body) !important;
    --ag-header-background-color: var(--mantine-color-default) !important;
    --ag-odd-row-background-color: var(--mantine-color-body) !important;
    /* --ag-row-hover-color: var(--mantine-color-gray-1) !important; */
    --ag-border-color: var(--mantine-color-default-border) !important;
    --ag-header-column-separator-color: var(--mantine-color-default-border) !important;
    --ag-font-color: var(--mantine-color-text) !important;
    --ag-header-foreground-color: var(--mantine-color-text) !important;
    --ag-data-color: var(--mantine-color-text) !important;
    --ag-secondary-border-color: var(--mantine-color-default-border) !important;
    --ag-input-border-color: var(--mantine-color-default-border) !important;
    --ag-panel-background-color: var(--mantine-color-body) !important;
    --ag-control-panel-background-color: var(--mantine-color-body) !important;
}

/* Additional specific overrides for better theming */
.ag-theme-quartz .ag-header {
    background-color: var(--mantine-color-default) !important;
    border-bottom: 1px solid var(--mantine-color-default-border) !important;
}

.ag-theme-quartz .ag-header-cell {
    color: var(--mantine-color-text) !important;
}

.ag-theme-quartz .ag-row {
    color: var(--mantine-color-text) !important;
    border-bottom: 1px solid var(--mantine-color-default-border) !important;
}

[data-mantine-color-scheme="light"] .ag-theme-quartz .ag-row-even {
    background-color: #ffffff !important;
}

[data-mantine-color-scheme="light"] .ag-theme-quartz .ag-row-odd {
    background-color: #f8f9fa !important;
}

/* Dark theme row colors */
[data-mantine-color-scheme="dark"] .ag-theme-quartz .ag-row-even {
    background-color: #25262b !important;
}

[data-mantine-color-scheme="dark"] .ag-theme-quartz .ag-row-odd {
    background-color: #2c2e33 !important;
}

/* Hover states for both themes */
[data-mantine-color-scheme="light"] .ag-theme-quartz .ag-row:hover {
    background-color: #e9ecef !important;
}

[data-mantine-color-scheme="dark"] .ag-theme-quartz .ag-row:hover {
    background-color: #373a40 !important;
}

.ag-theme-quartz .ag-cell {
    color: var(--mantine-color-text) !important;
}

/* Filter and menu theming */
.ag-theme-quartz .ag-menu {
    background-color: var(--mantine-color-body) !important;
    color: var(--mantine-color-text) !important;
    border: 1px solid var(--mantine-color-default-border) !important;
}

.ag-theme-quartz .ag-menu-option {
    color: var(--mantine-color-text) !important;
}

.ag-theme-quartz .ag-menu-option:hover {
    background-color: var(--mantine-color-gray-1) !important;
}

.ag-theme-quartz .ag-filter {
    background-color: var(--mantine-color-body) !important;
    color: var(--mantine-color-text) !important;
}

.ag-theme-quartz .ag-input-field-input {
    background-color: var(--mantine-color-body) !important;
    color: var(--mantine-color-text) !important;
    border: 1px solid var(--mantine-color-default-border) !important;
}

/* Selected row theming */
.ag-theme-quartz .ag-row-selected {
    background-color: var(--mantine-color-blue-1) !important;
}

.ag-theme-quartz .ag-row-selected:hover {
    background-color: var(--mantine-color-blue-2) !important;
}

[data-search-mode="semantic"] #input {
    box-shadow: 0 0 30px #4489ff8b;
}