/* Dark theme ported from the forum_smi_showcase branch (coloring/styling only). */

:root {
    --font-main: Arial;
    --bs-font-sans-serif: var(--font-main);
    --bs-body-font-family: var(--font-main);
    --bg-top: #0b1220;
    --bg-bottom: #111827;
    --ink: #e2e8f0;
    --ink-strong: #f8fafc;
    --ink-soft: #cbd5f5;
    --muted: #94a3b8;
    --card: #111c2f;
    --card-header: #0b1220;
    --card-border: rgba(148, 163, 184, 0.22);
    --accent: #22d3ee;
    --accent-strong: #38bdf8;
}

body {
    margin: 0;
    background: linear-gradient(135deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    color: var(--ink);
    font-family: var(--font-main);
}

/* Cards.
 *
 * NOTE: Dash auto-includes every stylesheet under assets/, so the flatly
 * bootstrap.min.css (which lives in assets/dist/...) is injected a SECOND time
 * AFTER this file. Its `.card { background-color: var(--bs-card-bg) }` (white)
 * therefore wins the cascade over our dark rule on equal specificity unless we
 * mark the dark surface !important. The outer cards escape this only because
 * they carry an inline CARD_STYLE background; the inner detail card relies on
 * the class rule and would otherwise render white. */
.card {
    background: var(--card) !important;
    border: 1px solid var(--card-border);
    box-shadow: 0 18px 40px rgba(3, 7, 18, 0.45);
    border-radius: 16px;
    font-family: var(--font-main);
}

.card :not(.bi) {
    font-family: inherit;
}

.card-header {
    background: var(--card-header);
    color: var(--ink-strong);
    border-bottom: 1px solid var(--card-border);
    border-radius: 16px 16px 0 0 !important;
    letter-spacing: 0.01em;
}

/* Topic landscape iframe */
#topic_landscape iframe {
    border: 0;
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

/* Detail card inner styling */
.detail-inner {
    border: none !important;
    border-radius: 12px;
    background: var(--card) !important;
}

.detail-inner .card-header {
    background: var(--card-header) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.6);
}

.detail-inner .card-body {
    background: none !important;
    color: var(--ink);
}

.detail-content,
.detail-content .card-text {
    color: var(--ink);
}

/* Dropdowns (react-select based dash dropdowns) */
.dash-dropdown .Select-control,
.dash-dropdown .Select-menu-outer,
.dash-dropdown .Select-control:hover {
    border-radius: 10px;
}

.dash-dropdown .Select-control {
    background-color: #0e1729;
    border: 1px solid var(--card-border);
    color: var(--ink);
}

.dash-dropdown .Select-menu-outer {
    background-color: #0e1729;
    border: 1px solid var(--card-border);
    color: var(--ink);
}

.dash-dropdown .Select-placeholder {
    color: var(--muted);
}

.dash-dropdown .Select-value,
.dash-dropdown .Select-value-label,
.dash-dropdown .Select-input input,
.dash-dropdown .Select-option {
    color: var(--ink-strong);
}

.dash-dropdown,
.dash-dropdown .Select-control,
.dash-dropdown .Select-menu-outer,
.dash-dropdown .Select-placeholder,
.dash-dropdown .Select-value,
.dash-dropdown .Select-input input,
.dash-dropdown .Select-option {
    font-family: var(--font-main);
}

.dash-dropdown .Select-control .Select-value-label {
    color: var(--ink-strong) !important;
}

.dash-dropdown .Select-option.is-focused {
    background-color: rgba(34, 211, 238, 0.16);
}

.dash-dropdown .Select-option.is-selected {
    color: var(--ink-strong);
    background-color: rgba(34, 211, 238, 0.28);
}

/* Radio items / labels inside cards */
.card .form-check-label,
.card label {
    color: var(--ink);
}

/* Tabs */
.nav-tabs .nav-link {
    color: var(--muted);
}

/* The active tab. flatly re-injects after this file (see the Cards note) and
 * paints the active tab WHITE via --bs-nav-tabs-link-active-bg, so the dark
 * background needs !important. The label color is forced inline on each
 * dbc.Tab (label_style #A5B5AF) — light grey on the previously-white pill was
 * unreadable; !important here beats that inline color and gives a strong
 * light-on-dark label. */
