4. balancer temp

{% extends 'base.html' %}
{% block content %}
<style>
    .balans-dashboard {
        padding: 40px 0;
        background-color: #f8f9fa;
    }
    .kpi-card {
        border-radius: 15px;
        padding: 25px;
        color: white;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border: none;
        height: 100%;
    }
    .kpi-assets { background: linear-gradient(135deg, #209e73, #157352); }
    .kpi-liabs { background: linear-gradient(135deg, #ee5f52, #c93b2d); }
    .kpi-equity { background: linear-gradient(135deg, #5a7be2, #3a56ad); }
    
    .kpi-title { font-size: 1.1rem; opacity: 0.9; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;}
    .kpi-amount { font-size: 1.8rem; font-weight: 800; font-family: 'Courier New', monospace; margin-top: 10px;}
    
    /* Structure Box Styling */
    .structure-box {
        background: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        margin-top: 20px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    .structure-item { margin-bottom: 20px; }
    .structure-item:last-child { margin-bottom: 0; }
    
    .item-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 8px;}
    .item-name { font-weight: 600; color: #2c3e50; font-size: 0.95rem;}
    .item-value { font-family: 'Courier New', monospace; font-weight: 700; color: #34495e; font-size: 0.9rem;}
    .item-pct { font-size: 0.8rem; color: #7f8c8d; font-weight: 600; }
    
    /* Pure CSS Progress Bars */
    .bar-bg { height: 8px; border-radius: 10px; background: #e9ecef; width: 100%; overflow: hidden;}
    .bar-fill { height: 100%; border-radius: 10px; transition: width 1s ease-in-out;}
    
    .fill-assets { background-color: #209e73; }
    .fill-liabs { background-color: #ee5f52; }
    .fill-equity { background-color: #5a7be2; }
</style>

<div class="balans-dashboard">
    <div class="container">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div>
                <h2 class="fw-bold m-0">Структура Баланса (Свод)</h2>
                <p class="text-muted m-0 mt-1">Основано на плане счетов МЮ №773-17 | Дата: <b>{{ date_str }}</b></p>
            </div>
            <a href="{% url 'risk-result' %}" class="btn btn-outline-dark rounded-pill px-4 fw-bold shadow-sm">
                <i class="fas fa-arrow-left me-2"></i> Назад в меню
            </a>
        </div>

        <!-- KPI Row -->
        <div class="row g-4 mb-4">
            <!-- ASSETS -->
            <div class="col-md-4">
                <div class="kpi-card kpi-assets">
                    <div class="kpi-title">Активы</div>
                    <div class="kpi-amount">{{ total_assets }}</div>
                </div>
                
                <div class="structure-box">
                    <h5 class="fw-bold mb-4 border-bottom pb-2">Состав Активов</h5>
                    {% for item in assets_structure %}
                    <div class="structure-item">
                        <div class="item-header">
                            <span class="item-name">{{ item.sub_category }}</span>
                            <div class="text-end">
                                <span class="item-value">{{ item.amount_abs|floatformat:0 }}</span>
                                <span class="item-pct">({{ item.share_pct|floatformat:1 }}%)</span>
                            </div>
                        </div>
                        <div class="bar-bg"><div class="bar-fill fill-assets" style="width: {{ item.share_pct|stringformat:"f" }}%;"></div></div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- LIABILITIES -->
            <div class="col-md-4">
                <div class="kpi-card kpi-liabs">
                    <div class="kpi-title">Обязательства</div>
                    <div class="kpi-amount">{{ total_liabilities }}</div>
                </div>
                
                <div class="structure-box">
                    <h5 class="fw-bold mb-4 border-bottom pb-2">Состав Обязательств</h5>
                    {% for item in liabilities_structure %}
                    <div class="structure-item">
                        <div class="item-header">
                            <span class="item-name">{{ item.sub_category }}</span>
                            <div class="text-end">
                                <span class="item-value">{{ item.amount_abs|floatformat:0 }}</span>
                                <span class="item-pct">({{ item.share_pct|floatformat:1 }}%)</span>
                            </div>
                        </div>
                        <div class="bar-bg"><div class="bar-fill fill-liabs" style="width: {{ item.share_pct|stringformat:"f" }}%;"></div></div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- EQUITY -->
            <div class="col-md-4">
                <div class="kpi-card kpi-equity">
                    <div class="kpi-title">Капитал</div>
                    <div class="kpi-amount">{{ total_equity }}</div>
                </div>
                
                <div class="structure-box">
                    <h5 class="fw-bold mb-4 border-bottom pb-2">Состав Капитала</h5>
                    {% for item in equity_structure %}
                    <div class="structure-item">
                        <div class="item-header">
                            <span class="item-name">{{ item.sub_category }}</span>
                            <div class="text-end">
                                <span class="item-value">{{ item.amount_abs|floatformat:0 }}</span>
                                <span class="item-pct">({{ item.share_pct|floatformat:1 }}%)</span>
                            </div>
                        </div>
                        <div class="bar-bg"><div class="bar-fill fill-equity" style="width: {{ item.share_pct|stringformat:"f" }}%;"></div></div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
    </div>
</div>
{% endblock %}