.make-hidden>div {
	display: none;
}

.make-visible>div {
	display: block;
}

.data-sheet-section:hover {
	cursor: pointer;
}

.make-stuff-hidden>div.stuff-text {
	display: none;
}

.make-stuff-visible>div.stuff-text {
	display: block;
}

.stuff-description:hover {
	cursor: pointer;
}

.strike-through {
	text-decoration: line-through;
}
.mb-05 {
    margin-bottom: 0.5rem !important;
}
.px-05 {
	padding-right: 0.5rem !important;
	padding-left: 0.5rem !important;
}
.py-05 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.pt-02 {
	padding-top: 0.2rem !important;
}

/* PDF viewer styling */
.pdf-viewer {
	width: 100%;
	min-height: 500px;
	display: none; /* Initially hidden until loaded */
	border: 1px solid #ddd;
}

@keyframes glow-pulse {
	0%, 100% {
		box-shadow: 0 0 6px 2px rgba(40, 167, 69, 0.4);
	}
	50% {
		box-shadow: 0 0 18px 6px rgba(40, 167, 69, 0.75);
	}
}

.flashing {
	animation: glow-pulse 2s ease-in-out infinite;
}

.flashing:hover {
	color: white;
}

/* Flashing border animation for highlighted sections */
@keyframes border-flash {
	0%, 100% {
		border-color: #ff3860;  /* Bright red */
		box-shadow: 0 0 15px #ff3860;
	}
	50% {
		border-color: #007bff;  /* Blue */
		box-shadow: 0 0 5px #007bff;
	}
}

/* Highlight section with extra thick flashing border */
.highlight-section {
	border: 8px solid #ff3860 !important;  /* Using !important to override any other border styles */
	border-radius: 5px !important;
	animation: border-flash 0.8s infinite !important;  /* Faster animation for more noticeable flashing */
	box-shadow: 0 0 15px #ff3860 !important;  /* Add glow effect */
	position: relative !important;  /* Ensure position is set for z-index */
	z-index: 1 !important;  /* Ensure highlighted element is above others */
}

.progress {
	height: 50px;
	width: 100%; /* Full width */
	border-radius: 5px;
	background-color: rgba(0, 208, 130, 0.25); /* Light green background for 100% width */
	position: relative; /* Required for positioning absolute elements */
}

.progress-bar {
	background-color: rgb(0, 208, 130); /* Solid modern green for filled portion */
	display: flex; /* Enable flexbox on progress bar */
	align-items: end; /* Center vertically */
	font-weight: 700; /* Make text bold */
	font-size: 1.25rem; /* Adjust font size */
	padding-right: 10px; /* Add some padding to the right */
}

.progress-container {
	display: flex; /* Use flexbox to align items */
	align-items: center; /* Center vertically */
	position: relative; /* Required for positioning the text */
}

.mw-bg-green {
	background-color: rgba(0, 208, 130);
	color: white;
	border-radius: 10px;
}

/* ✅ Allow wrapping for Financial KPI names */
.kpi-name-financial {
    max-width: 250px; /* Limit width */
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

/* 🚫 Prevent wrapping in Operational KPI Table */
.kpi-name-operational {
    white-space: nowrap; /* Forces text to stay on one line */
    overflow: hidden; /* Prevents text from overflowing */
    text-overflow: ellipsis; /* Adds '...' when text is too long */
    max-width: 250px; /* Ensures text does not expand the table */
}

.pre-line {
    white-space: pre-line;
}
/* The theme forces `ul li { line-height: 1.8 }` (bootstrap-extended); reset Info
   bullets to a normal line spacing so wrapped facts don't look airy. */
.info-bullets li {
    line-height: 1.5;
}
.bg-primary-light {
    background-color: rgba(0, 123, 255, 0.1); /* Adjust the alpha value for lightness */
}
.bg-info-light {
    background-color: rgba(23, 162, 184, 0.1); /* Adjust the alpha value for lightness */
}
.bg-success-light {
    background-color: rgba(0, 208, 130, 0.1); /* Adjust the alpha value for lightness */
}
.bg-warning-light {
    background-color: rgba(253, 185, 1, 0.25); /* Adjust the alpha value for lightness */
}

.bg-secondary-light {
    background-color: rgba(108, 117, 125, 0.15); /* Light secondary/gray background */
}

/* Balance sheet history expandable section */
.expandable-indicator {
    font-size: 1.2rem;
    margin-left: 5px;
    color: #6c757d;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

.stuff-description:hover .expandable-indicator {
    color: #007bff;
}

.stuff-description:hover {
    cursor: pointer;
    color: #007bff;
}

.make-stuff-visible .expandable-indicator {
    transform: rotate(180deg);
}

/* Horizontal scrolling container - generic utility for buttons, tabs, etc. */
.horizontal-scroll-container,
.year-selector-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
}

.horizontal-scroll-container .btn-group,
.year-selector-scroll .btn-group {
    display: inline-flex;
}

.horizontal-scroll-container .nav,
.year-selector-scroll .nav {
    flex-wrap: nowrap;
}

/* Hide scrollbar but keep functionality */
.horizontal-scroll-container::-webkit-scrollbar,
.year-selector-scroll::-webkit-scrollbar {
    height: 4px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb,
.year-selector-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 123, 255, 0.2);
    border-radius: 4px;
}

.horizontal-scroll-container::-webkit-scrollbar-track,
.year-selector-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Chart period / period-kind button groups: normal .btn size on desktop, small (btn-group-sm)
   only on mobile, where the space is tight. Values mirror Bootstrap's .btn-group-sm > .btn.
   The .btn-group inner-corner radius rules keep the connected look (higher specificity). */
@media (max-width: 767.98px) {
    .btn-group-sm-mobile > .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        line-height: 1;
        border-radius: 0.21rem;
    }
}

/* Comment system styling */
.reply-form {
    background-color: rgba(0, 123, 255, 0.1) !important; /* Same as bg-primary-light */
}
.reply-form textarea {
    min-height: 60px !important;
    font-size: 0.9rem !important;
}
.reply-form .form-group {
    margin-bottom: 0.5rem !important;
}
.comment-replies .card {
    border: none !important;
}

