/* Container specific styling */
.bar-chart-content {
    display: flex;
    flex-direction: column;
    gap: var(--padding-card);
    border-radius: var(--border-radius-large);
}

.bar-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.bar-chart-table th,
.bar-chart-table td {
    padding: 8px;
    text-align: left;
    color: var(--color-text-primary); 
}

.bar-chart-table th {
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Category controls */
.category-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.category-dropdown {
    flex: 1;
    padding: 8px;
    border-radius: var(--border-radius-small);
    background: var(--color-background);
    color: var(--color-text-primary);
    border: none;
}

.add-value-btn,
.remove-value-btn {
    padding: 4px 8px;
    border-radius: var(--border-radius-small);
    background: var(--color-background);
    color: var(--color-text-primary);
    border: none;
    cursor: pointer;
}

/* Category detail containers */
.category-containers {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-detail {
    background: var(--color-foreground);
    padding: var(--padding-card);
    border-radius: var(--border-radius-large);
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap as sections now have their own margins */
}

.category-detail h4 {
    color: var(--color-text-primary);
    margin-bottom: 0;
}

/* Statistics styling */
.stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.stat-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* AI recommendation section */
.ai-recommendation {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.ai-recommendation h5 {
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.refresh-recommendation {
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: var(--border-radius-small);
    background: var(--color-background);
    color: var(--color-text-primary);
    border: none;
    cursor: pointer;
}

/* Add these to the existing CSS file */
.stat-subheader {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin: 12px 0 8px 0;
}

.loading {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.error {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    padding: 16px;
    text-align: center;
}

.chart-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
}


.stacked-bar-container {
    width: 100%;
    height: 50px !important;
    position: relative;
    padding: 0;
    margin: 0;
}

/* Ensure canvas fills container completely */
.stacked-bar-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0;
    padding: 0;
}

/* Helper function to get colors for categories */
:root {
    --color-living: #8ECCC0;      /* New pastel teal-green color */
    --color-education: #9BBCC3;
    --color-culture: #ABC2E2;
    --color-accommodation: #CBA5D1;
    --color-retail: #F8719D;
    --color-convenience: #FF4181;
    --color-leisure: #D44B9C;
    --color-gastronomy: #D44B9C;
    --color-medical: #8B62A8;
    --color-office: #5E7F9A;
}

/* Category circles styling */
.category-circles {
    display: flex;
    width: 100%;
    padding: 16px 0;
    align-items: center;
    justify-content: space-between;  /* Changed from flex-start to space-between */
}

.category-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}

.category-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.2s;
}

/* Hide icon on hover */
.category-circle:hover .category-icon {
    opacity: 0;
}

/* Update remove button styling */
.circle-remove-btn {
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.minus-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* Show button on circle hover */
.category-circle:hover .circle-remove-btn {
    opacity: 1;
}

/* Remove old hover effects */
.circle-remove-btn:hover {
    background: none;
}

/* Update add circle styling */
.add-circle {
    background-color: var(--color-background);
    position: relative;
    aspect-ratio: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  /* Stronger shadow */
}

/* Remove hover effect from container */
.add-circle:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  /* Keep same shadow */
}

.circle-add-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #383838;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: none;
}

.circle-add-btn svg {
    width: 24px;
    height: 24px;
}

.circle-add-btn path {
    fill: #FFFFFF;  /* White by default */
    transition: fill 0.2s;  /* Smooth transition */
}

/* Show gradient on hover */
.circle-add-btn:hover path {
    fill: url(#gradient-fill);
}

/* Styled dropdown popup */
.category-dropdown-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-foreground);
    border-radius: 20px;
    box-shadow: var(--shadow-popup);
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
    z-index: 1000;
    padding: 12px 0;  /* Add vertical padding */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  /* Stronger shadow */
}

.add-circle.active .category-dropdown-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-item {
    padding: 12px 20px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: color 0.2s;  /* Only transition the color */
}

.dropdown-item:hover {
    color: attr(data-color);  /* Use the category color directly */
}

/* Remove the previous hover effects */
.dropdown-item:hover {
    background-color: transparent;  /* Remove background change */
    position: static;  /* Remove positioning */
}

/* Remove the ::after pseudo-element completely */
.dropdown-item:hover::after {
    content: none;
}

.dropdown-item:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dropdown-item:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Add detail header styling */
.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.detail-icon {
    width: 24px;
    height: 24px;
}

/* Suggested Action styling */
.suggested-action {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.suggested-action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.expand-suggestion {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.suggestion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.suggestion-content.expanded {
    max-height: 500px;
    margin-top: 12px;
}

.expand-suggestion.expanded {
    transform: rotate(45deg);
}

/* Content section styling - matching the suggested action style */
.content-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.content-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.expand-content {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.content-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.content-section-body.expanded {
    max-height: 500px;
    margin-top: 12px;
}

.expand-content.expanded {
    transform: rotate(45deg);
}

.stat-section-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-bottom: 12px;
}

.stat-divider {
    height: 2px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.338);
    margin: 12px 0;
    /* Add these properties to ensure consistent rendering */
    transform: translateZ(0);  /* Force GPU acceleration */
    -webkit-backface-visibility: hidden;  /* Prevent rendering artifacts */
    backface-visibility: hidden;
}

/* Specific adjustments for first and last dividers */
.stat-list .stat-divider:first-of-type {
    margin-bottom: 12px;
}

.stat-list .stat-divider:last-of-type {
    margin-top: 12px;
}

.location-chart {
    margin: 0 0 12px 0;  /* Remove top margin, keep bottom margin */
    padding: 0;          /* Remove padding */
    height: 32px;
    width: 100%;
}

.location-chart-wrapper {
    height: 32px;
    width: 100%;        /* Keep full width */
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-background);
    position: relative;  /* Add positioning context */
}

.location-chart canvas {
    height: 32px !important;
    width: 100% !important;
    display: block;
    position: absolute;  /* Position absolutely to fill container */
    left: 0;
    top: 0;
}

/* Add styles for the category indicator */
.stat-item .stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #383838;
}

/* Add styling for AI recommendation text */
.recommendation-content {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-primary);
    text-align: justify;  /* Justify the text for block appearance */
    padding: 0 4px;      /* Add small padding for better readability */
    hyphens: auto;       /* Enable hyphenation for better text blocks */
    word-wrap: break-word; /* Prevent overflow */
}

/* Style for the loading state */
.recommendation-content .loading {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: left;    /* Keep loading text left-aligned */
}

.dropdown-message {
    padding: 8px 12px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: center;
    background: var(--color-background);
    border-radius: 4px;
    margin: 4px 8px;
}