/* static/css/fivepercent.css */
.vertical-bar-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 300px; /* Ensure enough space for bars */
    padding-bottom: 40px; /* Increased for count, month, and percent labels */
    background-color: #000000; /* Black background */
}

.bar-container {
    text-align: center;
    flex: 1;
    max-width: 100px; /* Adjust based on number of months */
    position: relative; /* Anchor for count and month labels */
    min-height: 220px; /* Ensure space for bars + labels */
}

.bar-pair {
    display: flex;
    justify-content: center;
    gap: 5px; /* Space between buy/sell bars */
    height: 200px; /* Fixed height to align bars at bottom, matches maxHeight in JS */
    align-items: flex-end; /* Align bars at bottom of bar-pair */
}

.bar {
    width: 40px; /* Fixed width for each bar */
    border-radius: 4px; /* Rounded corners */
    transition: height 0.5s ease-in-out; /* Smooth height animation */
}

.bar.buy {
    background-color: #0d6efd; /* Bootstrap bg-primary */
}

.bar.sell {
    background-color: #198754; /* Bootstrap bg-success */
}

.count-label {
    font-size: 0.8rem;
    position: absolute;
    top: -20px; /* Position above bar */
    width: 40px; /* Match .bar width */
    text-align: center;
}

.count-label.buy {
    color: #ff9999; /* Light red/pink for buy_count */
}

.count-label.sell {
    color: #00ff00; /* Lime green for sell_count */
}

.month-label {
    position: absolute;
    bottom: -30px; /* Position further below to avoid overlap */
    width: 100%;
    font-size: 0.9rem;
    color: #ffffff; /* White for visibility */
    word-wrap: break-word;
}

.percent-completed {
    font-size: 16px;
    color: #cccccc; /* Lighter color for secondary info */
    margin-top: 2px; /* Space between month-year and percentage */
}

.chart-legend {
    display: flex;
    flex-wrap: nowrap; /* Ensure inline, no wrapping */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Align items vertically */
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #000000; /* Match chart background */
    border-radius: 4px;
    width: 100%; /* Full width for centering */
    text-align: center; /* Fallback centering */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    background-color: wheat;
    color: #ffffff;
    white-space: nowrap; /* Prevent text wrapping */
}

.legend-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.legend-swatch.buy-bar {
    background-color: #0d6efd;
}

.legend-swatch.sell-bar {
    background-color: #198754;
}

.legend-swatch.buy-label {
    background-color: #ff9999;
}

.legend-swatch.sell-label {
    background-color: #00ff00;
}

/* FivePercent app-specific styles */
.fp-container {
    background-color: #1a1a1a;
    color: #ffffff;
}

.fp-header h1 {
    font-size: 2.5rem;
    color: #ffffff;
}

.fp-header p.lead {
    color: #cccccc;
}

.fp-nav-tabs {
    display: flex;
    justify-content: center;
    border-bottom: none;
    margin: 0;
    padding-bottom: 10px;
}

.fp-nav-tabs .nav-link {
    color: #f5f5f5; /* Bright white for inactive tabs */
    background-color: #2a4a4a; /* Darker teal for inactive tabs */
    border: 1px solid #2a4a4a; /* Dark teal border */
    margin: 0 2px; /* Tighter spacing */
    border-radius: 4px 4px 0 0; /* Subtle top corners */
    transition: all 0.3s ease;
}

.fp-nav-tabs .nav-link.active {
    color: #66d9ef; /* Soft cyan for active tab */
    background-color: #4a6a6a; /* Muted teal for active tab */
    border: 1px solid #2a4a4a;
    border-bottom: none; /* No bottom border for blend */
    margin-bottom: -1px; /* Overlap card to eliminate gap */
}

.fp-nav-tabs .nav-link:hover {
    color: #66d9ef; /* Soft cyan on hover */
    background-color: #1a3a3a; /* Slightly darker teal on hover */
}

.tab-content {
    background-color: #4a6a6a; /* Match active tab */
    margin: 0; /* No margins */
    padding: 0; /* No padding */
}

.tab-pane {
    background-color: #4a6a6a; /* Match active tab */
    margin: 0; /* No margins */
    padding: 0; /* No padding */
}

.fp-card {
    background-color: #4a6a6a; /* Match active tab */
    border: 1px solid #2a4a4a; /* Dark teal border */
    border-top: none; /* No top border for blend */
    color: #66d9ef; /* Soft cyan for content text */
    margin: 0; /* No margins */
    padding: 0; /* No padding */
    border-radius: 0 0 4px 4px; /* Subtle bottom corners */
}

.fp-card-header {
    background-color: #4a6a6a; /* Match active tab */
    border-bottom: none; /* Remove bottom border to close gap */
    border-top: none; /* No top border */
    margin-top: -1px; /* No margins */
    padding: 10px 10px 0; /* Remove bottom padding to close gap */
}

.fp-card-title {
    color: #66d9ef; /* Soft cyan */
    margin: 0; /* No margins */
}