/* Floating Buttons Container */
.floating-buttons-container {
    position: fixed;
    top: 45%;  /* Position at 45% from the top */
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 1000; /* Much lower than dropdown menus (9999) */
}

/* Common styles for floating buttons */
.floating-button {
    color: white;
    width: auto;
    min-width: 50px;
    height: 50px;
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 15px;
    cursor: pointer;
    box-shadow: -3px 0 10px rgba(0,0,0,0.1);
    position: relative;
    opacity: 0.85;
}

.floating-button:hover {
    opacity: 1;
}

/* Create a pseudo-element for the hover effect */
.floating-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
    transition: width 0.3s ease, transform 0.3s ease;
}

/* Only the pseudo-element expands on hover */
.floating-button:hover::before {
    width: 55px;
    transform: translateX(-5px);
}

.floating-button i {
    font-size: 1.5rem;
}


/* Shorter height for width toggle button */
.width-toggle-btn {
    height: 25px !important;
    min-width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    border: 1px solid var(--primary) !important;
}

.width-toggle-btn i {
    font-size: 1.4rem !important;
    color: var(--primary) !important;
    font-weight: 900 !important;
}

/* Slim mode styles */
.floating-buttons-container.slim {
    width: 25px;
}

.floating-buttons-container.slim .width-toggle-btn {
    width: 25px !important;
    min-width: 25px !important;
}


.floating-buttons-container.slim .floating-button:not(.width-toggle-btn) i {
    display: none;
}

.floating-buttons-container.slim .comments-count-container,
.floating-buttons-container.slim .notes-count-container,
.floating-buttons-container.slim .files-count-container {
    display: none;
}

/* Comments count container */
.comments-count-container,
.notes-count-container {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

/* Badge for counters */
.floating-btn-count {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comments-offcanvas,
.strategies-offcanvas,
.notes-offcanvas,
.files-offcanvas,
.rounds-offcanvas,
.transactions-offcanvas,
.captable-offcanvas,
.participations-offcanvas,
.shareholder-returns-offcanvas,
.key-metrics-offcanvas,
.costs-offcanvas,
.conversations-offcanvas {
    position: fixed;
    top: 0;
    height: 100%;
    background-color: white;
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Offcanvas width utility classes */
.offcanvas-sm {
    width: 400px;
    right: -400px;
}

.offcanvas-md {
    width: 500px;
    right: -500px;
}

.offcanvas-lg {
    width: 750px;
    right: -750px;
}

.offcanvas-xl {
    width: 70%;
    right: -70%;
}

.offcanvas-sm.active,
.offcanvas-md.active,
.offcanvas-lg.active,
.offcanvas-xl.active {
    right: 0;
}

.notes-tab-count {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.notes-tab-count:empty {
    display: none;
}

.nav-link.active .notes-tab-count {
    background: #17a2b8;
    color: #fff;
}

#notes-tabs .nav-link {
    padding: 6px 14px;
    border-radius: 4px 4px 0 0;
    color: #6c757d;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: none;
    margin-right: 4px;
}

#notes-tabs .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #495057;
}

#notes-tabs .nav-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}


/* Larger, clearer founder update checkbox */
.note-type-checkbox .custom-control-input {
    width: 1.25rem;
    height: 1.25rem;
}

.note-type-checkbox .custom-control-label {
    padding-left: 0.4rem;
    line-height: 1.6;
    cursor: pointer;
}

.note-type-checkbox .custom-control-label::before,
.note-type-checkbox .custom-control-label::after {
    width: 1.25rem;
    height: 1.25rem;
    top: 0.1rem;
}

/* Custom compact notes and files layout */
.notes-offcanvas-body,
.files-offcanvas-body {
    padding: 15px;
}

.compact-notes-container,
.compact-files-container,
.compact-transactions-container {
    width: 100%;
}

/* Compact transactions table styling */
.compact-transactions-container .table {
    font-size: 1rem;
    margin-bottom: 0;
}

.compact-transactions-container .table th,
.compact-transactions-container .table td {
    padding: 0.5rem 0.25rem;
    vertical-align: middle;
}

/* Add padding for DataTable sort arrows */
.compact-transactions-container .table thead th {
    padding-right: 25px !important;
}

.note-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: 3px solid #17a2b8;
    padding-top: 4px;
    padding-bottom: 4px;
}

.note-icon {
    display: flex;
    align-items: center;
    padding-right: 12px;
    font-size: 2.5rem;
    flex-shrink: 0;
    align-self: flex-end;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.note-main {
    flex: 1;
    min-width: 0;
}

.note-item-highlighted {
    border-left-color: #007bff;
}

.note-item-highlighted .note-sticky-header {
    background-color: #f0f5ff;
}

.file-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #4682b4;
    padding-top: 4px;
    padding-bottom: 4px;
}

.file-icon {
    display: flex;
    align-items: center;
    padding-right: 12px;
    font-size: 2.5rem;
    flex-shrink: 0;
    align-self: flex-end;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.file-main {
    flex: 1;
    min-width: 0;
}

.note-content,
.file-content {
    width: 100%;
}

.note-header,
.file-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 1rem;
}

.note-date,
.file-date {
    color: #6c757d;
    margin-right: 4px;
}

.note-author {
    color: #007bff;
    font-weight: 600;
}

.note-author.personal {
    color: #28a745;
}

#noteHistoryModal .modal-header {
    padding: 0.75rem 1rem;
}

.note-history-subtitle {
    font-size: 0.85rem;
    margin: 0;
}

.note-history-layout {
    display: flex;
    height: 480px;
}

.note-history-list {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
}

.note-history-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}

.note-history-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.note-history-item.active {
    background-color: rgba(115, 103, 240, 0.08);
    border-left: 3px solid #7367f0;
}

.note-history-item .history-date {
    font-weight: 600;
    color: #495057;
}

.note-history-item .history-meta {
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 2px;
}