.nav-tabs .nav-link.active {
    color: var(--ink-strong) !important;
    background-color: #0f172a !important;
    border-color: var(--card-border) var(--card-border) transparent !important;
}

/* Inactive detail tabs also carry the inline light-grey label color, which is
 * fine on the dark header; just make sure the surface stays transparent. */
.detail-tabs .nav-link:not(.active) {
    background-color: transparent !important;
}

/* Topic-detail tab panes.
 *
 * The flatly bootstrap theme defines its card/tab surfaces through the
 * --bs-body-bg / --bs-card-bg variables, which resolve to WHITE. Our light
 * --ink text on those white surfaces is unreadable. Bootstrap renders the
 * tab body either as the #tab_content row (.detail-content) or, when dbc
 * mounts proper panes, as .tab-content/.tab-pane — force all of them dark and
 * make their text the light ink so the General Description / Content Summary /
 * Research Questions / Thematic Neighbourhood tabs are legible. */
.detail-inner .tab-content,
.detail-inner .tab-pane {
    background-color: var(--card) !important;
    color: var(--ink);
}

.detail-content,
#tab_content {
    background-color: transparent !important;
    color: var(--ink);
}

/* dcc.Markdown / html.P text rendered inside the tab body. */
.detail-content,
.detail-content p,
.detail-content .card-text,
.detail-content li,
.detail-content span,
.detail-inner .tab-pane,
.detail-inner .tab-pane p,
.detail-inner .tab-pane .card-text,
.detail-inner .tab-pane li {
    color: var(--ink) !important;
}

/* The Thematic Neighbourhood tab holds a Plotly treemap; its graph wrapper
 * must stay transparent so the dark card shows through (Plotly itself paints a
 * transparent paper/plot background, but the dcc.Graph container can inherit a
 * white card surface from flatly). */
.detail-content .js-plotly-plot,
.detail-content .plot-container,
.detail-content .dash-graph,
.detail-inner .tab-pane .js-plotly-plot,
.detail-inner .tab-pane .plot-container {
    background-color: transparent !important;
}

/* Links */
a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-strong);
}

/* Topic Details -> Documents tab: a scrollable list of document links with a
 * date column and a pager. Mirrors the dark detail-content styling. */
.documents-pane {
    color: var(--ink);
}

.documents-header {
    margin-bottom: 0.75rem;
    color: var(--ink);
}

.documents-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.document-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 6px 4px;
    border-bottom: 1px solid var(--card-border);
}

