/* ==========================================================================
   details-view.css
   این فایل فقط در Details.cshtml لینک می‌شود و روی سایر ویوها هیچ اثری ندارد.
   شامل: جدول قیمت (Tabulator)، جعبه‌های آماری، نمودارهای توزیع، باکس تحلیل تخصصی
   ========================================================================== */

/* ===============================
   ۱) صفحه‌بندی کلی این ویو
================================ */
.page-layout {
    width: 100%;
}

.centered-box {
    max-width: 980px;
    margin: 0 auto;
}

/* ===============================
   ۲) جدول قیمت (Tabulator)
================================ */
.tabulator-wrap {
    width: 100%;
    margin-top: .5rem;
}

.tabulator {
    font-family: iranyekan, IRANYekan, Tahoma;
    direction: rtl;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb !important;
}

    .tabulator .tabulator-header {
        background: #f6f8fb;
        border-bottom: 2px solid #e5e7eb;
    }

        .tabulator .tabulator-header .tabulator-col {
            background: #f6f8fb;
            font-weight: 700;
            font-size: 13px;
            text-align: center;
        }

    .tabulator .tabulator-row {
        font-size: 13.5px;
        transition: background .15s ease;
    }

        .tabulator .tabulator-row:hover {
            background: #f0f6ff !important;
            cursor: pointer;
        }

        .tabulator .tabulator-row.tabulator-row-even {
            background: #fafbfc;
        }

    .tabulator .tabulator-cell {
        text-align: center !important;
        padding: 9px 6px;
    }

    .tabulator .tabulator-footer {
        background: #f6f8fb;
        border-top: 1px solid #e5e7eb;
    }

    .tabulator .tabulator-calcs-holder {
        background: #eef4ff;
        font-weight: 700;
    }

/* نوار میانگین قیمت‌ها زیر جدول */
.price-avg-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: 12px;
    padding: 12px 16px;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    border-radius: 10px;
    font-size: 13.5px;
}

.price-avg-label {
    font-weight: 800;
    color: #1f2937;
}

.price-avg-item {
    color: #374151;
}

    .price-avg-item strong {
        color: #1d4ed8;
        font-weight: 800;
        margin: 0 3px;
    }

@media screen and (max-width: 600px) {
    .price-avg-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ===============================
   ۳) نمودارهای توزیع نرمال + جعبهٔ آماری کنار آن‌ها
================================ */
.chart-canvas-large {
    width: 100% !important;
}

/* جعبهٔ چهار آماره (میانگین/انحراف معیار/حداقل/حداکثر) به‌صورت گرید فشرده */
.stat-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

    .stat-values p {
        margin: 0 !important;
        background: #ffffff;
        border-radius: 10px;
        padding: 10px 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,.05);
    }

        .stat-values p:first-child {
            grid-column: 1 / -1;
            background: #eef4ff;
            border: 1px solid #dbe7ff;
        }

            .stat-values p:first-child strong {
                color: #1d4ed8;
            }

/* موبایل: نمودار و جعبهٔ آماری فشرده‌تر */
@media screen and (max-width: 768px) {
    .chart-canvas-large {
        max-height: 260px;
    }

    .stat-values {
        gap: 8px;
        padding: 10px !important;
    }

        .stat-values p {
            padding: 8px 6px;
            font-size: 12.5px;
        }
}

/* ===============================
   ۴) باکس «تحلیل تخصصی آماری»
================================ */
.analysis-section {
    border-radius: 16px;
}

.analysis-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1.25rem;
}

.analysis-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    /* رنگ‌های متفاوت برای هر کارت آماری */
    .analysis-stat-card.is-primary {
        border-top: 4px solid #0984e3;
    }

    .analysis-stat-card.is-info {
        border-top: 4px solid #00b894 !important;
    }

/* استفاده از !important برای اولویت بالاتر (در صورت نیاز) */
.rent-analysis-card.is-warning {
    border-top: 4px solid #fdcb6e !important;
}

.rent-analysis-card.is-danger {
    border-top: 4px solid #e17055 !important;
}

.rent-analysis-card.is-success {
    border-top: 4px solid #00b894 !important;
}

.analysis-stat-card.is-link {
    border-top: 4px solid #6c5ce7 !important;
}

.analysis-stat-card.is-dark {
    border-top: 4px solid #2d3436 !important;
}

    /* حالت پیش‌فرض برای کارت‌های بدون کلاس رنگی */
    .analysis-stat-card:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-dark) {
        border-top: 4px solid #636e72;
    }

.analysis-stat-label {
    font-size: 12px;
    color: #6c757d;
}

.analysis-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -.3px;
    color: #1f2937;
}

.analysis-stat-value--sm {
    font-size: 1.05rem;
}

.analysis-stat-unit {
    font-size: 11px;
    color: #9ca3af;
}

.analysis-text p {
    line-height: 1.9;
}

@media screen and (max-width: 768px) {
    .analysis-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .analysis-stat-card {
        padding: 10px 8px;
    }

    .analysis-stat-value {
        font-size: 1.15rem;
    }
}