.note-history-preview {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.note-history-preview .preview-description {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* Version-history diff: changed text (vs plain added) gets an orange highlight */
mark.note-diff-changed {
    background-color: #ffc078;
}

/* Version-history diff: a solid red block marks where text was deleted */
mark.note-diff-deleted {
    display: inline-block;
    min-width: 2.5ch;
    margin: 0 0.5ch;
    background-color: #fa5252;
    color: #fff;
    font-weight: 700;
    border-radius: 2px;
    text-align: center;
    vertical-align: baseline;
}

/* Spreadsheet: step-number badge (1/2/3) — override Bootstrap's 75% badge font so the
   number matches the label beside it. Not a pill. */
.badge-step {
    font-size: 1rem;
    padding: 0.35em 0.55em;
}

/* Spreadsheet: corner marker on a KPI cell that has Info attached (replaces the old
   Handsontable comment triangle). */
td.kpi-has-info {
    position: relative;
}

td.kpi-has-info::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 6px solid #7367f0;
    border-left: 6px solid transparent;
}

/* KpiData version-history preview: one labelled row per editable field */
.kpi-history-field {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.kpi-history-field-label {
    width: 140px;
    flex-shrink: 0;
    color: #6c757d;
    font-weight: 600;
}

.kpi-history-field-value {
    flex: 1;
}

.note-header .bi-robot {
    font-size: 1rem;
    vertical-align: middle;
}

.note-description-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.note-description-row {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    flex: 1;
}

.note-description-row:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

.note-description-row .note-description,
.note-description-row .file-description {
    background: none;
    border-radius: 0;
    flex: 1;
}

.note-description-row .note-description:hover,
.note-description-row .file-description:hover {
    background: none;
}

.note-description,
.file-description {
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.06);
    padding: 8px 10px;
    border-radius: 4px;
}

.note-description:hover,
.file-description:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.note-sticky-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.note-content,
.file-content {
    padding: 10px 10px 10px;
    border-left: 2px solid #e9ecef;
    margin-top: 5px;
}

/* Make all headings in note content bold with adequate spacing */
.note-content h1,
.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6 {
    font-weight: 700 !important;
    margin-top: 1.4rem !important;
    margin-bottom: 0.4rem !important;
}

.note-content h1:first-child,
.note-content h2:first-child,
.note-content h3:first-child,
.note-content h4:first-child,
.note-content h5:first-child,
.note-content h6:first-child {
    margin-top: 0 !important;
}

.note-content.hidden,
.file-content.hidden {
    display: none;
}

.note-content .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
}

.edit-note-btn,
.note-history-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #7367f0;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.edit-note-btn:hover,
.note-history-btn:hover {
    background-color: #7367f0;
    color: #fff;
}

.txn-breakdown-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #adb5bd;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    vertical-align: middle;
    padding: 0 2px;
}

.txn-breakdown-btn:hover {
    background-color: #7367f0;
    color: #fff;
}

.txn-breakdown-table td,
.txn-breakdown-table th {
    padding: .5rem .75rem;
}

.txn-btn-group {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Ensure edit button is clearly visible */
.note-content .btn-outline-primary {
    z-index: 2;
    position: relative;
}

.note-divider {
    margin: 16px 0;
    border: 0;
    border-top: 2px solid #d0d0d0;
}

.file-divider {
    margin: 16px 0;
    border: 0;
    border-top: 2px solid #d0d0d0;
}

.file-year-header {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: rgba(70, 130, 180, 0.7);
    border-radius: 4px;
    padding: 5px 10px;
    margin: 12px 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.file-year-header:first-child {
    margin-top: 0;
}

.note-year-header {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: rgba(23, 162, 184, 0.7);
    border-radius: 4px;
    padding: 5px 10px;
    margin: 12px 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.note-year-header:first-child {
    margin-top: 0;
}

.file-year-chevron {
    transition: transform 0.2s ease;
    transform: rotate(180deg);
}

.file-year-header.collapsed .file-year-chevron,
.note-year-header.collapsed .file-year-chevron {
    transform: rotate(0deg);
}

/* Files count container */
.files-count-container {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.comments-offcanvas.active,
.strategies-offcanvas.active,
.notes-offcanvas.active,
.files-offcanvas.active,
.rounds-offcanvas.active,
.transactions-offcanvas.active,
.captable-offcanvas.active,
.participations-offcanvas.active,
.shareholder-returns-offcanvas.active,
.key-metrics-offcanvas.active,
.costs-offcanvas.active,
.conversations-offcanvas.active {
    right: 0;
}

.comments-offcanvas-header,
.strategies-offcanvas-header,
.notes-offcanvas-header,
.files-offcanvas-header,
.rounds-offcanvas-header,
.transactions-offcanvas-header,
.captable-offcanvas-header,
.participations-offcanvas-header,
.shareholder-returns-offcanvas-header,
.costs-offcanvas-header,
.conversations-offcanvas-header {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.notes-offcanvas-header {
    flex-direction: column;
    padding-bottom: 12px;
}

.notes-offcanvas-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 10px;
}

.comments-offcanvas-header h4,
.strategies-offcanvas-header h4,
.notes-offcanvas-header h4,
.files-offcanvas-header h4,
.rounds-offcanvas-header h4,
.transactions-offcanvas-header h4,
.captable-offcanvas-header h4,
.participations-offcanvas-header h4 {
    margin: 0;
    /* Using font-weight-bold class directly in HTML */
}

.notes-expand-icon {
    font-size: 1rem;
}

#expand-notes-btn:focus,
#expand-conversations-btn:focus {
    outline: none;
    box-shadow: none;
}

.notes-offcanvas-header p.small,
.files-offcanvas-header p.small,
.rounds-offcanvas-header p.small,
.transactions-offcanvas-header p.small,
.captable-offcanvas-header p.small,
.participations-offcanvas-header p.small {
    color: #6c757d;
    margin-top: 3px;
}

.comments-offcanvas-body,
.strategies-offcanvas-body,
.notes-offcanvas-body,
.files-offcanvas-body,
.rounds-offcanvas-body,
.transactions-offcanvas-body,
.captable-offcanvas-body,
.participations-offcanvas-body,
.shareholder-returns-offcanvas-body,
.conversations-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}


/* Zero top padding so sticky elements (toolbar, note header) sit flush
   at the top of the scroll viewport with no gap for content to scroll into.
   Visual separation is handled by the header's padding-bottom instead. */
.notes-offcanvas-body {
    padding-top: 0;
}

.costs-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.costs-chart-wrap {
    padding: 12px 15px 0;
    max-height: 220px;
}


/* Strategies Offcanvas */
.strategies-offcanvas {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background-color: white;
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.strategies-offcanvas.active {
    right: 0;
}

.strategies-offcanvas-header {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strategies-offcanvas-header h4 {
    margin: 0;
}

.strategies-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}


/* Responsive adjustments */
@media (max-width: 576px) {
    /* Smaller floating buttons on mobile */
    .floating-button {
        width: auto;
        min-width: 40px;
        height: 40px;
        padding: 0 8px 0 8px;
    }
    
    .floating-button i {
        font-size: 1.2rem;
    }
    
    .comments-count-container,
    .notes-count-container {
        margin-left: 3px;
    }
    
    .floating-btn-count {
        font-size: 0.85rem;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
    }
    
    /* Position floating buttons higher on mobile */
    .floating-buttons-container {
        top: 25%;
    }
    
    /* Mobile responsive widths */
    .offcanvas-sm {
        width: 300px;
        right: -300px;
    }

    .offcanvas-md,
    .offcanvas-lg,
    .offcanvas-xl {
        width: 90%;
        right: -90%;
    }
}

/* Comment highlight animation for notification clicks */
.comment-highlight {
    animation: comment-pulse 3s 1;
}

@keyframes comment-pulse {
    0% { background-color: transparent; }
    30% { background-color: rgba(0, 123, 255, 0.3); }
    100% { background-color: transparent; }
}

/* Mobile portfolio dropdown styling */
.navbar-portfolio .btn-primary {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.navbar-portfolio .ficon {
    color: white;
}

.navbar-portfolio .dropdown-toggle::after {
    vertical-align: middle;
}

/* Select2 dropdown — appended to body, must clear all floating panels */
.select2-dropdown {
    z-index: 15000 !important;
}

/* Navbar dropdown portal — resets visual styles on the ancestor wrapper */
#mw-navbar-portal,
#mw-navbar-portal .navbar-container,
#mw-navbar-portal .nav {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
}
#mw-navbar-portal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    pointer-events: none;
}
#mw-navbar-portal .nav > li {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    position: static !important;
}
#mw-navbar-portal .dropdown-menu {
    pointer-events: auto;
}

