.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 flash {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Flashing element animation */
.flashing {
	animation: flash 1s 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;
}
.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;
}

/* 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: 33%;  /* Position at 33% 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;
}

/* Hover effect just changes opacity slightly */
.floating-button:hover {
    opacity: 0.9;
}

/* 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 10px !important;
}

.width-toggle-btn i {
    font-size: 1.4rem !important;
    color: #343a40 !important;
    font-weight: 900 !important;
}

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

.floating-buttons-container.slim .width-toggle-btn {
    padding: 0 5px 0 2px !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,
.transactions-offcanvas,
.captable-offcanvas,
.participations-offcanvas,
.shareholder-returns-offcanvas,
.key-metrics-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;
}

/* 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 {
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: 3px solid #17a2b8;
}

.file-item {
    margin-bottom: 12px;
}

.note-header,
.file-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.note-date,
.file-date {
    color: #6c757d;
}

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

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

.note-description,
.file-description {
    font-weight: 600;
    padding: 5px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 8px 10px;
    border-radius: 4px;
}

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

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

/* Make all headings in note content bold */
.note-content h1,
.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6 {
    font-weight: 700 !important; /* Use !important to override any other styles */
}

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

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

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

.file-divider {
    margin: 10px 0;
    border-color: #eee;
}

/* 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,
.transactions-offcanvas.active,
.captable-offcanvas.active,
.participations-offcanvas.active,
.shareholder-returns-offcanvas.active,
.key-metrics-offcanvas.active {
    right: 0;
}

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

.comments-offcanvas-header h4,
.strategies-offcanvas-header h4,
.notes-offcanvas-header h4,
.files-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-offcanvas-header p.small,
.files-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,
.transactions-offcanvas-body,
.captable-offcanvas-body,
.participations-offcanvas-body,
.shareholder-returns-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.comments-backdrop,
.strategies-backdrop,
.notes-backdrop,
.files-backdrop,
.transactions-backdrop,
.captable-backdrop,
.participations-backdrop,
.shareholder-returns-backdrop,
.key-metrics-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1045;
    display: none;
}

.comments-backdrop.active,
.strategies-backdrop.active,
.notes-backdrop.active,
.files-backdrop.active,
.transactions-backdrop.active,
.captable-backdrop.active,
.participations-backdrop.active,
.shareholder-returns-backdrop.active,
.key-metrics-backdrop.active {
    display: block;
}

body.comments-open,
body.strategies-open,
body.notes-open,
body.files-open,
body.transactions-open,
body.captable-open,
body.participations-open,
body.shareholder-returns-open,
body.key-metrics-open {
    overflow: hidden;
}

/* 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;
}

.strategies-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1045;
    display: none;
}

.strategies-backdrop.active {
    display: block;
}

body.strategies-open {
    overflow: hidden;
}

/* 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;
    }
    
    #comments-count,
    #notes-count {
        font-size: 0.7rem;
        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;
}

/* Ensure all navbar dropdowns appear above other elements */
.header-navbar .dropdown-menu {
    z-index: 9999 !important; /* Much higher z-index to ensure it's above all other elements */
}

/* Ensure the dropdown has proper layering in the DOM */
.header-navbar .dropdown {
    position: relative;
    z-index: 9999;
}

/* 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);
}

/* 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-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;
}

.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;
}

.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: 9999;
    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;
}

.key-metrics-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 1040;
}

.key-metrics-backdrop.active {
	opacity: 1;
	visibility: visible;
}

body.metrics-open {
	overflow: hidden;
}

/* 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: " *";
}

/* 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;
}