.none-i { display:none !important; }
.none { display:none; }

.w-10 { width:10% !important; }
.w-8 { width:8% !important; }
.w-7 { width:7% !important; }
.w-6 { width:6% !important; }
.w-5 { width:5% !important; }

.h-0 { height: 0; }

.fs-7 { font-size:0.875rem; }
.fs-8 { font-size:0.75rem; }

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-brand { width: 18rem !important; }
}

/* default (light): show light logo, hide dark */
.navbar-brand-light, .brand-icon-light { display: inline-block; }
.navbar-brand-dark, .brand-icon-dark { display: none; }

/* when the theme is dark, flip them */
[data-bs-theme="dark"] .navbar-brand-light, [data-bs-theme="dark"] .brand-icon-light { display: none; }
[data-bs-theme="dark"] .navbar-brand-dark, [data-bs-theme="dark"] .brand-icon-dark  { display: inline-block; }

.text-dark-green { color:#4d913c; }

.bg-dark-green {
  background-opacity: 1;
  background-color: #4d913c !important;
}

.btn-dark-green {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #4d913c;
  --bs-btn-border-color: #4d913c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #79af5c;
  --bs-btn-hover-border-color: #79af5c;
  --bs-btn-focus-shadow-rgb: 120, 191, 39;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a2e453;
  --bs-btn-active-border-color: #79af5c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(15, 19, 33, 0.125);
  --bs-btn-disabled-color: #0F1321;
  --bs-btn-disabled-bg: #4d913c;
  --bs-btn-disabled-border-color: #4d913c;
}

.btn-dark-green:disabled {
    color: #FFFFFF;
    pointer-events: none;
    background-color: #4d913c;
    border-color: #4d913c;
    opacity: 0.65;
}

.btn-outline-dark-green {
  --bs-btn-color: #4d913c;
  --bs-btn-border-color: #4d913c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4d913c;
  --bs-btn-hover-border-color: #4d913c;
  --bs-btn-focus-shadow-rgb: 119, 129, 161;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d913c;
  --bs-btn-active-border-color: #4d913c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(15, 19, 33, 0.125);
  --bs-btn-disabled-color: #4d913c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4d913c;
  --bs-gradient: none;
}

.btn-dark-green.show {
  color: #ffffff;
  background-color: #4d913c;
  border-color: #4d913c;
}


.show-password-text {
	cursor:pointer;
}


.dropdown-menu {
 border-color:#e6e8ec;
 border-width:1px;
}
.dropdown-divider {
	border-top:1px solid #e6e8ec !important;
}

.subscription.card .sub-title {
	height:2em;
	line-height:1.2em;
}

.nav-link.btn-sm {
	line-height:1.3;
	padding:0.65em 0.35em;
	font-size:0.75em;
	font-weight:500;
}
.nav-link.btn-sm:hover {
	color:#fff;
}
.nav-link.btn-sm.active {
	color:#fff;
}

.modal { z-index:1065 !important; }
.modal-backdrop { z-index:1050 !important; }


th.sort { cursor: pointer; }

.text-opaque { opacity:25%; }

.fc-daygrid-event-dot {
	margin: 0 4px;
	box-sizing: content-box;
	width: 0;
	height: 0;
	border: 4px solid #3788d8;
	border-radius: 4px;
}

.chat_content {
	font-size: 1rem;
}

.flex-parent-widths {
	min-width:0;
	max-width:100%;
}



.query-processing-container {
    height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable results/messages area */
.query-results {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 20px 16px 24px 16px; /* bottom padding will be adjusted by JS */
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0) 80%);
}