/* Portfolio icon text styling */
.mt-05 {
    margin-top: 0.5rem !important;
}

.portfolio-text {
    font-size: 0.75rem;
    line-height: 1;
    width: 80px;
    overflow: hidden;
    text-align: center;
}

@keyframes portfolio-scroll {
    0% { transform: translateX(80px); }
    25% { transform: translateX(0); }
    75% { transform: translateX(-40px); }
    100% { transform: translateX(80px); }
}

@keyframes diamond-shine {
    0%, 20%, 50%, 80%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    40%, 60% {
        filter: brightness(1.5) drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
        transform: scale(1.1);
    }
}

.portfolio-text span {
    display: inline-block;
    white-space: nowrap;
    animation: portfolio-scroll 8s ease-in-out infinite;
    padding: 0;
}

.diamond-icon {
    transform-origin: center;
}

.navbar-portfolio:hover .diamond-icon {
    animation: diamond-shine 3s ease-in-out;
}

/* Asset Details - Description read-more functionality styles */
.description-container {
    position: relative;
}

.description-text.collapsed {
    max-height: 4.5em; /* About 3 lines of text */
    overflow: hidden;
}

.read-more-btn {
    color: #1e9ff2;
    font-weight: 500;
    margin-top: 0.25rem;
    display: inline-block;
}

/* Asset link styling - improved visibility */
.asset-link {
    color: #545454;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: rgba(0, 123, 255, 0.06);
    display: inline-block;
}

.asset-link:hover {
    color: #007bff;
    text-decoration: none;
    background-color: rgba(0, 123, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Private markets table: keep long asset names on one line (ellipsis + hover title) */
#asset-table .asset-link {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Note list table column balancing */
#note-list-table .stuff-description {
    min-width: 200px;
}

/* Force percentage widths for note list table columns */
#note-list-table th:nth-child(1) {
    width: 10% !important;
}

#note-list-table th:nth-child(2) {
    width: 10% !important;
}

#note-list-table th:nth-child(3) {
    width: 30% !important;
}

#note-list-table th:nth-child(4) {
    width: 50% !important;
}

/* Success color override - using darker green for better visibility */
:root {
    --success: #00a86b;  /* Use the darker emerald green as the base success color */
    --success-dark: #00a86b;  /* Rich emerald green for profit/finance context */
}

/* Override Bootstrap success classes to use darker color */
.text-success {
    color: #00a86b !important;
}

.btn-success {
    background-color: #00a86b !important;
    border-color: #00a86b !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #008f5b !important;
    border-color: #008f5b !important;
}

.badge-success {
    background-color: #00a86b !important;
}

