/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-BasicBg);
    color: var(--color-PrimaryText);
    line-height: 1.5;
}

/* Theme variables */
:root {
    --color-red: #F6465D;
    --color-redHover: #FF707E;
    --color-redAlpha01: rgba(246, 70, 93, 0.1);
    --color-green: #0ECB81;
    --color-greenHover: #32D693;
    --color-greenAlpha01: rgba(14, 203, 129, 0.1);
    --color-blue: #00A1FF;
    --color-blueHover: #4ABBFF;
    --color-blueAlpha01: rgba(0, 161, 255, 0.1);
    --color-yellow: #F0B90B;
    --color-yellowHover: #F8D12F;
    --color-yellowAlpha01: rgba(240, 185, 11, 0.1);
    --color-orange: #FF6B35;
    --color-orangeHover: #FF8A5C;
    --color-orangeAlpha01: rgba(255, 107, 53, 0.1);
    --color-teal: #00D4AA;
    --color-tealHover: #33DDBB;
    --color-tealAlpha01: rgba(0, 212, 170, 0.1);
    --color-purple: #8B5CF6;
    --color-purpleHover: #A78BFA;
    --color-purpleAlpha01: rgba(139, 92, 246, 0.1);
    --color-pink: #EC4899;
    --color-pinkHover: #F472B6;
    --color-pinkAlpha01: rgba(236, 72, 153, 0.1);
    --color-cyan: #06B6D4;
    --color-cyanHover: #22D3EE;
    --color-cyanAlpha01: rgba(6, 182, 212, 0.1);
    
    --color-sell: var(--color-red);
    --color-textSell: var(--color-red);
    --color-sellHover: var(--color-redHover);
    --color-depthSellBg: #35141D;
    --color-buy: var(--color-green);
    --color-textBuy: var(--color-green);
    --color-buyHover: var(--color-greenHover);
    --color-depthBuyBg: #0A2A1D;
    
    --color-PrimaryText: #EAECEF;
    --color-SecondaryText: #B7BDC6;
    --color-TertiaryText: #848E9C;
    --color-QuaternaryText: #474D57;
    --color-BasicBg: #181A20; /* previous:#0A0A0A */
    --color-bg1: #1E2026;
    --color-bg2: #2B2F36;
    --color-bg3: #363A45;
    --color-bg4: #474D57;
    --color-bg5: #848E9C;
    --color-bg6: #B7BDC6;
    --color-bg7: #EAECEF;
    --color-bg8: #FFFFFF;
    --color-TextLink: var(--color-blue);
    --color-TextLinkHover: var(--color-blueHover);
    --color-border1: #2B2F36;
    --color-border2: #363A45;
    --color-border3: #474D57;
    --color-border4: #848E9C;
    --color-border5: #B7BDC6;
    --color-border6: #EAECEF;
    --color-border7: #FFFFFF;
    --color-black: #000000;
    --color-blackAlpha15: rgba(0, 0, 0, 0.15);
    --color-blackAlpha30: rgba(0, 0, 0, 0.3);
    --color-blackAlpha80: rgba(0, 0, 0, 0.8);
    --color-whiteAlpha04: rgba(255, 255, 255, 0.04);
}

/* Layout utilities */
.bn-flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.w-full {
    width: 100%;
}

.w-max {
    width: max-content;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

/* Spacing utilities */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }

