.reports-content {
    min-height: calc(100vh - 82px);
}

.reports-header {
    box-shadow: 0 8px 25px rgba(15, 23, 42, .08);
}

.report-period {
    color: #dbeafe;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(191,219,254,.3);
    border-radius: 50px;
    padding: 9px 13px;
    font-size: .76rem;
    white-space: nowrap;
}

.report-filter {
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

    .report-filter strong, .report-filter small {
        display: block;
    }

    .report-filter strong {
        color: #334155;
    }

    .report-filter small {
        color: #94a3b8;
        font-size: .74rem;
        margin-top: 4px;
    }

.report-select {
    width: 150px;
    padding: 8px 10px;
    font-size: .8rem;
}

.report-section {
    display: none;
    animation: report-in .3s ease;
}

    .report-section.active-report-section {
        display: block;
    }

@keyframes report-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

    .kpi-grid.compact {
        grid-template-columns: repeat(4, 1fr);
    }

.kpi-card, .mini-kpi {
    border-radius: 16px;
    padding: 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 16px rgba(15,23,42,.04);
}

.kpi-card {
    border-top: 4px solid #3b82f6;
}

    .kpi-card.revenue {
        border-top-color: #10b981;
    }

    .kpi-card.orders {
        border-top-color: #3b82f6;
    }

    .kpi-card.customers {
        border-top-color: #8b5cf6;
    }

    .kpi-card.visits {
        border-top-color: #f59e0b;
    }

.kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: #dbeafe;
    color: #2563eb;
}

.revenue .kpi-icon {
    background: #dcfce7;
    color: #16a34a
}

.customers .kpi-icon {
    background: #ede9fe;
    color: #7c3aed
}

.visits .kpi-icon {
    background: #fef3c7;
    color: #d97706
}

.kpi-card span {
    color: #64748b;
    font-size: .78rem;
    display: block;
}

.kpi-card strong {
    color: #1e293b;
    font-size: 1.18rem;
    display: block;
    margin: 5px 0;
}

    .kpi-card strong small {
        font-size: .68rem;
        font-weight: 500;
    }

.kpi-card em {
    color: #16a34a;
    font-size: .7rem;
    font-style: normal;
    white-space: nowrap;
}

.report-card {
    padding: 20px;
    height: 100%;
}

.report-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

    .report-card-head h5 {
        margin: 0;
        color: #334155;
        font-size: 1rem;
        font-weight: 800;
    }

    .report-card-head small {
        color: #94a3b8;
        font-size: .72rem;
        display: block;
        margin-top: 5px;
    }

.legend {
    color: #64748b;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 4px;
}

    .legend-dot.blue {
        background: #3b82f6;
    }

    .legend-dot.purple {
        background: #8b5cf6;
        margin-right: 0;
        margin-left: 6px;
    }

.chart-area {
    height: 245px;
    display: flex;
    gap: 12px;
}

.chart-y {
    width: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #94a3b8;
    font-size: .67rem;
    padding-bottom: 23px;
}

.chart-bars {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 12px 22px;
    border-bottom: 1px solid #cbd5e1;
}