/* Background colors */
.bg-indigo {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

.bg-indigo-light {
    background-color: rgba(111, 66, 193, 0.1) !important;
}

.bg-success-dark {
    background-color: var(--success-dark) !important;
    color: #fff !important;
}

.bg-success-dark-light {
    background-color: rgba(0, 168, 107, 0.1) !important;
}

/* Button variants */
.btn-success-dark {
    background-color: var(--success-dark) !important;
    border-color: var(--success-dark) !important;
    color: #fff !important;
}

.btn-success-dark:hover,
.btn-success-dark:focus,
.btn-success-dark:active {
    background-color: #008f5b !important;  /* Slightly darker for hover */
    border-color: #008f5b !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 168, 107, 0.4) !important;
}

.btn-outline-success-dark {
    border-color: var(--success-dark) !important;
    color: var(--success-dark) !important;
    background-color: transparent !important;
}

.btn-outline-success-dark:hover,
.btn-outline-success-dark:focus,
.btn-outline-success-dark:active {
    background-color: var(--success-dark) !important;
    color: #fff !important;
}

/* Text color */
.text-success-dark {
    color: var(--success-dark) !important;
}

/* Border color */
.border-success-dark {
    border-color: var(--success-dark) !important;
}

/* Badge variants */
.badge-success-dark {
    background-color: var(--success-dark) !important;
    color: #fff !important;
}

.badge-steel {
    background-color: #4682b4 !important;
    color: #fff !important;
}

.badge-teal {
    background-color: #26a69a !important;
    color: #fff !important;
}

.bg-steel {
    background-color: #4682b4 !important;
}

.bg-steel:hover {
    background-color: #3a6d99 !important;
}

.bg-steel-light {
    background-color: rgba(70, 130, 180, 0.15) !important;
}

.btn-steel {
    background-color: #4682b4;
    border-color: #4682b4;
    color: white;
}

.btn-steel:hover,
.btn-steel:focus,
.btn-steel:active {
    background-color: #3a6d99;
    border-color: #3a6d99;
    color: white;
}

.btn-outline-steel {
    border-color: #4682b4;
    color: #4682b4;
    background-color: transparent;
}

.btn-outline-steel:hover,
.btn-outline-steel:focus,
.btn-outline-steel:active {
    background-color: #4682b4;
    border-color: #4682b4;
    color: white;
}

/* Purple color utilities for Cap Table */
.bg-purple {
    background-color: #6633CC !important;
    color: #fff !important;
}

.bg-purple:hover {
    background-color: #5528b3 !important;
}

.bg-purple-light {
    background-color: rgba(102, 51, 204, 0.15) !important;
}

.text-purple {
    color: #6633CC !important;
}

.bg-cyan {
    background-color: #00BCD4 !important;
    color: #fff !important;
}

.bg-cyan:hover {
    background-color: #00ACC1 !important;
}

.bg-cyan-light {
    background-color: rgba(0, 188, 212, 0.15) !important;
}

/* Orange color utilities for Dividend Forecasts */
.bg-orange {
    background-color: #FF6B35 !important;
    color: #fff !important;
}

.bg-orange:hover {
    background-color: #E85A2A !important;
}

.bg-orange-light {
    background-color: rgba(255, 107, 53, 0.15) !important;
}

.text-orange {
    color: #FF6B35 !important;
}

.text-cyan {
    color: #00BCD4 !important;
}

.bg-teal {
    background-color: #26a69a !important;
    color: #fff !important;
}

.bg-teal:hover {
    background-color: #1e8e83 !important;
}

.bg-teal-light {
    background-color: rgba(38, 166, 154, 0.12) !important;
}

.badge-purple {
    background-color: #6633CC !important;
    color: #fff !important;
}

.btn-purple {
    background-color: #6633CC;
    border-color: #6633CC;
    color: white;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active {
    background-color: #5528b3;
    border-color: #5528b3;
    color: white;
}

/* Cap Table specific styles */
.captable-chart-container {
    max-width: 500px;
    margin: 0 auto;
}

.captable-chart-container canvas {
    cursor: default;
}

.captable-others-list {
    line-height: 1.8;
    color: #6c757d;
}

.captable-others-list .asset-link {
    font-weight: normal;
}

/* Shareholder popover */
.captable-popover {
    position: fixed;
    z-index: 20000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    min-width: 200px;
    max-width: calc(100vw - 20px);
    transform: translate(-50%, calc(-100% - 10px));
    left: clamp(110px, var(--popover-x, 50%), calc(100vw - 110px)) !important;
}

.captable-popover-content {
    padding: 15px;
    text-align: center;
}

.captable-popover-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

.captable-popover-content .btn {
    width: 100%;
}

.badge-orange {
    background-color: #FD7E14 !important;
    color: #fff !important;
}

/* Alert variants */
.alert-success-dark {
    background-color: rgba(0, 168, 107, 0.1) !important;
    border-color: var(--success-dark) !important;
    color: var(--success-dark) !important;
}

/* Logo constraint for search results */
.logo-constrained {
    max-width: 100px;
    object-fit: contain;
}

/* Search tabs styling */
#searchTabs .nav-link:not(.active) {
    border: 1px solid rgba(0, 123, 255, 0.3);
    border-radius: 0.25rem;
}

/* Compact table padding */
.table-compact td,
.table-compact th {
	padding: 0.25rem !important;
}

/* Reduce horizontal padding only for tables */
.table-condensed-x td,
.table-condensed-x th {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}

/* Notebook-style tabs */
.notebook-tabs {
	display: flex;
	border-bottom: 2px solid #ddd;
	margin-bottom: 0;
	margin-top: 1rem;
}

.notebook-tabs .nav-item {
	margin: 0;
}

.notebook-tabs .nav-link {
	border: none;
	border-radius: 5px 5px 0 0;
	padding: 10px 20px 5px 20px;
	margin-bottom: 3px;
	margin-right: 2px;
	transition: all 0.2s ease;
	box-shadow: 2px 0 0 0 white;
	opacity: 0.7;
}

.notebook-tabs .nav-link.active {
	padding-top: 40px;
	margin-top: -30px;
	margin-bottom: -2px;
	text-decoration: underline;
	opacity: 1;
	box-shadow: 2px 0 0 0 white, 0 -3px 8px rgba(0, 0, 0, 0.2);
}

.notebook-tab-danger {
	background-color: #FF4961;
}

.notebook-tab-info {
	background-color: #17A2B8;
}

.notebook-tab-warning {
	background-color: #FDB901;
}

.notebook-tab-orange {
	background-color: #FD7E14;
}

.notebook-tab-success {
	background-color: #00a86b;
}

.notebook-tab-primary {
	background-color: #6967ce;
}

.notebook-tab-secondary {
	background-color: #4682b4;
}

/* Label boxes for personal and club labels */
.label-box {
	border-right: 1px solid #ddd;
	padding: 4px 8px;
	margin-right: 10px;
	margin-bottom: 6px;
	display: inline-block;
}

.label-context-name {
	font-size: 0.7rem;
	color: #888;
	margin-bottom: 2px;
	font-weight: 400;
	white-space: nowrap;
}

/* Margin utility classes */
.ml-50 {
	margin-left: 0.5rem !important;
}

.mr-50 {
	margin-right: 0.5rem !important;
}

/* DataTables bottom layout */
.dataTables_info {
	display: inline-block !important;
	margin-right: 0.5rem !important;
}

.dataTables_length {
	display: inline-block !important;
}

.dataTables_length label {
	margin-bottom: 0 !important;
}

.dataTables_paginate {
	text-align: left !important;
	margin-top: 0 !important;
}

/* Key Metrics Offcanvas Panel */
.key-metrics-offcanvas {
	position: fixed;
	top: 0;
	height: 100vh;
	background: white;
	box-shadow: -2px 0 10px rgba(0,0,0,0.1);
	transition: right 0.3s ease;
	z-index: 1050;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.key-metrics-offcanvas-header {
	padding: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: start;
	border-bottom: 1px solid #ddd;
}

.key-metrics-offcanvas-header.bg-primary-light {
	background-color: rgba(115, 103, 240, 0.15);
}

.key-metrics-offcanvas-header h4 {
	margin: 0;
}

.key-metrics-offcanvas-header p.small {
	color: #6c757d;
	margin-top: 3px;
}

.key-metrics-offcanvas-body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}


/* Responsive adjustments for Key Metrics panel */
@media (max-width: 576px) {
	.key-metrics-offcanvas {
		width: 100%;
		max-width: 400px;
		right: -400px;
	}

	/* Ensure period selector buttons don't shrink too small on mobile */
	.key-metrics-offcanvas-body .horizontal-scroll-container,
	.key-metrics-offcanvas-body .year-selector-scroll {
		position: relative;
	}

	.key-metrics-offcanvas-body .horizontal-scroll-container .btn-group,
	.key-metrics-offcanvas-body .year-selector-scroll .btn-group {
		flex-wrap: nowrap;
	}

	.key-metrics-offcanvas-body .horizontal-scroll-container .btn,
	.key-metrics-offcanvas-body .year-selector-scroll .btn {
		min-width: 60px;
		white-space: nowrap;
		flex-shrink: 0;
		padding: 0.375rem 0.5rem;
	}

	/* Subtle fade effect on right edge to indicate scrollability */
	.key-metrics-offcanvas-body .horizontal-scroll-container::after,
	.key-metrics-offcanvas-body .year-selector-scroll::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 30px;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
		pointer-events: none;
		z-index: 1;
	}

	/* Asset Database label tabs horizontal scrolling */
	.horizontal-scroll-container .notebook-tabs {
		display: inline-flex;
		min-width: 100%;
	}

	.horizontal-scroll-container .notebook-tabs .nav-item {
		flex-shrink: 0;
	}

	.horizontal-scroll-container .notebook-tabs .nav-link {
		white-space: nowrap;
		min-width: fit-content;
	}

	/* Filter buttons horizontal scrolling */
	.dataTables_source_filter .horizontal-scroll-container {
		max-width: calc(100vw - 40px);
		display: inline-block;
	}

	.dataTables_source_filter .horizontal-scroll-container .btn {
		white-space: nowrap;
		margin-right: 4px;
	}
}