.composer {
  position: sticky;
  bottom: 0;
  background: white ;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3px 0px 0px;
}
.composer__inner {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 1100px;
  margin: 0 auto;
}
.composer__textarea {
  width: 100%;
  resize: none;
  min-height: 44px;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
.composer__btn {
  flex: 0 0 auto;
}


/* Messages, Dialogs, and Results */
.dialog {
	margin-bottom:18px;
}
.dialog .dialog-content {
	background-color:#F3F5FF;
	color:var(--bs-body-color);
	margin-bottom: 0.25rem;
	border-radius:0.75rem;
	position:relative;
	max-width:100%;
	padding:0.75rem 1rem;
}
.dialog-content {
	font-size:0.9175rem;
}
.dialog .dialog-content .dialog-time {
	flex-shrink:0;
	padding-left:0.75rem;
	position:relative;
	display:flex;
	align-items:flex-end;
}
.dialog-time span {
	height:1rem;
	line-height:1rem;
	white-space:nowrap;
	display:inline-block;
	vertical-align:bottom;
	font-size:0.678rem;
	opacity:0.7;
	position:relative;
	top:7px;
	right:-4px;
}

.counter {
  transition: transform .15s ease, color .15s ease;
}
.counter.bump { 
	transform: scale(1.08);
	color: rgb(0, 97, 255);
}


.profile-colors > .prc.active { border:2px solid black; }

.width-3x {
    width: 2rem!important
}
.width-4x {
    width: 2.5rem!important
}
.width-5x {
    width: 3rem!important
}
.width-6x {
    width: 3.5rem!important
}
.width-7x {
    width: 4rem!important
}
.height-3x {
    height: 2rem!important
}
.height-4x {
    height: 2.5rem!important
}
.height-5x {
    height: 3rem!important
}
.height-6x {
    height: 3.5rem!important
}
.height-7x {
    height: 4rem!important
}


.btn-circle-ripple {
    position: relative
}

.btn-circle-ripple::before {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #0592be;
    animation: pulse 2s infinite ease-in-out
}

.bg-gradient-light {
	background:linear-gradient(84.06deg, rgba(255,255,255, 86%) -28.62%, rgba(190,195,195,85%) 98.74%);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}




.th-status-wrap {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    margin-bottom: 8px;
}

/* The spinning ring around your logo */
#th_status_logo {
    position: relative;
    animation: th-spin-ring 1.2s linear infinite;
}
#th_status_logo.done {
    animation: none;
}
@keyframes th-spin-ring {
    /* The btn-circle-ripple already handles the ring — 
       if it doesn't spin by default, add this wrapper approach */
    to { --ring-angle: 360deg; }
}

.th-status-line {
	white-space: normal;
	word-wrap: break-word;
}

.th-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.th-status-toggle .material-symbols-rounded {
    transition: transform 0.2s;
}
.th-status-toggle.open .material-symbols-rounded {
    transform: rotate(180deg);
}

.th-status-log {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 2px solid var(--bs-border-color);
    padding-left: 10px;
    margin-top: 4px;
}
.th-status-log.open { max-height: 180px; overflow-y: auto; }

.th-log-entry {
    font-size: 11px;
    color: var(--bs-secondary-color);
    padding: 2px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.th-log-entry::before {
    content: '·';
    color: var(--bs-border-color);
}
.th-log-entry.latest {
    color: var(--bs-body-color);
}
.th-log-entry.latest::before {
    content: '›';
    color: var(--bs-success);
}



#working_strategy .content-wrapper {
    height: calc(100vh - 64px - 2rem - 56px); /* navbar + padding + toolbar */
}

.content-right-body {
    flex-direction: column !important;
    display: flex !important;
    position: relative;
}

#dialog_responses {
    flex: 1 !important;
    height: auto !important;
    min-height: 0;
    overflow-y: auto;
}


/* Scroll to Bottom Button */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.85);
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.scroll-to-bottom-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.scroll-to-bottom-btn .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}


/* Editable Strategy Title */
.strategy-title-editable {
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    outline: none;
    min-width: 50px;
}

.strategy-title-editable:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.strategy-title-editable.editing {
    background-color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
    cursor: text;
}

/* Saved Badge */
.strategy-saved-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background-color: #38a169;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.strategy-saved-badge.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.sidebar-icon {
	margin-right:0.15rem;
}
.nav-link, 
.sidebar-dropdown .sidebar-item .sidebar-link {
	font-size: 0.9125rem !important;
}
.sidebar-dropdown .sidebar-item .sidebar-link {
	padding: 0.24rem 0.70rem;
}

.page-header.v3 {
	background-color:#0d1117 !important;
	border-bottom:2px solid #2b3647;
}


.page-header.v3 .navbar-nav .nav-item { flex-shrink: 0; }
.page-header.v3 .btn { white-space: nowrap; }

