@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazirmatn-Regular.woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lalezar';
    src: url('../fonts/Lalezar-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tanha';
    src: url('../fonts/Tanha.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Shabnam';
    src: url('../fonts/Shabnam.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Samim';
    src: url('../fonts/Samim.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sahel';
    src: url('../fonts/Sahel.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Parastoo';
    src: url('../fonts/Parastoo.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nahid';
    src: url('../fonts/Nahid.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gandom';
    src: url('../fonts/Gandom.ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

.Vazir {
    font-family: Vazir, serif;
}

.Gandom {
    font-family: Gandom, serif;
}

.Nahid {
    font-family: Nahid, serif;
}

.Parastoo {
    font-family: Parastoo, serif;
}

.Sahel {
    font-family: Sahel, serif;
}

.Samim {
    font-family: Samim, serif;
}

.Shabnam {
    font-family: Shabnam, serif;
}

.Tanha {
    font-family: Tanha, serif;
}

.Lale {
    font-family: Lalezar, serif;
}

.sidenav-toggler-inner {
    position: relative;
    display: inline-block;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.responsive-text {
    font-size: clamp(10px, 2vw, 22px);; /* حداقل- تغییر ۲ وی ام - حداکثر */
}

.responsive-h {
    font-size: clamp(24px, 2vw, 34px);; /* حداقل- تغییر ۲ وی ام - حداکثر */
}
/* تشویق */
#positive-tab,
#positive-tab.active,
#tab-positive,
#tab-positive.active,
.positive {
    color: #198754 !important;       /* سبز */
}
#positive-tab i { color: inherit !important; }
#positive-tab.active {
    background-color: #d1e7dd !important; /* سبز خیلی روشن */
}

/* تذکر */
#negative-tab,
#negative-tab.active,
#tab-negative,
#tab-negative.active,
.negative {
    color: #dc3545 !important;       /* قرمز */
}
#negative-tab i { color: inherit !important; }
#negative-tab.active {
    background-color: #f8d7da !important; /* قرمز خیلی روشن */
}

/* تأخیر */
#delay-tab,
#delay-tab.active,
#tab-delay,
#tab-delay.active,
.delay {
    color: #fd7e14 !important;       /* نارنجی */
}
#delay-tab i { color: inherit !important; }
#delay-tab.active {
    background-color: #ffe5d0 !important; /* نارنجی خیلی روشن */
}

/* غیبت */
#absence-tab,
#absence-tab.active,
#tab-absence,
#tab-absence.active,
.absence {
    color: #0dcaf0 !important;       /* آبی */
}
#absence-tab i { color: inherit !important; }
#absence-tab.active {
    background-color: #cff4fc !important; /* آبی خیلی روشن */
}

/* خروج */
#exit-tab,
#exit-tab.active,
#tab-exit,
#tab-exit.active,
.exit {
    color: #8d8787 !important;       /* قرمز پررنگ (danger) */
}
#exit-tab i { color: inherit !important; }
#exit-tab.active {
    background-color: #f8d7da !important; /* قرمز خیلی روشن */
}

@media (max-width: 576px) {
    .nav-tabs .nav-link {
        padding: 0.25rem 0.25rem; /* خیلی جمع‌وجورتر */
        font-size: 0.875rem;      /* متن کوچک‌تر */
    }
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;      /* قطر دایره */
    height: 2.5rem;
    border-radius: 50%; /* گرد */
    border: 2px solid currentColor; /* کادر هم‌رنگ متن/آیکون */
}

.clickable-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-3px); /* کمی بالا رفتن کارت */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* سایه ملایم */
}

.sidenav-no-scroll {
    overflow-y: visible !important;
}

.chart-container {
    padding: 5px;
}
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 992px) {
    #leftLogo {
        font-size: 36px;
    }
}
/* کانتینر اسپینر position:absolute روی آواتار */
.spinner {
    display: none; /* ابتدا مخفی */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px; /* برای مرکز شدن روی آواتار */
    border: 4px solid rgb(255, 255, 255);
    border-top-color: #0047d3; /* رنگ اسپینر */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.editable-class {
    min-width: 50px;
    display: inline-block;
}
.editable-class:focus {
    outline: 1px solid #007bff;
    border-radius: 2px;
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.spinner-frame {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #dc3545;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.mySpinner {
    width: 50px;
    height: 50px;
    animation: counter-spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes counter-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}