/* Keep tabs on single line with horizontal scroll if needed */
.tab-no-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tab-no-wrap .nav-link {
	display: flex;
	align-items: center;
	white-space: nowrap;
	min-height: 40px;
}

/* SU badge - Black for superuser-only elements */
.badge-su {
	background-color: #000000 !important;
	color: #fff !important;
}

.badge-su::before {
	content: "* ";
}

.badge-su::after {
	content: " *";
}


/* Round type badge in transaction table */
.badge-round-type {
	background-color: #7367f0;
	color: #fff;
	font-size: 0.75rem;
}

/* DataTables source filter alignment */
.dataTables_source_filter {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

/* Chart container height utilities */
.chart-h-400 {
	max-height: 500px;
}

/* Menu nesting visibility improvements - subtle indentation increase */
.main-menu .navigation > li > ul.menu-content > li > ul.menu-content {
	padding-left: 0.3rem;
}

.main-menu .navigation > li > ul.menu-content > li > ul.menu-content > li > ul.menu-content {
	padding-left: 0.5rem;
}

.main-menu .navigation > li > ul.menu-content > li > ul.menu-content > li > ul.menu-content > li > ul.menu-content {
	padding-left: 0.7rem;
}

/* Lighten DataTables borders to match original Bootstrap styling */
#portfolio-assets-datatable.dataTable tbody th,
#portfolio-assets-datatable.dataTable tbody td {
	border-top: 1px solid #dee2e6 !important;
}

#portfolio-assets-datatable.dataTable thead th {
	border-bottom: 2px solid #dee2e6 !important;
}

/* Market Data Cards - Clickable interaction */
.market-card-clickable {
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.market-card-clickable:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-color: #7367F0 !important;
}

.market-card-clickable.market-card-active {
	border-color: #7367F0 !important;
	border-width: 2px !important;
	box-shadow: 0 4px 16px rgba(115, 103, 240, 0.3);
}

.market-card-clickable.market-card-active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #7367F0;
}

/* Intraday Chart Section */
#intraday-chart-section {
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#intraday-chart-section .close {
	font-size: 1.5rem;
	font-weight: 300;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

#intraday-chart-section .close:hover {
	opacity: 1;
}

/* Data Update Flash Animation */
.data-updated {
	animation: flashUpdate 1s ease-out;
}

@keyframes flashUpdate {
	0% {
		background-color: rgba(115, 103, 240, 0.3);
		transform: scale(1);
	}
	50% {
		background-color: rgba(115, 103, 240, 0.15);
		transform: scale(1.01);
	}
	100% {
		background-color: transparent;
		transform: scale(1);
	}
}

/* Market Status Indicator - Pulsing Dot */
.market-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #7367F0;
	margin-right: 6px;
	animation: marketPulse 2s ease-in-out infinite;
	vertical-align: middle;
}