.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-6 { margin: 24px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* Typography */
.t-headline1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.t-headline2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.t-headline3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.t-headline4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.t-headline5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.t-subtitle1 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.t-subtitle2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.t-body1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.t-body2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.t-body3 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

/* Color utilities */
.text-PrimaryText { color: var(--color-PrimaryText); }
.text-SecondaryText { color: var(--color-SecondaryText); }
.text-TertiaryText { color: var(--color-TertiaryText); }
.text-QuaternaryText { color: var(--color-QuaternaryText); }
.text-TextLink { color: var(--color-TextLink); }
.text-buy { color: var(--color-buy) !important; }
.text-sell { color: var(--color-sell) !important; }

/* Background utilities */
.bg-bg1 { background-color: var(--color-bg1); }
.bg-bg2 { background-color: var(--color-bg2); }
.bg-bg3 { background-color: var(--color-bg3); }

/* Border utilities */
.border {
    border: 1px solid var(--color-border1);
}

.border-b {
    border-bottom: 1px solid var(--color-border1);
}

.rounded {
    border-radius: 8px;
}

.rounded-lg {
    border-radius: 12px;
}

.rounded-full {
    border-radius: 50%;
}

/* Interactive elements */
.cursor-pointer {
    cursor: pointer;
}

.hover\:text-PrimaryText:hover {
    color: var(--color-PrimaryText);
}

.hover\:text-TextLink:hover {
    color: var(--color-TextLink);
}

/* Header */
.header {
    background-color: transparent;
    padding: 16px 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header Logo */
.header-logo {
    height: 48px;
    width: auto;
}

/* Header Menu Items */
.header-menu-item {
    position: relative;
}

.header-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--color-SecondaryText);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.header-menu-button:hover {
    color: var(--color-PrimaryText);
    background-color: var(--color-bg2);
}

.header-menu-button svg {
    width: 20px;
    height: 20px;
}

/* Setting Button - Reusable button style for settings, edit, and similar actions */
.setting-btn {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-TertiaryText);
    display: flex;
    align-items: center;
    justify-content: center;
}

.setting-btn:hover {
    background: var(--color-bg2);
    color: var(--color-TextLink);
    transform: translateY(-1px);
}

.setting-btn svg {
    width: 16px;
    height: 16px;
}

/* Header Dropdown Menu */
.header-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 8px;
    min-width: 160px;
    max-width: calc(100vw - 24px);
    padding: 8px 0;
    box-shadow: 0 4px 12px var(--color-blackAlpha15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.header-menu-item:hover .header-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-dropdown-menu .dropdown-item {
    padding: 10px 16px;
    color: var(--color-SecondaryText);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.header-dropdown-menu .dropdown-item:hover {
    background-color: var(--color-bg2);
    color: var(--color-PrimaryText);
}

/* Loader Styles */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-blackAlpha80);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.loader-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border2);
    border-top: 3px solid var(--color-TextLink);
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--color-PrimaryText);
}

.loader-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-SecondaryText);
}

@keyframes loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer */
.footer {
    background-color: transparent;
    padding: 24px 0 72px 0;
    margin-top: 48px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    border-top: 1px solid var(--color-border1);
    padding-top: 24px;
}

.footer-text {
    color: var(--color-SecondaryText);
    font-size: 14px;
    margin: 0;
    opacity: 0.5;
}

/* Main content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background-color: var(--color-BasicBg);
}

/* Main content with hero (no padding) */
.main-content.hero-page {
    padding: 10px 0 0 0;
    background: transparent;
}

/* Card component */
.card {
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 12px;
    padding: 24px;
}

/* Badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.badge-primary {
    background-color: var(--color-blueAlpha01);
    color: var(--color-blue);
}

.badge-secondary {
    background-color: var(--color-bg3);
    color: var(--color-PrimaryText);
}

.badge-success {
    background-color: var(--color-greenAlpha01);
    color: var(--color-green);
}

.badge-warning {
    background-color: var(--color-yellowAlpha01);
    color: var(--color-yellow);
}

.badge-danger {
    background-color: var(--color-redAlpha01);
    color: var(--color-red);
}

.badge-info {
    background-color: var(--color-purpleAlpha01);
    color: var(--color-purple);
}

.badge-other {
    background-color: var(--color-cyanAlpha01);
    color: var(--color-cyan);
}

.badge-owner {
    background-color: var(--color-orangeAlpha01);
    color: var(--color-orange);
}

.badge-member {
    background-color: var(--color-yellowAlpha01);
    color: var(--color-yellow);
}


/* Asset icon */
.asset-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-bg2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-PrimaryText);
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}



/* Bold benchmark values in performance cards */
.stats-grid .benchmark-value .t-body3 {
    font-weight: 600;
}

.stat-item {
    background-color: var(--color-bg2);
    border-radius: 8px;
    padding: 16px;
}

