/* Tooltip System V2 Styles */
/* Extracted from tooltip-system.js for better organization and performance */

#unified-tooltip-v2.tooltip-v2,
#context-menu {
    font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
    font-size: 16px;
    z-index: 10000;
    width: 280px;
    box-sizing: border-box;
}

/* Transition flourish - tooltip to context menu */
#unified-tooltip-v2.transitioning {
    animation: tooltip-to-menu 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#context-menu.appearing {
    animation: menu-appear 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip transition - no animation on container, header stays perfectly still */
@keyframes tooltip-to-menu {
    0%, 100% {
        transform: none;
    }
}

/* Fade out tooltip content specifically, header stays completely static */
#unified-tooltip-v2.transitioning .tooltip-content,
#unified-tooltip-v2.transitioning .price-section,
#unified-tooltip-v2.transitioning .carens-grid,
#unified-tooltip-v2.transitioning .tooltip-row {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Keep header completely static - no opacity change */
#unified-tooltip-v2.transitioning .unified-header {
    opacity: 1 !important;
}

/* Menu appear - no animation on container, header stays perfectly still */
@keyframes menu-appear {
    0%, 100% {
        transform: none;
    }
}

/* Fade in menu content specifically, header appears instantly at full opacity */
#context-menu.appearing .context-content {
    animation: content-fade-in 0.3s ease-in-out;
}

/* Keep menu header completely static - no animation */
#context-menu.appearing .unified-header {
    opacity: 1 !important;
    animation: none !important;
}

@keyframes content-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* UNIFIED HEADER - Identical for tooltip and context menu */
#unified-tooltip-v2 .unified-header,
#context-menu .unified-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}

#unified-tooltip-v2 .header-coord,
#context-menu .header-coord {
    font-size: 18px;
    font-weight: 300;
    color: white;
}

#unified-tooltip-v2 .ownership-badge,
#context-menu .ownership-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

#unified-tooltip-v2 .ownership-badge.city,
#context-menu .ownership-badge.city {
    background: #666;
    color: #ccc;
}

#unified-tooltip-v2 .ownership-badge.player,
#context-menu .ownership-badge.player {
    /* Dynamic background/color set via inline styles */
}

#unified-tooltip-v2 .tooltip-content,
#context-menu .context-content {
    color: #E0E0E0;
    line-height: 1.5;
}

/* Price information section - shown below header separator */
#unified-tooltip-v2 .price-section,
#context-menu .price-section {
    padding: 6px 0;
    border-bottom: 1px solid #333;
    margin-bottom: 8px;
}

#unified-tooltip-v2 .price-label,
#context-menu .price-label {
    color: #BDBDBD;
    font-size: 13px;
    margin-bottom: 2px;
}

#unified-tooltip-v2 .price-value,
#context-menu .price-value {
    font-size: 16px;
    font-weight: 700;
    color: #4CAF50;
}

/* Compact resource lists with tight spacing */
#unified-tooltip-v2 .compact-section,
#context-menu .compact-section {
    margin: 6px 0;
}

#unified-tooltip-v2 .compact-label,
#context-menu .compact-label {
    font-size: 12px;
    font-weight: 600;
    color: #90CAF9;
    text-transform: uppercase;
    margin-bottom: 3px;
}

#unified-tooltip-v2 .resource-list,
#context-menu .resource-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.3;
}

#unified-tooltip-v2 .resource-item,
#context-menu .resource-item {
    padding: 1px 0;
    font-size: 13px;
    color: #E0E0E0;
}

#unified-tooltip-v2 .building-name {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

#unified-tooltip-v2 .metric-row {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    padding: 2px 0;
}

#unified-tooltip-v2 .metric-label {
    color: #BDBDBD;
    font-size: 14px;
}

#unified-tooltip-v2 .metric-value {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

#unified-tooltip-v2 .performance-section,
#unified-tooltip-v2 .condition-section,
#unified-tooltip-v2 .revenue-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

#unified-tooltip-v2 .section-header {
    font-size: 14px;
    font-weight: 600;
    color: #90CAF9;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#unified-tooltip-v2 .resource-needs {
    margin-top: 6px;
}

#unified-tooltip-v2 .resource-item {
    color: #FFAB91;
    font-size: 13px;
    margin: 2px 0;
}

#unified-tooltip-v2 .carens-boost {
    margin-top: 6px;
}

#unified-tooltip-v2 .boost-item {
    color: #81C784;
    font-size: 13px;
    margin: 2px 0;
}

#unified-tooltip-v2 .construction-progress {
    margin-top: 8px;
}

#unified-tooltip-v2 .progress-bar {
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

#unified-tooltip-v2 .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF9800, #FFB74D);
    transition: width 0.3s ease;
}

#unified-tooltip-v2 .price-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

#unified-tooltip-v2 .price-label {
    color: #BDBDBD;
    font-size: 14px;
}

#unified-tooltip-v2 .price-value {
    font-size: 18px;
    font-weight: 700;
    color: #4CAF50;
}

#unified-tooltip-v2 .ownership-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
}

#unified-tooltip-v2 .ownership-badge.city {
    background: #424242;
    color: #9E9E9E;
}

#unified-tooltip-v2 .ownership-badge.player {
    /* Dynamic background/color set via inline styles */
}

/* Sidebar tooltip styles */
#unified-tooltip-v2.sidebar-tooltip {
    max-width: 300px;
}

#unified-tooltip-v2.sidebar-tooltip .metric-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

#unified-tooltip-v2.sidebar-tooltip .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 8px;
}

#unified-tooltip-v2.sidebar-tooltip .metric-description {
    font-size: 14px;
    color: #BDBDBD;
    line-height: 1.4;
}

/* DCF tooltip styles */
#unified-tooltip-v2.dcf-tooltip {
    max-width: 350px;
}

#unified-tooltip-v2.dcf-tooltip .dcf-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

#unified-tooltip-v2.dcf-tooltip .dcf-row {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    font-size: 14px;
}

#unified-tooltip-v2.dcf-tooltip .dcf-label {
    color: #BDBDBD;
}

#unified-tooltip-v2.dcf-tooltip .dcf-value {
    color: white;
    font-weight: 600;
}

/* Simple tooltip styles */
#unified-tooltip-v2.simple-tooltip {
    max-width: 200px;
    font-size: 14px;
    padding: 8px 12px;
}

/* Building values section */
#unified-tooltip-v2 .building-values {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

#unified-tooltip-v2 .value-header {
    font-size: 14px;
    font-weight: 600;
    color: #90CAF9;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#unified-tooltip-v2 .value-row {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}

#unified-tooltip-v2 .value-label {
    color: #BDBDBD;
    font-size: 14px;
}

#unified-tooltip-v2 .value-amount {
    font-weight: 600;
    color: #4CAF50;
    font-size: 14px;
}

/* Condition section styling */
#unified-tooltip-v2 .condition-header {
    font-size: 14px;
    font-weight: 600;
    color: #90CAF9;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Performance indicators */
#unified-tooltip-v2 .performance-excellent { color: #4CAF50; }
#unified-tooltip-v2 .performance-good { color: #8BC34A; }
#unified-tooltip-v2 .performance-average { color: #FF9800; }
#unified-tooltip-v2 .performance-poor { color: #f44336; }