.document-link {
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-link:hover {
    color: var(--accent-strong);
}

.document-date {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.documents-pager {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

/* Tooltips and modals stay above iframes/cards */
.tooltip,
.bs-tooltip-top,
.bs-tooltip-end,
.bs-tooltip-bottom,
.bs-tooltip-start {
    z-index: 99999 !important;
    font-family: var(--font-main);
    --bs-tooltip-margin: 0.2rem;
}

.tooltip.show,
.tooltip.fade.show {
    z-index: 99999 !important;
}

.modal {
    z-index: 100000;
}

.modal-backdrop {
    z-index: 99990;
}

/* Modal content on dark background. !important is required to beat the bootswatch
   (flatly) theme loaded after this file, which otherwise paints modals white. */
.modal-content {
    background: var(--card) !important;
    color: var(--ink) !important;
    border: 1px solid var(--card-border) !important;
}

.modal-header,
.modal-footer {
    background: var(--card-header) !important;
    border-color: var(--card-border) !important;
}

.modal-header,
.modal-title,
.modal-body {
    color: var(--ink) !important;
}

/* The dbc ModalHeader close (X) icon is a dark SVG; invert it for dark backgrounds. */
.modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* Topic Details: dropdown (80%) + lifecycle/recency badges (20%) side by side. */
.topic-select-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topic-select-col {
    flex: 0 0 80%;
    max-width: 80%;
}

.topic-badge-col {
    flex: 0 0 20%;
    min-width: 0;  /* let the badge text wrap instead of overflowing */
}

/* Badges stack vertically inside the narrow 20% column. */
.topic-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-height: 1.2rem;
}

.topic-badge-date {
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Collapsible "How to read this map" help panel under the map title. */
.map-help-toggle {
    color: var(--accent) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.map-help-toggle:hover {
    color: var(--accent-strong) !important;
}

.map-help-list {
    margin-top: 0.4rem;
    padding-left: 1.1rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Map data-point popup: URL verbatim on the left, web-icon link on the right. */
.map-point-url-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--card-header);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.map-point-url {
    word-break: break-all;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.map-point-open {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent);
}

.map-point-open:hover {
    color: var(--accent-strong);
}

/* Topic chat panel (login-gated). Dark-theme readability for the title, consent
 * notice, question box and answer/sources. flatly is injected AFTER this file
 * (see the Cards note), so the surfaces it would otherwise paint light/white are
 * forced dark with !important; the question box and Send button are skinned to the
 * dark palette / accent colour to look intentional rather than a glaring white box. */
.chat-panel-title {
    color: var(--ink-strong) !important;
    letter-spacing: 0.01em;
}

/* The selected topic name under the panel title: a readable subtitle so the user
   can confirm the chat is scoped to the topic they picked (the same topic_id the
   retrieval is bound to). Empty until a topic is selected. */
.chat-topic-name {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

.chat-consent-notice {
    color: var(--ink-soft);
}

/* The conversation: a scrollable column of stacked turns. Each send appends a
   user bubble + an assistant bubble (streamed tokens + its cited sources). */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    margin: 0.5rem 0;
    padding-right: 0.25rem;
}

/* A single message bubble: rounded, padded, wrapping long text/urls. */
.chat-msg {
    max-width: 85%;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

/* The user's question: right-aligned, accent-tinted. */
.chat-msg-user {
    align-self: flex-end;
    background: rgba(34, 211, 238, 0.16);
    border: 1px solid var(--card-border);
}

/* The assistant's answer: left-aligned on the card surface. */
.chat-msg-assistant {
    align-self: flex-start;
    background: var(--card-header);
    border: 1px solid var(--card-border);
}

/* Markdown rendered inside an assistant bubble (renderMarkdown builds the DOM):
   tight block spacing + dark-theme code/emphasis so the formatted answer reads
   cleanly. The bubble's pre-wrap is overridden here so block elements control the
   layout instead of preserved source whitespace. */
.chat-msg-text {
    white-space: normal;
}

.chat-msg-text p {
    margin: 0 0 0.4rem 0;
}

.chat-msg-text p:last-child,
.chat-msg-text ul:last-child,
.chat-msg-text ol:last-child {
    margin-bottom: 0;
}

.chat-msg-text h6 {
    margin: 0.2rem 0 0.3rem 0;
    color: var(--ink-strong);
    font-size: 0.95rem;
    font-weight: 700;
}

.chat-msg-text ul,
.chat-msg-text ol {
    margin: 0 0 0.4rem 0;
    padding-left: 1.25rem;
}

.chat-msg-text li {
    margin: 0.1rem 0;
}

.chat-msg-text strong {
    color: var(--ink-strong);
    font-weight: 700;
}

.chat-msg-text em {
    font-style: italic;
}

.chat-msg-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: rgba(148, 163, 184, 0.18);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

.chat-msg-text a {
    color: var(--accent);
}

.chat-msg-text a:hover {
    color: var(--accent-strong);
}

/* Per-bubble sources: smaller + muted, set off from the answer text above. */
.chat-msg-sources {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.chat-msg-sources a {
    color: var(--accent);
}

.chat-msg-sources a:hover {
    color: var(--accent-strong);
}

/* The composer row holding the question box + Send button below the messages. */
.chat-composer {
    display: flex;
    flex-direction: column;
}

/* The question textarea: a subtle dark field with light text instead of the
   default bright-white input (matches the dark dropdown controls). */
.chat-question {
    background-color: #0e1729 !important;
    color: var(--ink) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
}

.chat-question::placeholder {
    color: var(--muted);
}

.chat-question:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem rgba(34, 211, 238, 0.25);
}

/* Send button: re-skin the (primary) dbc.Button to the accent colour so it fits
   the dashboard palette rather than flatly's muddy dark-navy primary. */
.chat-send.btn,
.chat-send {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #0b1220 !important;
}

.chat-send.btn:hover,
.chat-send:hover,
.chat-send.btn:focus,
.chat-send:focus {
    background-color: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: #0b1220 !important;
}

.column_left {
    border-right: 1px solid #000000;
    padding: 5px;
    flex: 0.6;
    border-left: 5px solid #ffffff;
    margin-bottom: 5px;
}

.column_right {
    padding: 5px;
    flex: 0.4;
    border-right: 5px solid #ffffff;
}