/* Keep asset name and status dot on same line */
#portfolio-assets-table td:first-child {
	white-space: nowrap;
}

/* Portfolio table mobile styling */
@media (max-width: 767px) {
	/* Reduce padding only on table data cells, leave headers alone for DataTables sorting */
	.portfolio-table-mobile td {
		padding: 0.3rem 0.5rem;
	}

	/* Remove horizontal padding from card body on mobile (px-0) */
	.portfolio-card-body {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Add back some padding to first column for spacing */
	.portfolio-table-mobile td:first-child {
		padding-left: 0.75rem;
	}
}

@keyframes marketPulse {
	0%, 100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}

/* Portfolio Table Row Expansion for Charts */
#portfolio-assets-datatable tbody tr {
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#portfolio-assets-datatable tbody tr:hover {
	background-color: rgba(115, 103, 240, 0.05);
}

#portfolio-assets-datatable tbody tr.row-expanded {
	background-color: rgba(115, 103, 240, 0.1);
	font-weight: 600;
}

/* DataTables child row styling */
#portfolio-assets-datatable tbody tr.child {
	background-color: #f8f9fa;
}

#portfolio-assets-datatable tbody tr.child td {
	padding: 1rem !important;
	border-top: none !important;
}

#portfolio-assets-datatable tbody tr.child:hover {
	background-color: #f8f9fa !important;
	cursor: default;
}

/* Chart container within child row */
.chart-container {
	animation: slideDown 0.3s ease-out;
	max-width: 100%;
}

/* Close button in chart container */
.chart-container .chart-close-btn {
	font-size: 1.5rem;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.chart-container .chart-close-btn:hover {
	opacity: 1;
}

/* Compact period buttons for portfolio rows */
.chart-container .btn-group-sm .btn {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

/* Mobile: Chart in expanded row */
@media (max-width: 768px) {
	#portfolio-assets-datatable tbody tr.child td {
		padding: 0.5rem !important;
	}

	.chart-container canvas {
		max-height: 250px !important;
	}

	.chart-container .btn-group {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	/* Portfolio Timeline: Remove top padding on mobile */
	#portfolio-timeline-card .card-body {
		padding-top: 0;
	}

	/* Portfolio Strategy Badge: Smaller font and text wrapping on mobile */
	.portfolio-strategy-badge {
		font-size: 0.9rem !important;
	}

	/* Reduce h1 content header title size on mobile */
	h1.content-header-title {
		font-size: 1.75rem;
	}
}

/* Portfolio Strategy Badge: Allow text wrapping */
.portfolio-strategy-badge {
	white-space: normal;
	max-width: 100%;
	display: inline-block;
}

/* Allow scrolling past floating buttons in left navigation */
.main-menu-content {
	padding-bottom: 130px !important;
}

/* Dividend forecast table button cell - prevent wrapping */
#shareholder-returns-tab-table td:last-child {
	white-space: nowrap;
}

/* Badge positioned at top-right corner of card */
.badge-top-right {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	border-radius: 0 0.25rem 0 0.5rem;
	z-index: 10;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

/* Add top padding to card body when badge is present */
.card.position-relative .card-body {
	padding-top: 2.5rem;
}

/* Source Document Modal */
#source-document-modal {
	z-index: 10000;
}
#source-document-modal .modal-dialog {
	max-width: 860px;
}
#source-document-modal .modal-content {
	border: none;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}
.source-doc-toolbar {
	padding: 12px 15px;
	border-bottom: none;
	background-color: rgba(105, 103, 206, 0.8);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.source-doc-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.source-doc-zoom-btn {
	background: none;
	border: none;
	outline: none;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.1rem;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	display: flex;
	align-items: center;
	user-select: none;
}
.source-doc-zoom-btn:hover {
	color: #fff;
}
.source-doc-zoom-btn:focus {
	outline: none;
}
.source-doc-toolbar h4 {
	color: #fff;
}
.source-doc-toolbar .close {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: none;
	opacity: 1;
}
.source-doc-toolbar .close:hover {
	color: #fff;
}
.source-doc-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.source-doc-page-info {
	font-size: 0.85rem;
	color: #6c757d;
	min-width: 50px;
	text-align: center;
}
.source-doc-nav-btn {
	background: none;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	color: #495057;
}
.source-doc-nav-btn:hover {
	background: #f8f9fa;
}
.source-doc-viewport {
	overflow: auto;
	max-height: 75vh;
	background: #fff;
	padding: 16px;
	text-align: center;
}
.source-doc-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	width: 100%;
}
#source-doc-canvas {
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	display: block;
	margin: 0 auto;
}


/* Note list table */
#note-list-table thead th,
#note-list-table tfoot th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6e6b7b;
	background: #f8f7ff;
	border-bottom: 2px solid #e9ecef;
}
#note-list-table .note-row {
	cursor: default;
}
#note-list-table .note-row.is-hovered,
#note-list-table .note-content-row.is-hovered {
	background: #f8f7ff !important;
}
#note-list-table .note-row.is-expanded td:first-child {
	border-left: 3px solid #7367f0;
}
.note-desc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	color: #5e5873;
}
.note-desc-trigger:hover {
	color: #7367f0;
}
.note-chevron {
	font-size: 0.8rem;
	color: #b0b0b0;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.note-chevron-open {
	transform: rotate(180deg);
	color: #7367f0;
}
.note-content-row {
	display: none;
	background: #fff;
}
.note-content-cell {
	padding: 0 !important;
	border-top: none !important;
	border-bottom: 2px solid #e9ecef !important;
}
.note-content-inner {
	padding: 1.25rem 1.5rem 1rem 1.5rem;
	border-left: 3px solid #7367f0;
}
.note-content-footer {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e9ecef;
	text-align: right;
}

/* ============================================================
   Service Cost Offcanvas
   ============================================================ */

.costs-stat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.costs-stat {
    flex: 1 1 33%;
    padding: 12px 15px;
    border-right: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.costs-stat:nth-child(3n) {
    border-right: none;
}

.costs-stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.costs-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #343a40;
}