/* Performance chart placeholder */
.chart-placeholder {
    background-color: var(--color-bg2);
    border-radius: 8px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-TertiaryText);
    width: 100%;
    min-width: 0;
}

/* Chart content container */
.chart-content {
    width: 100%;
    min-width: 0;
}

/* Chart card (the card containing the chart) */
.table-chart .card {
    flex: 1 1 0;
    min-width: 0;
}

/* Table and chart layout */
.table-chart {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
}

/* Statistics card */
.stats-card {
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 12px;
    padding: 24px;
    flex: 0 0 38.2%;
    min-width: 280px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border1);
}

.stat-row .stat-value {
    min-width: 80px;
    text-align: right;
}

.stat-values {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 120px;
    justify-content: flex-end;
    flex: 1 1 auto; /* take remaining row space so values can right-align */
}

.benchmark-stat-value {
    color: var(--color-TertiaryText);
    font-size: 14px;
    font-weight: 500;
    min-width: 60px;
    text-align: right;
}


/* Stats table styles */
.stats-table-container {
    overflow-x: auto;
    border: 1px solid var(--color-border1);
    border-radius: 8px;
    background: var(--color-bg1);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1100px; /* Ensure horizontal scroll for 16 columns */
}

.stats-table th {
    background: var(--color-bg2);
    color: var(--color-SecondaryText);
    font-weight: 600;
    text-align: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--color-border1);
    border-right: 1px solid var(--color-border1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.stats-table th:last-child {
    border-right: none;
}

/* PNL table styling - reuses stats table header styling */
.pnl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pnl-table th {
    background: var(--color-bg2);
    color: var(--color-SecondaryText);
    font-weight: 600;
    padding: 8px 6px;
    border-bottom: 1px solid var(--color-border1);
    border-right: 1px solid var(--color-border1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pnl-table th:last-child {
    border-right: none;
}

.pnl-table th.asset-column {
    text-align: left;
}

.pnl-table th.numeric-column {
    text-align: right;
}

.pnl-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border1);
    border-right: 1px solid var(--color-border1);
    color: var(--color-PrimaryText);
    font-size: 12px;
    white-space: nowrap;
}

/* Ensure consistent color classes work properly */
.pnl-table td.text-buy {
    color: var(--color-buy) !important;
}

.pnl-table td.text-sell {
    color: var(--color-sell) !important;
}

.pnl-table td:last-child {
    border-right: none;
}

.pnl-table tbody tr:hover {
    background: var(--color-bg2);
}

.pnl-table tbody tr:last-child td {
    border-bottom: none;
}

.pnl-table td.asset-cell {
    text-align: left;
}

.pnl-table td.numeric-cell {
    text-align: right;
}

.pnl-table td.total-cell {
    font-weight: 600;
}

.pnl-table tbody tr.total-row {
    border-bottom: 1px solid var(--color-border2);
    background-color: var(--color-bg2);
}

.stats-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border1);
    border-right: 1px solid var(--color-border1);
    color: var(--color-PrimaryText);
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
}

.stats-table td:last-child {
    border-right: none;
}