.chart-grid {
    position: absolute;
    inset: 0 0 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

    .chart-grid i {
        border-top: 1px dashed #e2e8f0;
    }

.bar-group {
    position: relative;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    z-index: 1;
}

    .bar-group b, .bar-group em {
        width: 14px;
        border-radius: 6px 6px 0 0;
        display: block;
    }

    .bar-group b {
        background: linear-gradient(#60a5fa,#2563eb);
    }

    .bar-group em {
        background: linear-gradient(#c4b5fd,#7c3aed);
    }

    .bar-group small {
        position: absolute;
        bottom: -20px;
        right: 5px;
        color: #94a3b8;
        font-size: .68rem;
    }

.donut-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
}

.donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0 40%,#3b82f6 40% 65%,#f59e0b 65% 84%,#ef4444 84% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .donut:before {
        content: "";
        position: absolute;
        width: 102px;
        height: 102px;
        background: #fff;
        border-radius: 50%;
    }

    .donut div {
        position: relative;
        text-align: center;
    }

    .donut strong, .donut small {
        display: block;
    }

    .donut strong {
        font-size: 1.5rem;
        color: #1e293b;
    }

    .donut small {
        font-size: .68rem;
        color: #94a3b8;
    }

.status-legend {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: .73rem;
    color: #64748b;
}

    .status-legend span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .status-legend b {
        color: #334155;
        margin-right: 7px;
    }

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.green {
        background: #22c55e
    }

    .dot.blue {
        background: #3b82f6
    }

    .dot.orange {
        background: #f59e0b
    }

    .dot.red {
        background: #ef4444
    }

.report-link {
    color: #2563eb;
    font-size: .75rem;
    text-decoration: none;
    white-space: nowrap;
}

    .report-link:hover {
        color: #1d4ed8;
    }

.report-table th {
    color: #64748b;
    font-size: .75rem;
    background: #f8fafc;
}

.report-table td {
    font-size: .78rem;
}

.ltr {
    direction: ltr;
}

.report-badge {
    border-radius: 50px;
    padding: 5px 9px;
    font-size: .69rem;
    white-space: nowrap;
}

    .report-badge.green {
        background: #dcfce7;
        color: #15803d
    }

    .report-badge.blue {
        background: #dbeafe;
        color: #1d4ed8
    }

    .report-badge.orange {
        background: #fef3c7;
        color: #b45309
    }

    .report-badge.red {
        background: #fee2e2;
        color: #b91c1c
    }

.progress-item {
    margin: 18px 0;
}

    .progress-item > div:first-child {
        display: flex;
        justify-content: space-between;
        color: #475569;
        font-size: .78rem;
        margin-bottom: 7px;
    }

    .progress-item b {
        color: #334155;
    }

.progress {
    height: 8px;
    background: #e2e8f0;
    border-radius: 50px;
    overflow: hidden;
}

    .progress i {
        display: block;
        height: 100%;
        border-radius: 50px;
        background: #3b82f6;
    }

        .progress i.purple {
            background: #8b5cf6;
        }

        .progress i.orange {
            background: #f59e0b;
        }

.mini-kpi {
    padding: 15px;
}

    .mini-kpi > i {
        font-size: 1.55rem;
    }

    .mini-kpi span {
        color: #64748b;
        font-size: .76rem;
    }

    .mini-kpi strong {
        display: block;
        color: #1e293b;
        font-size: 1.05rem;
        margin-top: 4px;
    }

.green-text {
    color: #16a34a
}

.blue-text {
    color: #2563eb
}

.orange-text {
    color: #d97706
}

.purple-text {
    color: #7c3aed
}

.financial-list > div {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    color: #64748b;
    font-size: .8rem;
    border-bottom: 1px solid #eef2f7;
}

.financial-list b {
    color: #334155;
}

.financial-list .negative {
    color: #dc2626;
}

.financial-list .total {
    border-bottom: 0;
    padding-bottom: 0;
    font-weight: 800;
    color: #1e293b;
}

    .financial-list .total b {
        color: #16a34a;
        font-size: 1rem;
    }

.shipment-row {
    position: relative;
    padding: 13px 0 19px;
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: .78rem;
    border-bottom: 1px solid #eef2f7;
}

    .shipment-row i {
        position: absolute;
        right: 0;
        bottom: 5px;
        height: 4px;
        border-radius: 50px;
        background: #3b82f6;
    }

    .shipment-row b {
        color: #334155;
    }

.visitor-chart {
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 18px 0;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #e2e8f0 44px);
}

.visitor-line {
    height: 170px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 20px;
    border-bottom: 1px solid #cbd5e1;
}

    .visitor-line span {
        position: absolute;
        color: #2563eb;
        font-size: .7rem;
        margin-bottom: -25px;
    }

    .visitor-line b {
        width: 19px;
        background: #60a5fa;
        border-radius: 7px 7px 0 0;
    }

    .visitor-line.customer b {
        background: #c4b5fd;
    }

    .visitor-line.customer span {
        color: #7c3aed;
        margin-bottom: -25px;
    }

.visitor-days {
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: .67rem;
    padding-top: 9px;
}

.customer-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f7;
    color: #64748b;
    font-size: .78rem;
}

    .customer-summary > div:last-child {
        border-bottom: 0;
    }

.customer-summary i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}

.customer-summary span {
    flex: 1;
}

.customer-summary strong {
    float: left;
    color: #334155;
    font-size: .9rem;
}

.product-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f7;
}

    .product-rank:last-child {
        border-bottom: 0;
    }

.rank {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4338ca;
    background: #e0e7ff;
    font-size: .75rem;
}

.product-info {
    flex: 1;
}

    .product-info strong, .product-info small {
        display: block;
    }

    .product-info strong {
        color: #334155;
        font-size: .79rem;
    }

    .product-info small {
        color: #94a3b8;
        font-size: .68rem;
        margin-top: 3px;
        direction: ltr;
        text-align: right;
    }

.product-rank > b {
    color: #16a34a;
    font-size: .76rem;
    white-space: nowrap;
}

.stock-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f7;
}

    .stock-alert > i {
        color: #f59e0b;
        font-size: 1.15rem;
    }

    .stock-alert div {
        flex: 1;
    }

    .stock-alert strong, .stock-alert small {
        display: block;
    }

    .stock-alert strong {
        color: #334155;
        font-size: .78rem;
    }

    .stock-alert small {
        color: #94a3b8;
        font-size: .68rem;
        margin-top: 3px;
    }

    .stock-alert b {
        color: #dc2626;
        font-size: .7rem;
        white-space: nowrap;
    }

    .stock-alert:last-child b {
        color: #2563eb;
    }

.reports-footer {
    color: #64748b;
    font-size: .75rem;
    margin-top: 22px;
    padding: 13px 0;
}

    .reports-footer i {
        color: #2563eb;
        margin-left: 5px;
    }

@media(max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

.report-filter {
    flex-wrap: wrap;
}

@media(max-width: 575.98px) {
    .reports-content {
        padding: 16px 10px;
    }

    .reports-header > div {
        padding: 14px !important;
    }

    .reports-header .report-period {
        display: none;
    }

    .reports-header .btn {
        padding: 8px 10px;
        font-size: .75rem;
    }

    .kpi-grid, .kpi-grid.compact {
        grid-template-columns: 1fr;
    }

    .report-filter > div:last-child {
        width: 100%;
    }

    .report-select {
        flex: 1;
        width: auto;
    }

    .donut-wrap {
        flex-direction: column;
    }

    .chart-area {
        height: 210px;
    }

    .report-card {
        padding: 16px;
    }

    .visitor-chart {
        padding-left: 0;
        padding-right: 0;
    }

    .mini-kpi {
        padding: 13px;
    }
}