.fp-card-body {
    background-color: #4a6a6a; /* Match active tab */
    max-height: 750px; /* Enable scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    position: relative; /* Context for sticky thead */
    padding: 0; /* Remove padding to close gap */
    margin: 0; /* Ensure no margin */
}

/* Table styles */
.fp-table {
    color: #66d9ef; /* Soft cyan for table text */
    background-color: #4a6a6a; /* Match active tab */
    width: 100%;
    border-collapse: collapse; /* Prevent gaps between cells */
    margin: 0; /* Remove default margins */
}

.fp-table th,
.fp-table td {
    border: 1px solid #2a4a4a; /* Dark teal border */
    padding: unset;
}

.fp-table thead {
    position: sticky;
    top: 0;
    z-index: 2; /* Stay above tbody */
    background-color: #4a6a6a; /* Match card body */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.fp-table thead th {
    background-color: #000000; /* Match active tab */
    color: #66d9ef; /* Soft cyan */
    border-top: none; /* Remove top border to close gap */
    border-bottom: 1px solid #2a4a4a; /* Consistent border */
    padding: 8px; /* Consistent padding */
}

.fp-table tbody {
    background-color: #4a6a6a; /* Match card body */
}

.fp-table tbody tr:hover {
    background-color: #3a5a5a; /* Slightly darker for hover */
}

/* Radio button styles */
.fp-card-body input[type="radio"] {
    margin-right: 5px;
    accent-color: #66d9ef; /* Soft cyan for radio buttons */
}

.fp-card-body label {
    color: #66d9ef; /* Soft cyan for labels */
    cursor: pointer;
    font-size: 0.9rem;
}

.fp-card-body label:hover {
    color: #ffffff; /* Bright white on hover */
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Space for sort indicator */
}

.sortable:hover {
    background-color: #3a5a5a; /* Slightly darker on hover */
}

table.fp-table thead th.sortable::after {
    content: '\2195'; /* Unicode escape for ↕ (up/down arrow) */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #66d9ef;
    font-size: 25px; /* Smaller for better fit */
}

table.fp-table thead th.sortable[data-sort-dir="asc"]::after {
    content: '\2191'; /* Unicode escape for ↑ (up arrow) */
    font-size: 25px; /* Smaller for better fit */
}

table.fp-table thead th.sortable[data-sort-dir="desc"]::after {
    content: '\2193'; /* Unicode escape for ↓ (down arrow) */
    font-size: 25px; /* Smaller for better fit */
}

.li{
    text-decoration: none !important;
}

/* Conditional styling for Buy At column */
table.fp-table tbody tr td.buy-at-green {
    background-color: #90EE90 !important; /* Light green (pastel) */
    color: #1a1a1a !important; /* Dark text for contrast */
}

table.fp-table tbody tr td.buy-at-red {
    background-color: #FFB6C1 !important; /* Light pink/red (pastel) */
    color: #1a1a1a !important; /* Dark text for contrast */
}

.buy-at-red {
    background-color: #FFB6C1 !important; /* Light pink/red (pastel) */
    color: #1a1a1a !important; /* Dark text for contrast */
}

.buy-at-green {
    background-color: #90EE90 !important; /* Light green (pastel) */
    color: #1a1a1a !important; /* Dark text for contrast */
}

/* Closeness-to-sale styling for Last Price column */
table.fp-table tbody tr td.price-close-1 {
    background-color: #E0FFE0 !important; /* Lightest green (6-5% below sell_at) */
    color: #1a1a1a !important;
}
table.fp-table tbody tr td.price-close-2 {
    background-color: #B3FFB3 !important; /* Slightly darker green (5-4%) */
    color: #1a1a1a !important;
}
table.fp-table tbody tr td.price-close-3 {
    background-color: #80FF80 !important; /* Medium green (4-3%) */
    color: #1a1a1a !important;
}
table.fp-table tbody tr td.price-close-4 {
    background-color: #4DFF4D !important; /* Darker green (3-2%) */
    color: #1a1a1a !important;
}
table.fp-table tbody tr td.price-close-5 {
    background-color: #00CC00 !important; /* Darkest green (2-0%) */
    color: #1a1a1a !important;
}

/* Legend for Sell At color shades */
.sell-at-legend {
    color: #66d9ef;
    font-size: 0.9rem;
    text-align: center;
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.legend-title {
    margin-right: 8px;
}

.legend-item {
    padding: 2px 8px;
    border: 1px solid #2a4a4a;
    border-radius: 4px;
    color: #1a1a1a; /* Dark text for contrast */
    font-size: 0.85rem;
}

.legend-item.price-close-1 { background-color: #E0FFE0; }
.legend-item.price-close-2 { background-color: #B3FFB3; }
.legend-item.price-close-3 { background-color: #80FF80; }
.legend-item.price-close-4 { background-color: #4DFF4D; }
.legend-item.price-close-5 { background-color: #00CC00; }

.yearly-charts-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.yearly-chart-wrapper {
    border: 2px solid #2a4a4a;
    border-radius: 8px;
    padding: 15px;
    background-color: #1a1a1a;
}

.year-label {
    color: #66d9ef;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
    border-bottom: 1px solid #2a4a4a;
    padding-bottom: 10px;
}