.stats-table tbody tr:hover {
    background: var(--color-bg2);
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

/* Year column - left aligned and sticky */
.year-column {
    text-align: center !important;
    min-width: 45px;
    width: 45px;
    position: sticky;
    left: 0;
    background: var(--color-bg2) !important;
    z-index: 2;
}

.stats-table tbody td.year-cell {
    font-weight: 600;
    color: var(--color-PrimaryText);
    background: var(--color-bg1) !important;
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Month columns */
.month-column {
    min-width: 45px;
    width: 45px;
}

/* Stat columns - slightly wider */
.stat-column {
    min-width: 45px;
    width: 45px;
}


.error-cell {
    text-align: center;
    color: var(--color-TertiaryText);
    font-style: italic;
}

/* Error message styles */
.error-message {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.error-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.error-icon {
    width: 20px;
    height: 20px;
    color: #dc3545;
    flex-shrink: 0;
}

.error-text {
    color: #dc3545;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Holdings styles */
.holdings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.holdings-list {
    display: grid;
    grid-template-columns: 1fr; /* default to single column to prevent squeezing */
    gap: 16px;
}

.holding-card {
    background-color: var(--color-bg2);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--color-border1);
}

.holding-row {
    background-color: var(--color-bg2);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--color-border1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0; /* allow children to shrink/wrap */
    transition: all 0.2s ease;
}

.holding-row:hover {
    background-color: var(--color-bg3);
    border-color: var(--color-border2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Holdings cards always in single column for optimal readability */

/* Events cards use same layout as holdings (single column) */
#eventsContent .holdings-list {
    grid-template-columns: 1fr;
}

/* Tail cards allow maximum 2 columns */
#tailContent .holdings-list {
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    #tailContent .holdings-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.holding-row-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0; /* enable text wrapping in nested columns */
}

.holding-row-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap; /* prevent overflow on narrow cards */
    min-width: 0;
}

.holding-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Asset card text wrapping - prevent overflow on assetscreen */
.holding-row-left {
    min-width: 0; /* Allow flex item to shrink */
}

.holding-row-info {
    min-width: 0; /* Allow text to wrap inside flex container */
    overflow: hidden; /* Prevent horizontal overflow */
}

.holding-row-info .name-text,
.holding-row-info .ticker-text {
    overflow-wrap: anywhere; /* Modern wrap for long tokens */
    word-break: break-word;  /* Fallback */
    max-width: 100%;
    line-height: 1.2;
}

.holding-row-info .name-text {
    font-weight: 600;
}

.holding-row-info .ticker-text {
    color: var(--color-TertiaryText);
}

/* Ensure instrument name and ticker wrap within cards on assetscreen */
.name-ticker-row {
    flex-wrap: wrap;
}

.name-ticker-row .name-text,
.name-ticker-row .ticker-text {
    white-space: normal !important; /* override page-level nowrap */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Ensure badges and returns never overflow within cards */
.asset-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.returns-section {
    display: flex;
    flex-wrap: wrap; /* allow labels/values to wrap on small screens */
    gap: 8px 16px; /* row gap, column gap */
    min-width: 0;
}

.returns-section > div {
    display: flex;
    gap: 8px; /* reduced from 12px to bring returns closer */
    min-width: 0;
}

/* Ensure returns spread evenly when wrapped to next row */
@media (max-width: 768px) {
    .returns-section > div {
        gap: 6px !important; /* even tighter on small screens - override inline styles */
        justify-content: space-between !important; /* spread evenly across available width */
        width: 100% !important; /* take full width when wrapped */
    }
    
    .returns-section > div > span {
        flex: 1 !important; /* each return takes equal space */
        text-align: center !important; /* center text within each space */
    }
}

/* Override inline gap styles for returns on all screen sizes */
.returns-section > div[style*="gap: 2.5rem"] {
    gap: 8px !important; /* reduce gap from 2.5rem to 8px on standard screens */
}

@media (max-width: 768px) {
    .returns-section > div[style*="gap: 2.5rem"] {
        gap: 6px !important; /* even tighter on small screens */
    }
}

/* Responsive padding and margin reduction for small screens */
@media (max-width: 768px) {
    .holding-row {
        padding: 12px; /* reduced from 16px */
        gap: 8px; /* reduced from 12px */
    }
    
    .holding-row-left {
        gap: 12px; /* reduced from 16px */
    }
    
    .holding-row-right {
        gap: 16px; /* reduced from 24px */
    }
    
    .holding-row-info {
        gap: 2px; /* reduced from 4px */
    }
    
    .asset-badges {
        gap: 6px; /* reduced from 8px */
        margin-top: 0.25rem; /* reduced from 0.5rem */
    }
    
    .returns-section {
        gap: 6px 12px; /* reduced from 8px 16px */
    }
    
    .returns-section > div {
        gap: 8px; /* reduced from 12px */
    }
}

@media (max-width: 480px) {
    .holding-row {
        padding: 8px; /* further reduced */
        gap: 6px;
    }
    
    .holding-row-left {
        gap: 8px;
    }
    
    .holding-row-right {
        gap: 12px;
    }
    
    .holding-row-info {
        gap: 1px;
    }
    
    .asset-badges {
        gap: 4px;
        margin-top: 0.15rem;
    }
    
    .returns-section {
        gap: 4px 8px;
    }
    
    .returns-section > div {
        gap: 6px;
    }
}

.holding-metric {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.holding-metric-label {
    min-width: 40px;
    text-align: right;
}

.holding-metric-value {
    text-align: right;
    min-width: 60px;
}

.holding-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-bg3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-PrimaryText);
}

/* Tab styles */
.tab-container {
    display: flex;
    gap: 0;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.tab-button {
    background: none;
    border: none;
    padding: 12px 16px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-TertiaryText);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tab-button:hover {
    color: var(--color-PrimaryText);
}

.tab-button.active {
    background-color: transparent;
    color: var(--color-PrimaryText);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: var(--color-TextLink);
}

.table-content {
    transition: opacity 0.2s ease;
}

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

.stat-label {
    color: var(--color-TertiaryText);
    font-size: 14px;
}

.stat-value {
    color: var(--color-PrimaryText);
    font-size: 16px;
    font-weight: 500;
}


/* Tab header styles */
.tab-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-PrimaryText);
    padding: 8px 0;
}

/* Dropdown styles */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-PrimaryText);
    transition: all 0.2s ease;
}

.dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-trigger svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    min-width: 140px;
    width: auto;
    background-color: rgba(30, 32, 38, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border1);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--color-blackAlpha30);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    margin-top: 4px;
}

.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-PrimaryText);
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item.selected {
    background-color: var(--color-bg3);
    color: var(--color-TextLink);
}

/* Benchmark search input */
.benchmark-search {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 4px;
    color: var(--color-PrimaryText);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.benchmark-search:focus {
    border-color: var(--color-TextLink);
}

.benchmark-search::placeholder {
    color: var(--color-TertiaryText);
}

.search-item {
    padding: 8px 12px;
    border-top: 1px solid var(--color-border1);
}

/* Benchmark dropdown styles */
.benchmark-dropdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benchmark-label {
    font-size: 12px;
    color: var(--color-TertiaryText);
    font-weight: 500;
}



/* Date picker styles */
.date-picker-container {
    position: relative;
    display: inline-block;
}

.date-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

.date-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.date-trigger:hover {
    background-color: var(--color-bg2);
}

.calendar-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.date-picker-dropdown {
    position: absolute;
    top: 100%;
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-blackAlpha30);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    margin-top: 4px;
    min-width: 280px;
}

.date-picker-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border1);
}

.calendar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-PrimaryText);
}

.calendar-nav {
    background: none;
    border: none;
    color: var(--color-PrimaryText);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.calendar-nav:hover {
    background-color: var(--color-bg2);
}

.calendar-nav svg {
    width: 20px;
    height: 20px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border1);
}

.calendar-weekdays div {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-TertiaryText);
    padding: 8px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 16px 16px;
}

.calendar-day {
    text-align: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-PrimaryText);
    transition: background-color 0.2s ease;
}

.calendar-day:hover {
    background-color: var(--color-bg2);
}

.calendar-day.other-month {
    color: var(--color-TertiaryText);
}

.calendar-day.selected {
    background-color: var(--color-TextLink);
    color: var(--color-BasicBg);
}

.calendar-day.today {
    border: 1px solid var(--color-TextLink);
}

/* Year picker styles */
.calendar-title-container {
    position: relative;
}

.calendar-title {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.calendar-title:hover {
    background-color: var(--color-bg2);
}

.year-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg1);
    border: 1px solid var(--color-border1);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-blackAlpha30);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-top: 4px;
    min-width: 200px;
}

.year-picker-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.year-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border1);
}

.year-range {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-PrimaryText);
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 12px 12px;
    gap: 4px;
}

.year-item {
    text-align: center;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-PrimaryText);
    transition: background-color 0.2s ease;
}

.year-item:hover {
    background-color: var(--color-bg2);
}

.year-item.selected {
    background-color: var(--color-TextLink);
    color: var(--color-BasicBg);
}

