{# KPI Bar - Bottom fixed bar showing live metrics with expandable detail view #}
<div class="workbook-kpi-bar" id="workbookKpiBar">
    {# Collapsed view - Basic KPIs in a single row #}
    <div class="kpi-bar-collapsed" id="kpiBarCollapsed">
        <div class="kpi-bar-inner">
            {# Loading state #}
            <div class="kpi-loading" id="kpiLoadingState">
                <i class="fa fa-spinner fa-spin"></i> Loading KPIs...
            </div>

            {# KPI Items Container - populated by JavaScript #}
            <div class="kpi-items" id="kpiItemsContainer">
                {# KPI items will be rendered here #}
            </div>

            {# Spacer #}
            <div class="kpi-spacer"></div>

            {# Current Time Display #}
            <div class="kpi-time">
                <i class="fa fa-clock-o"></i>
                <span id="kpiCurrentTime">--:--</span>
            </div>

            {# Expand button #}
            <div class="kpi-expand-toggle">
                <button class="btn btn-link btn-sm" id="kpiExpandBtn" title="Show detailed KPIs">
                    <i class="fa fa-chevron-up"></i>
                </button>
            </div>

            {# Settings button for admin #}
            {% if user.checkAccess('workbook_kpi_config') or user.checkAccess('store_settings') %}
            <div class="kpi-settings">
                <button class="btn btn-link btn-sm" id="kpiSettingsBtn" title="Configure KPIs">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
            {% endif %}
        </div>
    </div>

    {# Expanded view - Detailed KPIs in sections #}
    <div class="kpi-bar-expanded" id="kpiBarExpanded" style="display: none;">
        <div class="kpi-expanded-inner">
            {# Header row with collapse button #}
            <div class="kpi-expanded-header">
                <span class="kpi-expanded-title">Today's Performance</span>
                <div class="kpi-expanded-controls">
                    <span class="kpi-time-expanded">
                        <i class="fa fa-clock-o"></i>
                        <span id="kpiCurrentTimeExpanded">--:--</span>
                    </span>
                    <button class="btn btn-link btn-sm" id="kpiCollapseBtn" title="Collapse">
                        <i class="fa fa-chevron-down"></i>
                    </button>
                </div>
            </div>

            {# Main content area #}
            <div class="kpi-expanded-content">
                {# Top row - Main KPIs with goals and comps #}
                <div class="kpi-main-metrics">
                    {# Sales column #}
                    <div class="kpi-metric-column kpi-sales-column" id="kpiSalesColumn">
                        <div class="kpi-metric-header">Sales</div>
                        <div class="kpi-metric-value" id="kpiSalesValue">$0.00</div>
                        <div class="kpi-metric-sub">
                            <div class="kpi-goal-line">
                                <span class="kpi-label">GOAL:</span>
                                <span id="kpiSalesGoal">$0.00</span>
                                <span id="kpiSalesVariance" class="kpi-variance"></span>
                            </div>
                            <div class="kpi-comp-line">
                                <span class="kpi-label">COMPS:</span>
                                <span id="kpiSalesComp">$0.00</span>
                            </div>
                        </div>
                    </div>

                    {# Avg Trans column #}
                    <div class="kpi-metric-column kpi-avg-column">
                        <div class="kpi-metric-header">Avg Trans</div>
                        <div class="kpi-metric-value kpi-neutral" id="kpiAvgTransValue">$0.00</div>
                        <div class="kpi-metric-sub">
                            <div class="kpi-goal-line">
                                <span class="kpi-label">GOAL:</span>
                                <span id="kpiAvgTransGoal">--</span>
                            </div>
                            <div class="kpi-comp-line">
                                <span class="kpi-label">COMPS:</span>
                                <span id="kpiAvgTransComp">$0.00</span>
                            </div>
                        </div>
                    </div>

                    {# Trade % column #}
                    <div class="kpi-metric-column kpi-trade-column">
                        <div class="kpi-metric-header">Trade %</div>
                        <div class="kpi-metric-value" id="kpiTradePercentValue">0%</div>
                        <div class="kpi-metric-sub">
                            <div class="kpi-goal-line">
                                <span class="kpi-label">GOAL:</span>
                                <span id="kpiTradePercentGoal">15.00%</span>
                            </div>
                            <div class="kpi-comp-line">
                                <span class="kpi-label">COMPS:</span>
                                <span id="kpiTradePercentComp">0.00%</span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Bottom row - Detail sections #}
                <div class="kpi-detail-sections">
                    {# Sales & Labor section #}
                    <div class="kpi-detail-section kpi-sales-labor">
                        <div class="kpi-section-header">Sales & Labor</div>
                        <div class="kpi-section-content">
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Transactions</span>
                                <span class="kpi-detail-value" id="kpiTransactions">0</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Total labor hours</span>
                                <span class="kpi-detail-value" id="kpiLaborHours">--</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Sales / labor hour</span>
                                <span class="kpi-detail-value" id="kpiSalesPerLaborHour">--</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Total wages</span>
                                <span class="kpi-detail-value" id="kpiTotalWages">--</span>
                            </div>
                        </div>
                    </div>

                    {# Backstock section #}
                    <div class="kpi-detail-section kpi-backstock">
                        <div class="kpi-section-header">
                            <span class="kpi-section-badge" id="kpiBackstockPulled">0</span>
                            Backstock
                        </div>
                        <div class="kpi-section-content">
                            <div class="kpi-backstock-summary">
                                <span id="kpiBackstockPulledText">0 bins pulled today</span>
                            </div>
                            <div class="kpi-backstock-activity" id="kpiBackstockActivity">
                                {# Activity items will be populated by JS #}
                            </div>
                            <div class="kpi-backstock-added">
                                <span class="kpi-section-badge kpi-section-badge-outline" id="kpiBackstockAdded">0</span>
                                <span id="kpiBackstockAddedText">bins added today</span>
                            </div>
                        </div>
                    </div>

                    {# Buys section #}
                    <div class="kpi-detail-section kpi-buys">
                        <div class="kpi-section-header">Buys</div>
                        <div class="kpi-section-content">
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Buys</span>
                                <span class="kpi-detail-value" id="kpiBuysCount">0</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Buys comp</span>
                                <span class="kpi-detail-value" id="kpiBuysComp">$0.00</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Trade</span>
                                <span class="kpi-detail-value" id="kpiTradeTotal">$0.00</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">% traded</span>
                                <span class="kpi-detail-value" id="kpiPercentTraded">0.00%</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">Trade comp</span>
                                <span class="kpi-detail-value" id="kpiTradeComp">$0.00</span>
                            </div>
                            <div class="kpi-detail-row">
                                <span class="kpi-detail-label">% traded comp</span>
                                <span class="kpi-detail-value" id="kpiPercentTradedComp">0.00%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% raw %}
<script id="kpi-item-template" type="text/x-handlebars-template">
    <div class="kpi-item {{statusClass}}" data-kpi="{{key}}" title="{{description}}">
        <div class="kpi-label">{{label}}</div>
        <div class="kpi-value">{{displayValue}}</div>
        {{#if goalValue}}
        <div class="kpi-goal">Goal: {{goalValue}}</div>
        {{/if}}
        {{#if compValue}}
        <div class="kpi-comp">vs LY: {{compValue}}</div>
        {{/if}}
    </div>
</script>

<script id="kpi-backstock-activity-template" type="text/x-handlebars-template">
    <div class="kpi-activity-item">
        <span class="kpi-activity-time">{{time}}</span>
        <span class="kpi-activity-bin">{{bin}}</span>
        <span class="kpi-activity-action">{{action}}</span>
        <span class="kpi-activity-category">{{category}}</span>
    </div>
</script>
{% endraw %}

{# KPI Bar Styles #}
<style>
/* Base KPI bar container */
.workbook-kpi-bar {
    position: fixed;
    bottom: 0;
    left: 0; /* Extend all the way to left edge */
    right: 0;
    z-index: 1010; /* Base z-index for collapsed state */
    transition: all 0.3s ease;
}

/* When expanded, KPI bar should be above the schedule panel (z-index: 1020) */
/* Primary method: class-based (set by JavaScript) */
.workbook-kpi-bar.kpi-bar-is-expanded {
    z-index: 1030;
}

/* Fallback: :has() selector for browsers that support it */
.workbook-kpi-bar:has(.kpi-bar-expanded[style*="block"]) {
    z-index: 1030;
}

/* Content padding to account for sidebar */
.kpi-bar-collapsed .kpi-bar-inner {
    padding-left: calc(var(--sidebar-width, 200px) + 15px);
    transition: padding-left 0.3s ease;
}

/* Adjust for collapsed sidebar - use body class set by JS */
body.sidebar-is-collapsed .kpi-bar-collapsed .kpi-bar-inner {
    padding-left: calc(var(--sidebar-collapsed-width, 60px) + 15px);
}

@media (max-width: 768px) {
    .kpi-bar-collapsed .kpi-bar-inner {
        padding-left: 15px;
    }
}

/* Collapsed view styles */
.kpi-bar-collapsed {
    height: 60px;
    background: var(--kpi-bar-bg, #1a202c);
    color: var(--kpi-bar-text, #fff);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    border-radius: 0; /* No rounded corners */
    transition: background 0.3s ease;
}


.kpi-bar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    max-width: 100%;
    overflow: hidden; /* Never show scrollbars on KPI bar */
}

.kpi-items {
    display: flex;
    align-items: center;
    gap: 20px;
}

.kpi-item {
    text-align: center;
    padding: 5px 15px;
    border-radius: 4px;
    min-width: 80px;
    cursor: pointer;
    transition: background 0.2s;
}

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

.kpi-item.status-good { background: rgba(46, 204, 113, 0.2); }
.kpi-item.status-warning { background: rgba(241, 196, 15, 0.2); }
.kpi-item.status-danger { background: rgba(231, 76, 60, 0.2); }

.kpi-label { font-size: 10px; text-transform: uppercase; opacity: 0.8; }
.kpi-value { font-size: 18px; font-weight: bold; margin-right: 6px; }
.kpi-goal, .kpi-comp { font-size: 9px; opacity: 0.7; margin-left: 4px; }
.kpi-spacer { flex: 1; min-width: 10px; }
.kpi-time { font-size: 14px; padding: 0 15px; white-space: nowrap; flex-shrink: 0; }
.kpi-settings button,
.kpi-expand-toggle button { color: #fff; opacity: 0.7; }
.kpi-settings button:hover,
.kpi-expand-toggle button:hover { opacity: 1; }
.kpi-loading { padding: 10px; }

/* Expanded view styles */
.kpi-bar-expanded {
    background: var(--panel-bg, #fff);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    max-height: 60vh;
    overflow-y: auto;
    transition: background 0.3s ease;
}

[data-theme="dark"] .kpi-bar-expanded {
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.kpi-expanded-inner {
    padding: 0;
    margin-left: var(--sidebar-width, 200px);
    transition: margin-left 0.3s ease;
}

/* Adjust for collapsed sidebar - use body class set by JS */
body.sidebar-is-collapsed .kpi-expanded-inner {
    margin-left: var(--sidebar-collapsed-width, 60px);
}

@media (max-width: 768px) {
    .kpi-expanded-inner {
        margin-left: 0;
    }
}

.kpi-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--panel-header-bg, #f8f9fa);
    border-bottom: 1px solid var(--panel-border, #e9ecef);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.kpi-expanded-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #333);
}

.kpi-expanded-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.kpi-time-expanded {
    font-size: 13px;
    color: #666;
}

.kpi-expanded-content {
    padding: 20px;
}

/* Main metrics row */
.kpi-main-metrics {
    display: flex;
    gap: 40px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.kpi-metric-column {
    min-width: 140px;
}

.kpi-metric-header {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.kpi-metric-value {
    font-size: 28px;
    font-weight: 300;
    color: #e74c3c;
    margin-bottom: 8px;
}

.kpi-metric-value.kpi-good { color: #27ae60; }
.kpi-metric-value.kpi-warning { color: #f39c12; }
.kpi-metric-value.kpi-danger { color: #e74c3c; }
.kpi-metric-value.kpi-neutral { color: #3498db; }

.kpi-metric-sub {
    font-size: 12px;
    color: #666;
}

.kpi-goal-line,
.kpi-comp-line {
    display: flex;
    gap: 8px;
    margin-bottom: 3px;
}

.kpi-label {
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    font-size: 10px;
}

.kpi-variance {
    margin-left: 8px;
}

.kpi-variance.positive { color: #27ae60; }
.kpi-variance.negative { color: #e74c3c; }

/* Sales column progress bar */
.kpi-sales-column .kpi-metric-value {
    position: relative;
}

.kpi-sales-progress {
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 3px;
    background: #e74c3c;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.kpi-sales-progress.good { background: #27ae60; }
.kpi-sales-progress.warning { background: #f39c12; }

/* Detail sections */
.kpi-detail-sections {
    display: flex;
    gap: 30px;
}

.kpi-detail-section {
    flex: 1;
    min-width: 180px;
}

.kpi-section-header {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-section-badge {
    background: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.kpi-section-badge-outline {
    background: transparent;
    border: 1px solid #999;
    color: #666;
}

.kpi-section-content {
    font-size: 13px;
}

.kpi-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.kpi-detail-label {
    color: #666;
}

.kpi-detail-value {
    font-weight: 500;
    color: #333;
}

/* Backstock section specific */
.kpi-backstock-summary {
    margin-bottom: 10px;
    color: #666;
}

.kpi-backstock-activity {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.kpi-activity-item {
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}

.kpi-activity-item:last-child {
    border-bottom: none;
}

.kpi-activity-time {
    color: #999;
    min-width: 40px;
}

.kpi-activity-bin {
    font-weight: 500;
    min-width: 50px;
}

.kpi-activity-action {
    color: #666;
}

.kpi-activity-category {
    color: #333;
    flex: 1;
}

.kpi-backstock-added {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

/* ==========================================================================
   RESPONSIVE KPI BAR - Progressive disclosure
   Priority: sales, buys, avgTrans, laborPercent (always visible)
   Drop order: salesPerLaborHour, totalWages → laborHours, transactions → tradePercent
   ========================================================================== */

/* Prevent KPI items from forcing bar overflow */
.kpi-items {
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.kpi-expand-toggle,
.kpi-settings {
    flex-shrink: 0;
}

/* Below 1400px: hide lowest-priority KPIs */
@media (max-width: 1399px) {
    .kpi-items [data-kpi="salesPerLaborHour"],
    .kpi-items [data-kpi="totalWages"] {
        display: none;
    }
}

/* Below 1200px: also hide laborHours and transactions */
@media (max-width: 1199px) {
    .kpi-items [data-kpi="laborHours"],
    .kpi-items [data-kpi="transactions"] {
        display: none;
    }
}

/* Below 1100px: drop avgTrans and laborPercent before navbar collapses */
@media (max-width: 1099px) {
    .kpi-items [data-kpi="avgTrans"],
    .kpi-items [data-kpi="laborPercent"] {
        display: none;
    }

    /* Tighten spacing as we get narrower */
    .kpi-items {
        gap: 12px;
    }

    .kpi-item {
        padding: 5px 10px;
        min-width: 60px;
    }
}

/* Below 992px: also hide tradePercent — only sales + buys remain */
@media (max-width: 991px) {
    .kpi-items [data-kpi="tradePercent"] {
        display: none;
    }

    .kpi-value {
        font-size: 15px;
    }
}

/* Below 768px: compact layout for sales + buys */
@media (max-width: 767px) {
    .kpi-items {
        gap: 8px;
    }

    .kpi-item {
        padding: 4px 8px;
        min-width: 50px;
    }

    .kpi-label {
        font-size: 8px;
    }

    .kpi-value {
        font-size: 13px;
    }

    .kpi-time {
        font-size: 12px;
        padding: 0 8px;
    }
}

/* Responsive adjustments for expanded view */
@media (max-width: 991px) {
    .kpi-main-metrics {
        flex-wrap: wrap;
        gap: 20px;
    }

    .kpi-detail-sections {
        flex-wrap: wrap;
    }

    .kpi-detail-section {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    .kpi-detail-section {
        flex: 1 1 100%;
    }

    .kpi-metric-value {
        font-size: 24px;
    }
}

/* ==========================================================================
   DARK MODE STYLES FOR KPI EXPANDED VIEW
   ========================================================================== */
[data-theme="dark"] .kpi-expanded-content {
    background: var(--panel-bg);
}

[data-theme="dark"] .kpi-time-expanded {
    color: var(--text-muted);
}

[data-theme="dark"] .kpi-main-metrics {
    border-bottom-color: var(--panel-border);
}

[data-theme="dark"] .kpi-metric-header {
    color: var(--text-muted);
}

[data-theme="dark"] .kpi-metric-sub {
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-label {
    color: var(--text-muted);
}

[data-theme="dark"] .kpi-section-header {
    color: var(--text-primary);
    border-bottom-color: var(--panel-border);
}

[data-theme="dark"] .kpi-section-badge {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .kpi-section-badge-outline {
    background: transparent;
    border-color: var(--text-muted);
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-detail-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-detail-value {
    color: var(--text-primary);
}

[data-theme="dark"] .kpi-backstock-summary {
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-backstock-activity {
    border-color: var(--panel-border);
    background: var(--sidebar-hover);
}

[data-theme="dark"] .kpi-activity-item {
    border-bottom-color: var(--panel-border);
}

[data-theme="dark"] .kpi-activity-time {
    color: var(--text-muted);
}

[data-theme="dark"] .kpi-activity-bin {
    color: var(--text-primary);
}

[data-theme="dark"] .kpi-activity-action {
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-activity-category {
    color: var(--text-primary);
}

[data-theme="dark"] .kpi-backstock-added {
    border-top-color: var(--panel-border);
}

[data-theme="dark"] #kpiCollapseBtn {
    color: var(--text-secondary);
}

[data-theme="dark"] #kpiCollapseBtn:hover {
    color: var(--text-primary);
}
</style>

<script>
// Clock update for KPI bar
(function() {
    function updateKpiClock() {
        var now = new Date();
        var timeStr = now.toLocaleTimeString('en-US', {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        });
        var el = document.getElementById('kpiCurrentTime');
        var elExpanded = document.getElementById('kpiCurrentTimeExpanded');
        if (el) el.textContent = timeStr;
        if (elExpanded) elExpanded.textContent = timeStr;
    }
    document.addEventListener('DOMContentLoaded', function() {
        updateKpiClock();
        setInterval(updateKpiClock, 1000);
    });
})();
</script>