.fi-badge {
    width: fit-content;
}

.attendance-pattern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.attendance-pattern__empty {
    border: 1px dashed rgb(209 213 219);
    border-radius: 0.5rem;
    color: rgb(107 114 128);
    font-size: 0.875rem;
    padding: 1.5rem 1rem;
}

.attendance-pattern__scroll {
    overflow-x: auto;
}

.attendance-pattern__axis-grid {
    display: grid;
    gap: 0.25rem 0.5rem;
    grid-template-columns: max-content max-content;
    grid-template-rows: 1rem max-content;
}

.attendance-pattern__month-spacer {
    grid-column: 1;
    grid-row: 1;
    width: 2rem;
}

.attendance-pattern__months {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: start;
    display: flex;
    gap: 0.75rem;
}

.attendance-pattern__month {
    color: rgb(75 85 99);
    font-size: 0.75rem;
    line-height: 1rem;
    min-width: 2.5rem;
}

.attendance-pattern__month-group {
    display: grid;
    gap: 0.25rem;
    grid-template-rows: 1rem max-content;
}

.attendance-pattern__month-days {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 0.75rem);
    gap: 0.25rem;
}

.attendance-pattern__weekdays {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: repeat(7, 0.75rem);
    gap: 0.25rem;
}

.attendance-pattern__weekday {
    color: rgb(75 85 99);
    font-size: 0.75rem;
    line-height: 0.75rem;
    text-align: right;
}

.attendance-pattern__cell {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
    box-shadow: inset 0 0 0 1px currentColor;
}

.attendance-pattern__cell--none {
    color: rgb(229 231 235);
    background: rgb(243 244 246);
}

.attendance-pattern__cell--blank {
    box-shadow: none;
}

.attendance-pattern__cell--unmarked {
    color: rgb(56 189 248);
    background: rgb(224 242 254);
}

.attendance-pattern__cell--full {
    color: rgb(21 128 61);
    background: rgb(21 128 61);
}

.attendance-pattern__cell--good {
    color: rgb(34 197 94);
    background: rgb(34 197 94);
}

.attendance-pattern__cell--warning {
    color: rgb(252 211 77);
    background: rgb(252 211 77);
}

.attendance-pattern__cell--poor {
    color: rgb(251 146 60);
    background: rgb(251 146 60);
}

.attendance-pattern__cell--absent {
    color: rgb(244 63 94);
    background: rgb(244 63 94);
}

.attendance-pattern__legend {
    align-items: center;
    color: rgb(107 114 128);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.75rem;
    justify-content: space-between;
}

.attendance-pattern__legend-scale {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attendance-course-pattern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attendance-course-pattern__scroll {
    overflow-x: auto;
}

.attendance-course-pattern__axis-grid {
    display: grid;
    gap: 0.5rem 0.75rem;
    grid-template-columns: max-content max-content;
}

.attendance-course-pattern__month-spacer {
    min-width: 8rem;
}

.attendance-course-pattern__months {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(var(--attendance-course-week-count), 0.75rem);
}

.attendance-course-pattern__month {
    color: rgb(75 85 99);
    font-size: 0.75rem;
    line-height: 1rem;
    min-width: 2.5rem;
}

.attendance-course-pattern__course {
    align-self: center;
    color: rgb(17 24 39);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 8rem;
}

.attendance-course-pattern__weeks {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(var(--attendance-course-week-count), 0.75rem);
}

.attendance-course-pattern__cell {
    border-radius: 0.125rem;
    box-shadow: inset 0 0 0 1px currentColor;
    height: 0.75rem;
    width: 0.75rem;
}

.attendance-course-pattern__day--unmarked {
    color: rgb(7 89 133);
    background: rgb(224 242 254);
}

.attendance-course-pattern__day--full {
    color: white;
    background: rgb(21 128 61);
}

.attendance-course-pattern__day--good {
    color: white;
    background: rgb(34 197 94);
}

.attendance-course-pattern__day--warning {
    color: rgb(69 26 3);
    background: rgb(254 240 138);
}

.attendance-course-pattern__day--poor {
    color: rgb(67 20 7);
    background: rgb(253 186 116);
}

.attendance-course-pattern__day--absent {
    color: white;
    background: rgb(244 63 94);
}

.attendance-summary {
    display: grid;
    gap: 0.75rem;
}

.attendance-summary__item {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    padding: 1rem;
}

.attendance-summary__label {
    color: rgb(107 114 128);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.attendance-summary__value {
    color: rgb(17 24 39);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.attendance-summary__value--present {
    color: rgb(4 120 87);
}

.attendance-summary__value--absent {
    color: rgb(225 29 72);
}

.attendance-summary__value--unmarked {
    color: rgb(3 105 161);
}

.attendance-summary__value--status {
    font-size: 1.125rem;
}

@media (min-width: 640px) {
    .attendance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .attendance-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.dark .attendance-pattern__empty {
    border-color: rgb(55 65 81);
    color: rgb(156 163 175);
}

.dark .attendance-pattern__cell--none {
    color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.dark .attendance-course-pattern__course,
.dark .attendance-summary__value {
    color: white;
}

.dark .attendance-summary__item {
    border-color: rgb(55 65 81);
}

.dark .attendance-summary__label,
.dark .attendance-pattern__legend,
.dark .attendance-pattern__month,
.dark .attendance-pattern__weekday,
.dark .attendance-course-pattern__month {
    color: rgb(156 163 175);
}