@font-face {
    font-family:'Vazir-Bold-FD';/*تعریف یک نام برای فونت*/
    src:url('FONTS/Vazir-Bold-FD.eot');/*اکسپلورر 9 به بعد*/
    src:local('Vazir-Bold-FD'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('Vazir-Bold-FD'),/*برای برخی از مرورگرها مانند سافاری*/
        url('./FONTS/Vazir-Bold-FD.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('./FONTS/Vazir-Bold-FD.woff') format('woff'),/*مرورگر های جدید*/
        url('./FONTS/Vazir-Bold-FD.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('./FONTS/Vazir-Bold-FD.svg#Vazir-Bold-FD') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
} 

     @font-face {
    font-family:'BTitrBold';/*تعریف یک نام برای فونت*/
    src:url('FONTS/BTitrBold.eot');/*اکسپلورر 9 به بعد*/
    src:local('BTitrBold'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local(' BTitrBold'),/*برای برخی از مرورگرها مانند سافاری*/
        url('FONTS/BTitrBold.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('FONTS/BTitrBold.woff') format('woff'),/*مرورگر های جدید*/
        url('FONTS/BTitrBold.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('FONTS/BTitrBold.svg#BTitrBold') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
} 
     @font-face {
    font-family:'Yekan';/*تعریف یک نام برای فونت*/
    src:url('FONTS/Yekan.eot');/*اکسپلورر 9 به بعد*/
    src:local('Yekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('Yekan'),/*برای برخی از مرورگرها مانند سافاری*/
        url('FONTS/Yekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('FONTS/Yekan.woff') format('woff'),/*مرورگر های جدید*/
        url('FONTS/Yekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('FONTS/Yekan.svg#BTitrBold') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}
body {
    font-family: Vazir-Bold-FD, sans-serif;
    direction: rtl;
    background:#f5f5fa;
    margin:0;
    padding:0;
}
h2, h3 {
    color:#4b3f72;
    margin:20px 0;
    text-align:center;
}
.container {
    width:95%;
    margin:20px auto;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

.card {
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
    min-width:300px;
    flex:1 1 300px;
    transition:0.3s;
}
.card:hover { box-shadow:0 10px 25px rgba(0,0,0,0.15); }

.card h3 {
    text-align:center;
    margin-bottom:15px;
    color:#4b3f72;
}

.filter-form {
    display:flex;
    justify-content:center;
    gap:10px;
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
    flex-wrap:wrap;
    margin-bottom:20px;
}
.filter-form input, .filter-form button {
    padding:8px 12px;
    border-radius:6px;
    border:1px solid #ccc;
}
.filter-form button {
    border:none;
    background:#6f5fa7;
    color:#fff;
    cursor:pointer;
    transition:0.3s;
}
.filter-form button:hover { background:#5b4a99; }

.export-btn {
    margin:5px;
    padding:10px 15px;
    border:none;
    border-radius:8px;
    background:#4b3f72;
    color:#fff;
    cursor:pointer;
    transition:0.3s;
}
.export-btn:hover { background:#3a3160; }

.table {
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}
.table th, .table td {
    padding:10px;
    border-bottom:1px solid #eee;
    text-align:center;
}
.table th { background:#6f5fa7; color:#fff; }
.table tr:last-child td { border-bottom:none; }

.bar-chart {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    height:180px;
    border-bottom:2px solid #6f5fa7;
    padding-bottom:40px; /* فضای کافی برای لیبل زیر خط */
    margin-top:10px;
}
.bar-chart div {
    position:relative;
    width:12%;
    margin:0 2px;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    animation: rise 1s ease-out forwards;
    height:0; /* شروع انیمیشن از 0 */
}
.bar-chart span.value {
    font-size:12px;
    font-weight:bold;
    color:#111; /* تیره برای خوانایی */
    position:absolute;
    top:-20px;
}
.bar-chart span.label {
    font-size:12px;
    color:#333;
    text-align:center;
    margin-top:4px;
    position:absolute;
    bottom:-25px; /* کاملاً زیر خط */
    width:100%;
}


@keyframes rise {
    0% { height:0; }
    100% { height: var(--final-height); }
}

.total-visits {
    font-size:48px;
    font-weight:bold;
    color:#6f5fa7;
    text-align:center;
    margin:20px 0;
}
.total-label {
    text-align:center;
    color:#333;
    margin-bottom:10px;
    font-size:18px;
}

.charts-container {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

/* رنگ های متفاوت میله‌ها */
.bar-color-0 { background:#4caf50; }
.bar-color-1 { background:#2196f3; }
.bar-color-2 { background:#ff9800; }
.bar-color-3 { background:#9c27b0; }
.bar-color-4 { background:#f44336; }
.bar-color-5 { background:#00bcd4; }
.bar-color-6 { background:#ffc107; }
.bar-color-7 { background:#8bc34a; }
.bar-color-8 { background:#e91e63; }
.bar-color-9 { background:#3f51b5; }
.bar-color-10 { background:#795548; }
.bar-color-11 { background:#607d8b; }






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

.donut-chart {
    width:200px;
    height:200px;
    border-radius:50%;
    position:relative;
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.2), inset 10px 10px 20px rgba(255,255,255,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee; /* رنگ پیش فرض */
}

.donut-center {
    width:80px;
    height:80px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:18px;
    color:#4b3f72;
    box-shadow: -3px -3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.1);
}

.donut-legend {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.legend-item {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}

.legend-color {
    width:20px;
    height:20px;
    border-radius:50%;
    display:inline-block;
}