:root {
    --institutional-blue: #258fc4;
    --institutional-blue-dark: #11658e;
    --institutional-blue-soft: #eaf6fb;
    --institutional-red: #dc2737;
    --institutional-ink: #123044;
}

.fi-body {
    background: radial-gradient(circle at 100% 0%, rgb(37 143 196 / 10%), transparent 28rem), #f7fafc;
    color: var(--institutional-ink);
    color-scheme: light;
}

.fi-main-ctn {
    background: transparent;
}

.fi-sidebar {
    background: #fff;
    border-inline-end: 1px solid rgb(37 143 196 / 16%);
    box-shadow: 8px 0 28px rgb(15 54 76 / 7%);
}

.fi-sidebar-header {
    background: #fff;
    border-bottom: 1px solid rgb(37 143 196 / 12%);
}

.fi-sidebar .fi-logo {
    filter: drop-shadow(0 3px 8px rgb(15 54 76 / 12%));
    object-fit: contain;
}

.fi-sidebar .fi-logo,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-icon-btn,
.fi-sidebar .fi-sidebar-item-icon {
    color: var(--institutional-ink);
}

.fi-sidebar .fi-sidebar-group-label {
    color: #668596;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fi-sidebar .fi-sidebar-item-button:hover {
    background: var(--institutional-blue-soft);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: #e5f4fa;
    box-shadow: inset 4px 0 0 var(--institutional-red);
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--institutional-blue-dark) !important;
}

.fi-sidebar .fi-sidebar-item-button {
    border-radius: .75rem;
    transition: background-color 150ms ease, color 150ms ease;
}

.fi-topbar {
    background: #fff !important;
}

.fi-topbar nav {
    background: #fff !important;
    border-bottom: 3px solid var(--institutional-blue);
    box-shadow: 0 6px 24px rgb(15 54 76 / 7%);
}

.fi-header-heading {
    color: var(--institutional-ink);
}

.fi-section,
.fi-ta-ctn {
    background: #fff !important;
    border-color: rgb(37 143 196 / 14%);
    box-shadow: 0 10px 30px rgb(15 54 76 / 6%);
}

.fi-simple-layout {
    background: radial-gradient(circle at 15% 15%, rgb(37 143 196 / 24%), transparent 30rem), radial-gradient(circle at 85% 85%, rgb(220 39 55 / 14%), transparent 25rem), #edf5f8;
    color-scheme: light;
}

.fi-simple-main {
    background: #fff !important;
    border-top: 4px solid var(--institutional-blue);
    box-shadow: 0 24px 70px rgb(15 54 76 / 18%);
}

.fi-simple-header .fi-logo {
    height: 8rem !important;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgb(15 54 76 / 14%));
}

.fi-simple-header-heading,
.fi-simple-header-subheading {
    color: var(--institutional-ink) !important;
}

.fi-simple-main .fi-fo-field-label,
.fi-simple-main .fi-fo-field-label-content,
.fi-simple-main .fi-link {
    color: var(--institutional-ink) !important;
}

.fi-simple-main .fi-fo-field-label-required-mark,
.fi-simple-main .fi-fo-field-wrp-error-message {
    color: var(--institutional-red) !important;
}

.fi-simple-main .fi-input-wrp {
    background: #f8fbfc !important;
    border-color: rgb(37 143 196 / 24%);
    box-shadow: 0 0 0 1px rgb(37 143 196 / 18%);
}

.fi-simple-main .fi-input,
.fi-simple-main input {
    color: var(--institutional-ink) !important;
    caret-color: var(--institutional-blue);
}

.fi-simple-main .fi-input::placeholder,
.fi-simple-main input::placeholder {
    color: #78909e !important;
}

.fi-simple-main .fi-checkbox-input {
    background-color: #fff !important;
    border-color: #9ab7c5 !important;
}

.fi-simple-main .fi-icon,
.fi-simple-main .fi-icon-btn {
    color: #607d8b !important;
}

.attendance-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.attendance-report-table-wrap {
    overflow-x: auto;
}

.attendance-report-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    color: var(--institutional-ink);
    font-size: .875rem;
}

.attendance-report-table th {
    padding: .8rem .75rem;
    background: var(--institutional-blue-soft);
    color: var(--institutional-blue-dark);
    text-align: left;
    font-weight: 650;
    border-bottom: 2px solid rgb(37 143 196 / 25%);
}

.attendance-report-table td {
    padding: .75rem;
    border-bottom: 1px solid #e5edf1;
}

.attendance-report-table tbody tr:hover td {
    background: #f8fbfc;
}

.attendance-report-badge {
    display: inline-flex;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--institutional-blue-soft);
    color: var(--institutional-blue-dark);
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}

.attendance-report-empty {
    padding: 2.5rem !important;
    color: #668596;
    text-align: center;
}