/* Responsive design */
@media (max-width: 900px) {
    .main-content {
        padding: 16px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .table-chart {
        flex-direction: column;
        gap: 16px;
    }
    
    .table-chart .stats-card {
        flex: none;
        min-width: 0;
    }
    
    .table-chart .card {
        flex: none;
        min-width: 0;
    }
    
    .t-headline1 {
        font-size: 24px;
    }
    
    .t-headline2 {
        font-size: 20px;
    }
    
    .asset-profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .benchmark-dropdown {
        align-self: flex-start;
    }

    .badges-date-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .date-picker-container {
        align-self: flex-start;
    }

    /* Mobile layout adjustments - auto-fit handles the grid */

    .holding-row {
        display: block;
    }

    .holding-row-left {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .holding-row-right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        flex-wrap: wrap;
        margin-left: 52px; /* Align with the start of the name text (icon width + gap) */
    }
    
    /* Break holdings metrics into 2 rows when there are 4+ items */
    .holding-row-right:has(.holding-metric:nth-child(3)) {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .holding-row-right:has(.holding-metric:nth-child(3)) .holding-metric {
        min-width: 120px;
        justify-content: space-between;
    }

    .badges-date-container > .bn-flex {
        align-self: flex-start;
    }
} 

/* Badges container with dynamic wrapping */
.badges-date-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.badges-date-container .bn-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 100%;
}

/* Asset Search Panel (asp-) */
.asp-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  width: clamp(220px, 420px, 100%);
  box-sizing:border-box;
}