.footer.v3 {
	background-color:#0d1117 !important;
	border-top:2px solid #2b3647;
	color:#76808f !important;
}

.v3 .nav-link {
	color:#cfe2ff !important;
}

.btn.primary {
    background: #16263f	;
    border-color: #4c9aff;
    color: #cfe2ff;
    font-weight: 500
}

.btn.primary:hover {
    background: #1c3357
}
/* ============================================================
   Dark-mode overrides for custom conversational-UI classes.
   Keyed on data-bs-theme="dark" (set on <html> by the theme),
   the same mechanism the rest of the UI uses. Light is untouched.
   ============================================================ */

/* Composer: light def hardcodes background:white -> give it a dark surface. */
[data-bs-theme="dark"] .composer {
	background: var(--bs-body-bg);
}

/* User dialog highlight: light #F3F5FF -> an elevated dark surface so the
   user bubble still reads as a highlight against the near-black page. */
[data-bs-theme="dark"] .dialog .dialog-content {
	background-color: var(--bs-secondary-bg);
}

/* Initials: .text-info resolves to #66a0ff in dark (Bootstrap, !important).
   Lift it to a lighter blue. Extra specificity + !important to win. */
[data-bs-theme="dark"] .dialog .dialog-content .text-info {
	color: #9cc4ff !important;
}

/* Editable strategy title: light def hardcodes background:#fff for the edit
   state and uses black-based rgba on hover (invisible on dark). Dark-ify both.
   Covers .editing and .edit since the JS class name varies. */
[data-bs-theme="dark"] .strategy-title-editable:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme="dark"] .strategy-title-editable.editing,
[data-bs-theme="dark"] .strategy-title-editable.edit {
	background-color: var(--bs-secondary-bg);
	color: var(--bs-body-color);
}


/* ==========================================================================
   V2 result renderers — themeable color tokens (Option C).

   The renderers (V2ResultsRenderer, V2MetricsRenderer, V2ComparisonRenderer,
   V2ScreenerRenderer, V2SignalExplanationRenderer, MarkdownRenderer,
   V2ChatRenderer) emit inline styles. Instead of hardcoded hex, those inline
   styles now reference these variables, so result content recolors with the
   app theme (data-bs-theme on <html>) — the same mechanism the rest of the UI
   uses.

   LIGHT values below are the EXACT hexes that were previously inline, so light
   mode is byte-for-byte unchanged. DARK values are derived from the app's own
   theme tokens in admin-theme.css (body/secondary/tertiary bg, *-text, *-subtle)
   so result areas look native in dark mode.

   Load this AFTER admin-theme.css.
   ========================================================================== */

:root {
	/* text */
	--th-r-fg:          #2a2348;  /* primary text */
	--th-r-fg-strong:   #1f2937;  /* card titles */
	--th-r-fg-body:     #374151;  /* card body text */
	--th-r-fg-body2:    #4a5568;
	--th-r-muted:       #666666;  /* muted labels */
	--th-r-muted-2:     #6b7280;
	--th-r-muted-3:     #888888;
	--th-r-muted-4:     #9ca3af;
	--th-r-muted-5:     #555555;
	--th-r-muted-6:     #999999;

	/* borders */
	--th-r-border:        #e5e2f5;
	--th-r-border-2:      #e5e7eb;
	--th-r-border-3:      #cbd5e0;
	--th-r-border-faint:  #f3f4f6;
	--th-r-border-faint2: #f0f0f0;
	--th-r-border-faint3: #ececec;
	--th-r-border-faint4: #eeeeee;

	/* surfaces */
	--th-r-surface:      #fafaff;  /* insights / analysis box */
	--th-r-surface-2:    #f7f5ff;  /* code / hr tint */
	--th-r-surface-3:    #fafafa;  /* screener / explain card */
	--th-r-surface-code: #f1f1f4;  /* inline code */
	--th-r-surface-4:    #f0eef9;
	--th-r-surface-5:    #f1f5f9;
	--th-r-surface-pos:  #f0faf3;  /* winner / positive row tint */
	--th-r-surface-warn: #fffaf0;  /* caveat box */
	--th-r-surface-card: #ffffff;  /* metric cards (opaque card face) */

	/* accents */
	--th-r-accent:    #6b5dd3;  /* purple left border */
	--th-r-accent-2:  #4c3fb1;  /* section headings */
	--th-r-accent-3:  #5b21b6;  /* screener purple */
	--th-r-info:      #0369a1;  /* blue accent */

	/* semantic */
	--th-r-pos:         #1e8a3c;  /* positive green */
	--th-r-pos-2:       #16a34a;
	--th-r-neg:         #c53030;  /* negative red */
	--th-r-neg-2:       #dc2626;
	--th-r-warn-bg:     #fde68a;  /* amber background */
	--th-r-warn-text:   #7c5e10;  /* amber text */
	--th-r-warn-text-2: #b45309;

	--th-r-on-accent:   #ffffff;  /* text on colored badges */
	--th-r-muted-7:     #6c757d;
	--th-r-pos-3:       #38a169;
	--th-r-ink:         #333333;
	--th-r-black:       #000000;
}

