/* تنظیمات عمومی */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

/* سبک برای تم روشن */
.light-theme {
    background-color: #f5f5f5;
    color: #333;
}

.light-theme h2, .light-theme .summary-box h3 {
    color: #333;

}

/* سبک برای تم تاریک */
.dark-theme {
    background-color: #333;
    color: #f5f5f5;
}

.dark-theme h2, .dark-theme .summary-box h3 {
    color: #f5f5f5;
}

/* طراحی ردیفی برای نمایش درآمدها */
#summaries {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    direction: rtl;
}

.summary-box {
    border-radius: 8px;
    padding: 20px;
    width: 22%;
    min-width: 200px;
    box-sizing: border-box;
    text-align: center;
    transition: background-color 0.3s ease; /* برای تغییر پس‌زمینه */
}

/* برای تم روشن */
.light-theme .summary-box {
    background-color: #d3d3d3; /* پس‌زمینه روشن */
}

/* برای تم تاریک */
.dark-theme .summary-box {
    background-color: #444; /* پس‌زمینه تیره */
}


canvas {
    margin-top: 10px;
    width: 100%;
    height: 160px;
}

.income-summary {
    margin-top: 10px;
    color: #ffcc00;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* دکمه تغییر تم */
.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #333; /* پیش‌فرض بک‌گراند تیره برای تم روشن */
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
}

/* حالت‌های تم روشن و تاریک برای دکمه */
.light-theme .theme-toggle-btn {
    background-color: #333; /* پس‌زمینه تیره */
    color: #fff; /* آیکن ماه سفید */
}

.dark-theme .theme-toggle-btn {
    background-color: #fff; /* پس‌زمینه روشن */
    color: #333; /* آیکن خورشید تیره */
}

/* آیکن ماه و خورشید */
.theme-toggle-btn i {
    font-size: 20px;
}

/* نمایش مناسب برای عرض‌های بین 769 تا 864 پیکسل */
@media (min-width: 769px) and (max-width: 864px) {
    #summaries {
        flex-direction: row;
        gap: 10px;
    }

    .summary-box {
        width: 24%;
        padding: 10px;
    }

    canvas {
        height: 140px;
    }
}

/* نمایش برای تبلت‌ها (حداکثر ۱۰۲۴ پیکسل) */
@media (max-width: 1024px) {
    #summaries {
        justify-content: center;
    }

    .summary-box {
        width: 45%;
        margin-bottom: 20px;
    }

    canvas {
        height: 160px;
    }
}

/* نمایش برای موبایل‌ها */
@media (max-width: 768px) {
    #summaries {
        flex-direction: column;
        align-items: center;
    }

    .summary-box {
        width: 90%;
        margin-bottom: 20px;
    }

    canvas {
        height: 150px;
    }

    .theme-toggle-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* نمایش برای موبایل‌های کوچک‌تر */
@media (max-width: 480px) {
    .theme-toggle-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .summary-box {
        width: 100%;
        margin-bottom: 15px;
    }
}


/* تنظیم رنگ و فاصله برای متن‌های مالی */
.income-summary div {
    margin-bottom: 15px; /* فاصله‌ی عمومی برای هر آیتم */
}

#dailyTotalIncome, #weeklyTotalIncome, #monthlyTotalIncome, #yearlyTotalIncome, #lastDayTotalIncome, #lastWeekTotalIncome, #lastMonthTotalIncome, #lastYearTotalIncome {
    font-size: 18px;
    font-weight: bold;
    color: #fffb00; /* رنگ طلایی برای مجموع درآمد */
    margin-bottom: 25px; /* فاصله بیشتر برای مجموع درآمد */
    text-shadow: 1px 1px 30px rgba(80, 83, 0, 0.9);
}

#dailyImamTax, #weeklyImamTax, #monthlyImamTax, #yearlyImamTax, #lastDayImamTax, #lastWeekImamTax, #lastMonthImamTax, #lastYearImamTax {
    color: #01a491; /* رنگ سبز یشمی برای حق امام */
    margin-bottom: 20px; /* فاصله‌ی مناسب با حق مادر */
    text-shadow: 1px 1px 30px rgba(0, 121, 107, 0.9);
}

#dailyMotherTax, #weeklyMotherTax, #monthlyMotherTax, #yearlyMotherTax, #lastDayMotherTax, #lastWeekMotherTax, #lastMonthMotherTax, #lastYearMotherTax {
    color: #d52355; /* رنگ بنفش گلبهی برای حق مادر */
    margin-bottom: 25px; /* فاصله‌ی بیشتر با باقی‌مانده */
    text-shadow: 1px 1px 30px rgba(183, 25, 71, 0.9);
}

#dailyRemainingAmount, #weeklyRemainingAmount, #monthlyRemainingAmount, #yearlyRemainingAmount, #lastDayRemainingAmount, #lastWeekRemainingAmount, #lastMonthRemainingAmount, #lastYearRemainingAmount {
    color: #1e88e5; /* رنگ آبی برای باقی‌مانده */
    font-weight: bold;
    text-shadow: 1px 1px 30px rgba(18, 96, 162, 0.9);
}






#transactionsControl {
    margin: 20px 0;
    text-align: center;
    direction: rtl;
}

#transactionsTableContainer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}







/* تنظیمات عمومی جدول */
.transactions-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    direction: rtl;
    font-size: 14px; /* اندازه فونت کوچک‌تر برای موبایل */
}

.transactions-table th, .transactions-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    word-wrap: break-word; /* جلوگیری از خروج متن از جدول */
}

.transactions-table th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
}

.dark-theme .transactions-table th {
    background-color: #444;
    color: #f5f5f5;
}

/* تنظیمات واکنش‌گرا برای جدول */
@media (max-width: 768px) {
    .transactions-table {
        font-size: 12px; /* کوچک‌تر کردن فونت برای موبایل */
    }

    .transactions-table th, .transactions-table td {
        padding: 5px; /* کاهش فاصله سلول‌ها */
    }
}

/* تنظیمات برای موبایل‌های کوچک‌تر */
@media (max-width: 480px) {
    #transactionsControl {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .transactions-table {
        font-size: 10px; /* کاهش بیشتر اندازه فونت */
    }

    .transactions-table th, .transactions-table td {
        padding: 4px; /* کاهش بیشتر فاصله سلول‌ها */
    }
}

/* افزودن حاشیه در اطراف جدول */
#transactionsTableContainer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    padding: 10px; /* حاشیه برای نمایش مناسب در موبایل */
    overflow-x: auto; /* امکان اسکرول افقی برای جدول */
}