.asp-search-container{
  display:flex;
  align-items:center;
  background: var(--color-bg1, #1E2026);
  border: 1px solid var(--color-border3, #474D57);
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.asp-search-container:focus-within {
  background: var(--color-bg1, #1E2026);
  border-color: var(--color-textLink, #00A1FF);
  box-shadow: 0 0 0 1px var(--color-textLink, #00A1FF);
}

.asp-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  color: var(--color-TertiaryText, #848E9C);
  margin-right:8px;
}

.asp-search-icon svg{
  width:16px;
  height:16px;
  fill: currentColor;
}

.asp-search-container input{
  flex:1;
  background: transparent;
  border: none;
  color: var(--color-PrimaryText, #EAECEF);
  font-size: 16px;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.asp-section-header{
  font-size:11px;
  color: var(--color-QuaternaryText, #474D57);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top:4px;
}

.asp-no-results{
  padding: 16px;
  text-align: center;
  color: var(--color-TertiaryText, #848E9C);
  font-size: 12px;
}

.asp-loading{
  padding: 16px;
  text-align: center;
  color: var(--color-TertiaryText, #848E9C);
  font-size: 12px;
}

.asp-list{
  display:flex;
  flex-direction:column;
  max-height:320px;
  overflow:auto;
}

.asp-item{
  position:relative;
  padding:12px 16px;
  padding-right: 40px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  cursor:pointer;
}

.asp-item:hover{
  background: var(--color-bg2, #2B2F36);
}

.asp-item.highlight{
  background: var(--color-bg2, #2B2F36);
}

.asp-item-icon{
  width:32px;
  height:32px;
  background:var(--color-bg3, #363A45);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:var(--color-PrimaryText, #EAECEF);
  flex-shrink:0;
}

.asp-item-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.asp-item-name{
  font-size:14px;
  font-weight:600;
  color: var(--color-PrimaryText, #EAECEF);
}

.asp-item-ticker{
  font-size:12px;
  color: var(--color-TertiaryText, #848E9C);
}

.asp-item-meta{
  font-size:11px;
  color: var(--color-QuaternaryText, #474D57);
}

.asp-item-meta:empty{
  display:none;
}

.asp-section-header{
  font-size:12px;
  font-weight:600;
  color:var(--color-TertiaryText, #848E9C);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin:16px 16px 0px 16px;
  padding-bottom:4px;
  border-bottom:1px solid var(--color-border1, #2B2F36);
}

.remove-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  color: var(--color-QuaternaryText, #474D57);
  cursor:pointer;
  padding:2px;
  border-radius:4px;
  font-size:16px;
  font-weight:bold;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.remove-btn:hover{
      color: var(--color-border4, #848E9C);
    background: var(--color-whiteAlpha04);
}

/* Global modern scrollbar styling */
* {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--color-border3) var(--color-bg2); /* thumb track */
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--color-bg2);
}

*::-webkit-scrollbar-thumb {
    background: var(--color-border3);
    border-radius: 8px;
    border: 2px solid transparent; /* create inset look */
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-border4);
}

/* Month column cells */
.stats-table td.month-cell {
    min-width: 50px !important;
    width: 50px !important;
}

/* Stat column cells */
.stats-table td.stat-cell {
    min-width: 55px !important;
    width: 55px !important;
}

/* Simple Search Box - replaces asset-search.js component */
.simple-search-box {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.simple-search-box .search-container {
    display: flex;
    align-items: center;
    background: var(--color-bg2, #2B2F36);
    border: 1px solid var(--color-border3, #474D57);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 2rem;
}

.simple-search-box .search-container:hover {
    border-color: var(--color-border4, #848E9C);
    background: var(--color-bg3, #363A45);
}

.simple-search-box .search-container:focus-within {
    background: var(--color-bg1, #1E2026);
    border-color: var(--color-TextLink, #F0B90B);
    box-shadow: 0 0 0 1px var(--color-TextLink, #F0B90B);
}

.simple-search-box .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--color-TertiaryText, #848E9C);
    margin-right: 8px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.simple-search-box .search-container:focus-within .search-icon {
    color: var(--color-TextLink, #F0B90B);
}

.simple-search-box .search-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.simple-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-PrimaryText, #EAECEF);
    font-size: 14px;
    outline: none;
    width: 100%;
    min-width: 0;
}

.simple-search-box input::placeholder {
    color: var(--color-TertiaryText, #848E9C);
}

.simple-search-box .search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg1, #1E2026);
    border: 1px solid var(--color-border3, #474D57);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.simple-search-box .asp-item {
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.simple-search-box .asp-item:hover {
    background: var(--color-bg2, #2B2F36);
}

.simple-search-box .asp-item.highlight {
    background: var(--color-bg2, #2B2F36);
}

.simple-search-box .asp-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-TertiaryText, #848E9C);
    font-size: 14px;
}

/* Additional enhanced styles for simple search box */
.simple-search-box .search-container:active {
    transform: scale(0.98);
}

.simple-search-box .search-container:focus-within {
    cursor: text;
}

.simple-search-box input:focus {
    cursor: text;
}

/* Ensure proper spacing in tables */
.simple-search-box {
    margin: 0;
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .simple-search-box .search-container {
        height: 2.5rem;
        padding: 10px 12px;
    }
    
    .simple-search-box .search-dropdown {
        max-height: 280px;
    }
}

/* Dark scrollbar for dropdown */
.simple-search-box .search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.simple-search-box .search-dropdown::-webkit-scrollbar-track {
    background: var(--color-bg2, #2B2F36);
    border-radius: 3px;
}

.simple-search-box .search-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border3, #474D57);
    border-radius: 3px;
}

.simple-search-box .search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-border4, #848E9C);
}

/* Firefox scrollbar */
.simple-search-box .search-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border3, #474D57) var(--color-bg2, #2B2F36);
}

/* Loading state */
.simple-search-box .loading {
    padding: 16px;
    text-align: center;
    color: var(--color-TertiaryText, #848E9C);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.simple-search-box .loading::before {
    content: "🔍";
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Focus ring for accessibility */
.simple-search-box input:focus-visible {
    outline: 2px solid var(--color-TextLink, #F0B90B);
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
.simple-search-box * {
    transition: all 0.15s ease;
}

/* Ensure proper z-index layering */
.simple-search-box .search-dropdown {
    z-index: 1050;
}

/* Table cell integration */
td .simple-search-box {
    width: 100%;
    min-width: 120px;
}

/* Form integration */
.form-control.simple-search-box {
    border: none;
    background: transparent;
    padding: 0;
}

/* Bootstrap integration */
.row .simple-search-box {
    margin-bottom: 0;
}

/* Ensure proper height in different contexts */
.simple-search-box .search-container {
    min-height: 2rem;
    box-sizing: border-box;
}