[data-bs-theme="dark"] {
	/* text — from --bs-body-color / emphasis / secondary-text */
	--th-r-fg:          #E3E6F2;
	--th-r-fg-strong:   #ffffff;
	--th-r-fg-body:     #D9DCEA;
	--th-r-fg-body2:    #D9DCEA;
	--th-r-muted:       #9aa0b4;
	--th-r-muted-2:     #9aa0b4;
	--th-r-muted-3:     #a4a9bb;
	--th-r-muted-4:     #a4a9bb;
	--th-r-muted-5:     #9aa0b4;
	--th-r-muted-6:     #a4a9bb;

	/* borders — from --bs-secondary-bg / tertiary-bg */
	--th-r-border:        #393c4e;
	--th-r-border-2:      #393c4e;
	--th-r-border-3:      #4a4f66;
	--th-r-border-faint:  #2c2f41;
	--th-r-border-faint2: #2c2f41;
	--th-r-border-faint3: #2c2f41;
	--th-r-border-faint4: #2c2f41;

	/* surfaces — from --bs-tertiary-bg / dark-bg-subtle / *-bg-subtle */
	--th-r-surface:      #2c2f41;
	--th-r-surface-2:    #2c2f41;
	--th-r-surface-3:    #1b1d29;
	--th-r-surface-code: #2c2f41;
	--th-r-surface-4:    #2c2f41;
	--th-r-surface-5:    #2c2f41;
	--th-r-surface-pos:  #064a34;  /* --bs-success-bg-subtle */
	--th-r-surface-warn: #642e09;  /* --bs-warning-bg-subtle */
	--th-r-surface-card: #1b1d29;  /* --bs-dark-bg-subtle: elevated card on the near-black page */

	/* accents — from --bs-primary-text / info-text */
	--th-r-accent:    #9b77ff;
	--th-r-accent-2:  #9b77ff;
	--th-r-accent-3:  #9b77ff;
	--th-r-info:      #66a0ff;

	/* semantic — from --bs-success-text / danger-text / warning-text */
	--th-r-pos:         #70d5b3;
	--th-r-pos-2:       #70d5b3;
	--th-r-neg:         #f88c9e;
	--th-r-neg-2:       #f88c9e;
	--th-r-warn-bg:     #642e09;
	--th-r-warn-text:   #fbab73;
	--th-r-warn-text-2: #fbab73;

	--th-r-on-accent:   #ffffff;
	--th-r-muted-7:     #9aa0b4;
	--th-r-pos-3:       #70d5b3;
	--th-r-ink:         #E3E6F2;
	--th-r-black:       #E3E6F2;
}


/* Dark mode: btn-white keeps a light surface, so its label must stay dark.
   .nav-link also sets a color, so match on both classes plus the element
   to win on specificity without reaching for !important. */
[data-bs-theme="dark"] a.btn.btn-white,
[data-bs-theme="dark"] a.btn.btn-white:hover,
[data-bs-theme="dark"] a.btn.btn-white:focus,
[data-bs-theme="dark"] a.btn.btn-white:active {
	background-color: var(--th-r-surface-2, #2a2740);
	color: var(--th-r-fg, #ece9f5);
	border-color: var(--th-r-border, #3d3956);
}