.costs-section-block {
    border-bottom: 1px solid #e9ecef;
    padding: 12px 15px;
}

.costs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}

.costs-subsection-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin: 8px 0 4px;
}

.costs-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.9rem;
    gap: 8px;
}

.costs-row:last-child {
    border-bottom: none;
}

.costs-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #495057;
}

.costs-row-meta {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.82rem;
    white-space: nowrap;
}

.costs-row-value {
    flex-shrink: 0;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

/* ============================================================
   Conversations Offcanvas
   ============================================================ */
.conversations-offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px;
}

.conv-message {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    max-width: 85%;
}

.conv-message.user {
    align-self: flex-end;
    align-items: flex-end;
}

.conv-message.assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.conv-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-x: auto;
}

.conv-message.assistant .conv-bubble table {
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 100%;
}

.conv-message.assistant .conv-bubble th,
.conv-message.assistant .conv-bubble td {
    border: 1px solid #dee2e6;
    padding: 4px 8px;
    text-align: left;
    word-break: normal;
}

.conv-message.assistant .conv-bubble th {
    background: #f8f9fa;
    font-weight: 600;
}

.conv-message.assistant .conv-bubble .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
}

.conv-message.user .conv-bubble {
    background-color: #6f42c1;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.conv-message.assistant .conv-bubble {
    background-color: #f1f3f5;
    color: #343a40;
    border-bottom-left-radius: 4px;
}

.conv-meta {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-top: 3px;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.conv-message:hover .conv-meta {
    color: #212529;
}

.note-date-input {
    width: 150px !important;
    flex-shrink: 0;
}

.conv-date-divider {
    text-align: center;
    font-size: 0.7rem;
    color: #adb5bd;
    margin: 16px 0 8px;
    position: relative;
}

.conv-date-divider::before,
.conv-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background-color: #dee2e6;
}

.conv-date-divider::before { left: 0; }
.conv-date-divider::after { right: 0; }

.conv-empty {
    text-align: center;
    color: #adb5bd;
    padding: 48px 16px;
    font-size: 0.9rem;
}

/* ── Visibility Panel ──────────────────────────────────────── */

.vis-pill {
    cursor: pointer;
    margin: 0 4px 4px 0;
    display: inline-block;
}

.vis-pill input[type="checkbox"] {
    display: none;
}

.vis-pill-label {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid #b8c2cc;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

.vis-pill input[type="checkbox"]:checked + .vis-pill-label {
    background: #5a8dee;
    border-color: #5a8dee;
    color: #fff;
}

.vis-pill:hover .vis-pill-label {
    border-color: #5a8dee;
}

.vis-pill-overflow {
    display: none;
}

/* ============================================================
   Model Schema (trackr)
   ============================================================ */

.app-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	cursor: pointer;
	border: 1px solid #dee2e6;
	background: #f8f9fa;
	color: #495057;
	transition: all 0.15s;
	user-select: none;
}
.app-pill.selected {
	background: #6967ce;
	border-color: #6967ce;
	color: #fff;
}
.app-pill:hover:not(.selected) {
	background: #e9ecef;
}
.schema-diagram-wrapper {
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	padding: 24px;
	overflow: auto;
	min-height: 400px;
}
.schema-diagram-wrapper .mermaid {
	display: flex;
	justify-content: center;
}

.pf-data-textarea {
	width: 100%;
	border: 1px solid #ddd;
	padding: 8px;
	resize: vertical;
}

.td-filename {
	max-width: 300px;
}


.td-asset {
	max-width: 200px;
}

/* ── Rounds Panel ─────────────────────────────────────────── */

.round-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-left: 12px;
	border-left: 3px solid #26a69a;
	padding-top: 4px;
	padding-bottom: 4px;
}

.round-icon {
	display: flex;
	align-items: center;
	padding-right: 12px;
	font-size: 2.5rem;
	flex-shrink: 0;
	align-self: flex-end;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.round-main {
	flex: 1;
	min-width: 0;
}

.round-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 1rem;
}

.round-date {
	color: #6c757d;
	margin-right: 4px;
}

.round-description-actions {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.round-description-row {
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	flex: 1;
	padding: 6px 10px;
}

.round-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.round-fig {
	font-size: 1rem;
}

.round-fig-label {
	color: #6c757d;
	margin-right: 3px;
}

.edit-round-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #7367f0;
	border-radius: 4px;
	line-height: 1;
	display: flex;
	align-items: center;
	font-size: 1.1rem;
}

.edit-round-btn:hover {
	background-color: #7367f0;
	color: #fff;
}

.round-divider {
	margin: 10px 0;
	border: 0;
	border-top: 1px solid #e0e0e0;
}

.round-inline-form {
	padding: 4px 0;
}

.rounds-empty-icon {
	font-size: 2rem;
	color: #26a69a;
	opacity: 0.4;
}

.text-teal {
	color: #26a69a !important;
}

/* "All KPIs" table (kpi_core/all_kpis.html) — DataTables search box, left-aligned and
   wider. The init lays the filter out full-width (dom); this left-aligns + widens it.
   Scoped to THIS table's filter only (#all-kpis-table_filter). */
#all-kpis-table_filter {
	text-align: left;
}

#all-kpis-table_filter input {
	width: 320px;
	margin-left: 0;
}

/* Remove the up/down STEP arrows a browser renders inside <input type="number"> (the ones
   that bump the value by `step` on each click). Add class `no-step-arrows` to the input —
   used on the KPI value field, where clicking ±0.01 makes no sense. */
input.no-step-arrows::-webkit-outer-spin-button,
input.no-step-arrows::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input.no-step-arrows[type="number"] {
	-moz-appearance: textfield;
}

/* Soft-deleted KpiData rows on the all_kpis table: still shown, but dimmed and struck
   through so they read as deleted. The checkbox (first) and Actions (last) columns keep
   their normal decoration so Restore stays easy to click. */
tr.kpi-row-deleted td {
	opacity: 0.6;
}
tr.kpi-row-deleted td:not(:first-child):not(:last-child) {
	text-decoration: line-through;
}