:root {
    --bs-primary: #167665;
    --bs-primary-rgb: 22, 118, 101;
    --bs-link-color: #126957;
    --bs-link-hover-color: #0d5145;
    --bs-body-font-family: "DM Sans", sans-serif;
    --bs-body-color: #243632;
    --bs-body-bg: #f3f6f5;
    --bs-border-color: #e1e9e6;
    --app-ink: #18332f;
    --app-muted: #71817c;
    --app-green: #167665;
    --app-amber: #ad6b24;
    --app-blue: #386fa2;
    --app-coral: #bd584c;
}

body {
    min-width: 320px;
    color: var(--app-ink);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.brand,
.dashboard-stat-value {
    font-family: "Manrope", "DM Sans", sans-serif;
}

.app {
    min-height: 100vh;
}

.sidebar {
    --bs-offcanvas-width: 17rem;
    width: 17rem;
    min-height: 100vh;
    color: var(--app-ink);
    border-color: var(--bs-border-color) !important;
}

.brand {
    min-height: 2.25rem;
    color: var(--app-ink);
    letter-spacing: 0;
}

.brand-logo {
    background: var(--app-green) !important;
}

.nav-title {
    color: #84928d !important;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .08em;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.55rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    color: #51615c !important;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav-link:hover {
    background: #f1f6f4;
    color: var(--app-green) !important;
}

.sidebar .nav-link.active {
    background: #e8f3ef;
    color: #126957 !important;
    font-weight: 700;
}

.sidebar .nav-link .icon {
    width: 1.35rem;
    text-align: center;
    font-size: 1rem;
}

.topbar {
    position: sticky;
    z-index: 1020;
    top: 0;
    min-height: 4.25rem;
}

.topbar > div:first-of-type strong {
    color: var(--app-ink);
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: .95rem;
}

.main {
    width: 100%;
    min-width: 0;
}

.main > .vstack {
    width: min(100%, 96rem);
    margin-inline: auto;
}

.page-header,
.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 .25rem;
}

.page-header h1,
.dashboard-welcome h1 {
    margin: 0 0 .35rem;
    color: var(--app-ink);
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: 0;
}

.page-header p,
.dashboard-welcome > div > p:last-child {
    margin: 0;
    color: var(--app-muted);
}

.dashboard-welcome {
    padding: .25rem 0 .75rem;
}

.dashboard-eyebrow {
    color: var(--app-green);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.dashboard-date {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    background: #fff;
    color: #52635e;
    font-size: .85rem;
    font-weight: 600;
}

.card,
section.card {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 2px 9px rgba(25, 55, 47, .035);
}

.card-header {
    padding: 1rem 1.2rem;
    border-bottom-color: #edf1ef;
    background: #fff;
}

.card-header h2,
.card-header h3,
.card-header h4 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1rem;
    font-weight: 700;
}

.card-body {
    padding: 1.2rem;
}

.btn {
    --bs-btn-border-radius: .45rem;
    --bs-btn-font-weight: 600;
    min-height: 2.4rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn-primary {
    --bs-btn-bg: var(--app-green);
    --bs-btn-border-color: var(--app-green);
    --bs-btn-hover-bg: #105f51;
    --bs-btn-hover-border-color: #105f51;
    --bs-btn-active-bg: #0e5549;
    --bs-btn-active-border-color: #0e5549;
    box-shadow: 0 2px 5px rgba(22, 118, 101, .14);
}

.btn-ghost {
    --bs-btn-color: #43534e;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d8e1dd;
    --bs-btn-hover-color: #155f51;
    --bs-btn-hover-bg: #f1f7f4;
    --bs-btn-hover-border-color: #c8dad3;
    display: inline-flex;
    border: 1px solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--bs-btn-hover-border-color);
    background: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

.btn-sm {
    min-height: 2rem;
    padding: .35rem .65rem;
    font-size: .8rem;
}

.form-group {
    min-width: 0;
    margin-bottom: 1rem;
}

.form-group > label,
form > label,
.form-label {
    display: block;
    margin-bottom: .4rem;
    color: #384a44;
    font-size: .84rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 2.65rem;
    border-color: #d9e2de;
    border-radius: .45rem;
    background-color: #fff;
    color: var(--app-ink);
    font-size: .9rem;
}

textarea.form-control {
    min-height: 6rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #62a897;
    box-shadow: 0 0 0 .2rem rgba(22, 118, 101, .13);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

table.table {
    --bs-table-color: #34443f;
    --bs-table-striped-bg: #f8faf9;
    margin-bottom: 0;
    font-size: .875rem;
    vertical-align: middle;
}

table.table thead th {
    padding: .8rem .85rem;
    border-bottom: 1px solid #dfe8e4;
    background: #f4f7f6;
    color: #5d6b66;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    vertical-align: middle;
}

table.table tbody td {
    padding: .75rem .85rem;
    border-color: #edf1ef;
}

table.table tbody tr:hover > * {
    --bs-table-bg-state: #f4f9f7;
}

table.table td .btn,
table.table td form {
    vertical-align: middle;
}

.dataTables_wrapper {
    padding: 1rem 1.1rem;
    color: var(--app-muted);
    font-size: .84rem;
}

.dataTables_wrapper .row {
    align-items: center;
    row-gap: .75rem;
}

.dataTables_wrapper .form-control,
.dataTables_wrapper .form-select {
    min-height: 2.25rem;
    font-size: .84rem;
}

.dataTables_wrapper .page-link {
    color: var(--app-green);
}

.dataTables_wrapper .page-item.active .page-link {
    border-color: var(--app-green);
    background: var(--app-green);
    color: #fff;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #eef2f0;
    color: #56645e;
    font-size: .75rem;
    font-weight: 700;
}

.pill-success {
    background: #e5f4ed;
    color: #17684e;
}

.pill-warning {
    background: #fff2dc;
    color: #8a5b14;
}

.pill-danger {
    background: #fbe9e7;
    color: #a23f36;
}

.pill-info {
    background: #e8f1f8;
    color: #315e83;
}

.dashboard-stat {
    border-top: 3px solid #d5e8e1;
    transition: transform .15s ease, box-shadow .15s ease;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(25, 55, 47, .08);
}

.dashboard-stat .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 10rem;
    padding: 1.15rem 1.2rem 1rem;
}

.dashboard-stat-label {
    max-width: 13rem;
    margin: 0 0 .5rem;
    color: #697973;
    font-size: .85rem;
    font-weight: 600;
}

.dashboard-stat-value {
    margin: 0;
    color: var(--app-ink);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-stat-icon,
.dashboard-quick-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .65rem;
    font-size: 1.2rem;
}

.dashboard-stat-icon--green {
    background: #e4f2ed;
    color: var(--app-green);
}

.dashboard-stat-icon--amber {
    background: #fff1dc;
    color: var(--app-amber);
}

.dashboard-stat-icon--blue {
    background: #e8f0f8;
    color: var(--app-blue);
}

.dashboard-stat-icon--coral {
    background: #faeae7;
    color: var(--app-coral);
}

.dashboard-stat-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.2rem;
    color: var(--app-green);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-stat-link:hover {
    color: #0e5549;
    text-decoration: underline;
}

.dashboard-quick-access {
    padding-top: .6rem;
}

.dashboard-quick-access h2 {
    color: var(--app-ink);
    font-weight: 750;
}

.dashboard-quick-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: #fff;
    color: var(--app-ink);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.dashboard-quick-link:hover {
    transform: translateY(-1px);
    border-color: #b8d5cb;
    background: #fbfdfc;
    color: var(--app-green);
}

.dashboard-quick-link > span:nth-child(2) {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.dashboard-quick-link strong {
    font-size: .87rem;
}

.dashboard-quick-link small {
    color: var(--app-muted);
    font-size: .76rem;
}

.dashboard-quick-icon {
    background: #edf5f2;
    color: var(--app-green);
}

.alert {
    border-radius: .55rem;
}

.leave-calendar-card .card-header {
    padding: 1.15rem 1.25rem;
}

.leave-calendar-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.leave-calendar-title,
.leave-calendar-controls,
.leave-calendar-legend,
.leave-month-picker {
    display: flex;
    align-items: center;
}

.leave-calendar-title {
    justify-content: space-between;
    gap: 1rem;
}

.leave-section-kicker {
    margin: 0 0 .3rem;
    color: var(--app-green);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.leave-calendar-title h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.1rem;
    font-weight: 750;
}

.leave-calendar-month {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .35rem 0 0;
    color: #53645e;
    font-size: .9rem;
    font-weight: 700;
    text-transform: capitalize;
}

.leave-calendar-month span {
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: none;
}

.leave-calendar-legend {
    flex-wrap: wrap;
    gap: .85rem;
    color: #687771;
    font-size: .76rem;
}

.leave-calendar-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.leave-legend-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
}

.leave-legend-dot--approved {
    background: #23805e;
}

.leave-legend-dot--pending {
    background: #d28a31;
}

.leave-calendar-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .55rem;
}

.leave-month-picker {
    gap: .4rem;
}

.leave-month-picker .form-control {
    width: 9rem;
}

.leave-calendar-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.leave-calendar-table {
    width: 100%;
    min-width: 49rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.leave-calendar-table thead th {
    height: 2.5rem;
    padding: .55rem .65rem;
    border: 1px solid #e6ece9;
    background: #f4f7f6;
    color: #687771;
    font-size: .72rem;
    font-weight: 750;
    text-align: left;
    text-transform: uppercase;
}

.leave-calendar-table thead th:first-child {
    border-top-left-radius: .45rem;
}

.leave-calendar-table thead th:last-child {
    border-top-right-radius: .45rem;
}

.leave-calendar-day {
    width: 14.285%;
    height: 7.2rem;
    padding: .45rem;
    border: 1px solid #e6ece9;
    background: #fff;
    vertical-align: top;
}

.leave-calendar-day--empty {
    background: #f8faf9;
}

.leave-calendar-day.is-today {
    background: #f1f8f5;
}

.leave-calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    margin-bottom: .25rem;
    border-radius: 50%;
    color: #4f615a;
    font-size: .8rem;
    font-weight: 700;
}

.leave-calendar-day.is-today .leave-calendar-date {
    background: var(--app-green);
    color: #fff;
}

.leave-calendar-events {
    display: grid;
    gap: .25rem;
}

.leave-calendar-event {
    display: grid;
    min-width: 0;
    padding: .25rem .35rem;
    overflow: hidden;
    border-left: 2px solid #23805e;
    border-radius: .2rem;
    background: #eaf5ef;
    color: #235c47;
    line-height: 1.2;
}

.leave-calendar-event--en_attente {
    border-left-color: #d28a31;
    background: #fff5e4;
    color: #80541a;
}

.leave-calendar-event strong,
.leave-calendar-event small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leave-calendar-event strong {
    font-size: .68rem;
    font-weight: 700;
}

.leave-calendar-event small {
    margin-top: .1rem;
    font-size: .62rem;
}

.leave-calendar-more {
    padding-inline: .35rem;
    color: #64736d;
    font-size: .66rem;
    font-weight: 700;
}

.leave-form-wide {
    grid-column: 1 / -1;
}

.leave-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.leave-actions form,
.leave-delete-form {
    display: inline-flex;
    margin: 0;
}

.leave-inline-form {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 11rem;
}

.leave-inline-form .form-control {
    min-width: 6rem;
}

.leave-grant-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6ece9;
}

.leave-balance-submit {
    display: flex;
    align-items: flex-end;
}

.leave-admin-row,
.leave-policy-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    align-items: center;
    gap: .55rem;
}

.leave-admin-row .form-control,
.leave-policy-row .form-control {
    min-width: 0;
}

.leave-delete-form {
    margin-top: .45rem;
}

.leave-check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #53645e;
    font-size: .82rem;
    white-space: nowrap;
}

.overtime-period-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    background: #fff;
}

.overtime-period-bar h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.1rem;
    font-weight: 750;
    text-transform: capitalize;
}

.overtime-period-bar > div:first-child > span {
    display: inline-block;
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .8rem;
}

.overtime-period-controls,
.overtime-month-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.overtime-month-picker .form-control {
    width: 9rem;
}

.overtime-summary .dashboard-stat-value small {
    color: #71817c;
    font-family: "DM Sans", sans-serif;
    font-size: .9rem;
    font-weight: 650;
}

.overtime-summary-note {
    display: block;
    margin-top: 1rem;
    color: var(--app-muted);
    font-size: .76rem;
}

.overtime-calendar-heading,
.overtime-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.overtime-calendar-heading h2,
.overtime-table-heading h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.05rem;
    font-weight: 750;
}

.overtime-calendar-heading .leave-section-kicker,
.overtime-table-heading .leave-section-kicker {
    margin-bottom: .25rem;
}

.overtime-calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    color: #687771;
    font-size: .76rem;
}

.overtime-calendar-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.leave-legend-dot--refused {
    background: #bd584c;
}

.overtime-calendar-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.overtime-calendar-table {
    width: 100%;
    min-width: 49rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.overtime-calendar-table thead th {
    height: 2.5rem;
    padding: .55rem .65rem;
    border: 1px solid #e6ece9;
    background: #f4f7f6;
    color: #687771;
    font-size: .72rem;
    font-weight: 750;
    text-align: left;
    text-transform: uppercase;
}

.overtime-calendar-day {
    width: 14.285%;
    height: 7.5rem;
    padding: .45rem;
    border: 1px solid #e6ece9;
    background: #fff;
    vertical-align: top;
}

.overtime-calendar-day--empty {
    background: #f8faf9;
}

.overtime-calendar-day.is-today {
    background: #f1f8f5;
}

.overtime-calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    margin-bottom: .2rem;
    border-radius: 50%;
    color: #4f615a;
    font-size: .8rem;
    font-weight: 700;
}

.overtime-calendar-day.is-today .overtime-calendar-date {
    background: var(--app-green);
    color: #fff;
}

.overtime-day-total {
    display: block;
    margin-bottom: .25rem;
    color: var(--app-ink);
    font-size: .72rem;
    font-weight: 800;
}

.overtime-day-total small {
    color: var(--app-muted);
    font-size: .62rem;
    font-weight: 500;
}

.overtime-calendar-events {
    display: grid;
    gap: .25rem;
}

.overtime-calendar-event {
    display: grid;
    min-width: 0;
    padding: .25rem .35rem;
    overflow: hidden;
    border-left: 2px solid #23805e;
    border-radius: .2rem;
    background: #eaf5ef;
    color: #235c47;
    line-height: 1.2;
}

.overtime-calendar-event--en_attente {
    border-left-color: #d28a31;
    background: #fff5e4;
    color: #80541a;
}

.overtime-calendar-event--refuse {
    border-left-color: #bd584c;
    background: #fbecea;
    color: #883f38;
}

.overtime-calendar-event strong,
.overtime-calendar-event small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overtime-calendar-event strong {
    font-size: .66rem;
    font-weight: 700;
}

.overtime-calendar-event small {
    margin-top: .1rem;
    font-size: .62rem;
}

.overtime-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.overtime-submit {
    display: flex;
    align-items: flex-end;
}

.overtime-import-form .form-control[type="file"] {
    min-height: auto;
    padding: .55rem;
}

.overtime-table-heading {
    padding: 1rem 1.2rem;
}

.overtime-record-count {
    padding: .3rem .6rem;
    border-radius: 999px;
    background: #edf4f1;
    color: #426158;
    font-size: .75rem;
    font-weight: 700;
}

.overtime-hours-cell {
    color: var(--app-ink) !important;
    font-weight: 750;
    white-space: nowrap;
}

.overtime-rate-badge,
.overtime-status {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.overtime-rate-badge {
    background: #edf2f7;
    color: #45617c;
}

.overtime-rate-badge--130 {
    background: #e5f4ed;
    color: #17684e;
}

.overtime-rate-badge--160 {
    background: #fff2dc;
    color: #8a5b14;
}

.overtime-rate-badge--200 {
    background: #faeae7;
    color: #a23f36;
}

.overtime-status--en_attente {
    background: #fff2dc;
    color: #8a5b14;
}

.overtime-status--approuve {
    background: #e5f4ed;
    color: #17684e;
}

.overtime-status--refuse {
    background: #fbe9e7;
    color: #a23f36;
}

.overtime-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.overtime-actions form {
    display: inline-flex;
}

.payroll-stat .dashboard-stat-value {
    font-size: 1.75rem;
}

.payroll-stat-value--compact {
    max-width: 12rem;
    overflow-wrap: anywhere;
    font-size: 1.2rem !important;
    line-height: 1.3;
}

.payroll-calendar-card {
    scroll-margin-top: 5.5rem;
}

.payroll-calendar-heading,
.payroll-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.payroll-calendar-heading h2,
.payroll-section-heading h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.05rem;
    font-weight: 750;
}

.payroll-calendar-heading > div:first-child > p:last-child {
    margin: .3rem 0 0;
    color: var(--app-muted);
    font-size: .85rem;
    font-weight: 650;
    text-transform: capitalize;
}

.payroll-calendar-controls,
.payroll-month-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.payroll-month-picker .form-control {
    width: 9rem;
}

.payroll-calendar-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.payroll-calendar-table {
    width: 100%;
    min-width: 49rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.payroll-calendar-table thead th {
    height: 2.5rem;
    padding: .55rem .65rem;
    border: 1px solid #e6ece9;
    background: #f4f7f6;
    color: #687771;
    font-size: .72rem;
    font-weight: 750;
    text-align: left;
    text-transform: uppercase;
}

.payroll-calendar-day {
    width: 14.285%;
    height: 6.2rem;
    padding: .45rem;
    border: 1px solid #e6ece9;
    background: #fff;
    vertical-align: top;
}

.payroll-calendar-day--empty {
    background: #f8faf9;
}

.payroll-calendar-day.is-today {
    background: #f1f8f5;
}

.payroll-calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    margin-bottom: .2rem;
    border-radius: 50%;
    color: #4f615a;
    font-size: .8rem;
    font-weight: 700;
}

.payroll-calendar-day.is-today .payroll-calendar-date {
    background: var(--app-green);
    color: #fff;
}

.payroll-calendar-events {
    display: grid;
    gap: .25rem;
}

.payroll-calendar-event {
    display: block;
    padding: .25rem .35rem;
    overflow: hidden;
    border-left: 2px solid #4380a7;
    border-radius: .2rem;
    background: #edf4f8;
    color: #355f78;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-calendar-event--payment {
    border-left-color: #d28a31;
    background: #fff5e4;
    color: #80541a;
}

.payroll-calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .9rem;
    color: #687771;
    font-size: .76rem;
}

.payroll-calendar-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.payroll-section-nav {
    position: sticky;
    z-index: 10;
    top: 4.75rem;
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    padding: .45rem;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 3px 12px rgba(25, 55, 47, .04);
    scrollbar-width: thin;
}

.payroll-section-nav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.2rem;
    padding: .4rem .65rem;
    border-radius: .4rem;
    color: #52635e;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.payroll-section-nav a:hover {
    background: #edf5f2;
    color: var(--app-green);
}

.payroll-section {
    scroll-margin-top: 8rem;
}

.payroll-section-heading > span {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 600;
}

.payroll-section .table-wrap {
    padding: .35rem .85rem .85rem;
}

.payroll-section .table-wrap:has(.payroll-create-row) {
    padding-bottom: 1rem;
}

.payroll-inline-row {
    display: grid;
    align-items: center;
    gap: .5rem;
    min-width: 48rem;
    padding: .35rem;
}

.payroll-group-row {
    grid-template-columns: 1fr 1.4fr 1fr .55fr auto;
}

.payroll-calendar-row {
    grid-template-columns: 1.2fr 1.2fr .7fr .7fr auto;
}

.payroll-rubric-row {
    grid-template-columns: .8fr 1.2fr 1.3fr auto auto .55fr auto;
}

.payroll-assignment-row {
    grid-template-columns: 1.4fr 1.25fr .75fr .55fr .9fr .9fr auto auto;
}

.payroll-period-fields {
    grid-template-columns: 1.15fr .9fr .9fr .9fr auto auto;
}

.payroll-period-row {
    display: grid;
    gap: .55rem;
    min-width: 60rem;
}

.payroll-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.payroll-delete,
.payroll-inline-action {
    display: inline-flex;
    margin: .25rem;
}

.payroll-create-row {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px dashed #cddbd5;
    border-radius: .55rem;
    background: #f8fbf9;
}

.payroll-period-create {
    grid-template-columns: 1.1fr .9fr .9fr .9fr auto;
}

.payroll-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #52635e;
    font-size: .78rem;
    white-space: nowrap;
}

.payroll-status {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #eef2f0;
    color: #56645e;
    font-size: .73rem;
    font-weight: 700;
    white-space: nowrap;
}

.payroll-status--ouvert,
.payroll-status--brouillon {
    background: #fff2dc;
    color: #8a5b14;
}

.payroll-status--valide {
    background: #e8f1f8;
    color: #315e83;
}

.payroll-status--ferme,
.payroll-status--paye {
    background: #e5f4ed;
    color: #17684e;
}

.payroll-slip-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
}

.payroll-slip-summary > div {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: #fff;
}

.payroll-slip-summary span {
    color: var(--app-muted);
    font-size: .78rem;
}

.payroll-slip-summary strong {
    color: var(--app-ink);
    font-size: 1rem;
}

.module-section-nav {
    position: sticky;
    z-index: 10;
    top: 4.75rem;
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    padding: .45rem;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 3px 12px rgba(25, 55, 47, .04);
    scrollbar-width: thin;
}

.module-section-nav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.2rem;
    padding: .4rem .65rem;
    border-radius: .4rem;
    color: #52635e;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.module-section-nav a:hover {
    background: #edf5f2;
    color: var(--app-green);
}

.onboarding-list,
.onboarding-admin {
    display: grid;
    gap: 1rem;
    scroll-margin-top: 8rem;
}

.onboarding-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.onboarding-section-heading h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.1rem;
    font-weight: 750;
}

.onboarding-section-heading > span {
    color: var(--app-muted);
    font-size: .8rem;
}

.onboarding-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed #cbd9d3;
    border-radius: .55rem;
    color: var(--app-muted);
    text-align: center;
}

.onboarding-panel,
.onboarding-template {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 2px 9px rgba(25, 55, 47, .035);
}

.onboarding-panel-heading,
.onboarding-meta,
.onboarding-template-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
}

.onboarding-panel-heading h3 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1rem;
    font-weight: 750;
}

.onboarding-panel-heading p,
.onboarding-meta {
    margin: .3rem 0 0;
    color: var(--app-muted);
    font-size: .78rem;
}

.onboarding-status,
.onboarding-task-state {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #eef2f0;
    color: #56645e;
    font-size: .73rem;
    font-weight: 700;
    white-space: nowrap;
}

.onboarding-status--en_cours,
.onboarding-task-state--en_cours {
    background: #fff2dc;
    color: #8a5b14;
}

.onboarding-status--termine,
.onboarding-task-state--termine {
    background: #e5f4ed;
    color: #17684e;
}

.onboarding-status--annule {
    background: #fbe9e7;
    color: #a23f36;
}

.onboarding-progress {
    height: .45rem;
    margin: .85rem 0 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e9efec;
}

.onboarding-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-green);
    transition: width .3s ease;
}

.onboarding-task-list {
    display: grid;
    gap: .55rem;
}

.onboarding-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #edf1ef;
    border-radius: .5rem;
    background: #fbfcfb;
}

.onboarding-task-copy {
    min-width: 0;
}

.onboarding-task-copy strong {
    color: #34443f;
    font-size: .86rem;
}

.onboarding-task-copy p {
    margin: .15rem 0;
    color: #586a63;
    font-size: .8rem;
}

.onboarding-task-copy > span {
    display: block;
    color: var(--app-muted);
    font-size: .72rem;
}

.onboarding-task-status {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.onboarding-task-status .form-control {
    width: auto;
    min-width: 8rem;
}

.onboarding-cancel,
.onboarding-delete {
    display: flex;
    justify-content: flex-end;
    margin-top: .65rem;
}

.onboarding-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
}

.onboarding-template-heading {
    margin-bottom: .8rem;
    color: var(--app-green);
    font-size: .78rem;
    font-weight: 700;
}

.onboarding-template-edit,
.onboarding-launch,
.onboarding-create-model {
    display: grid;
    gap: .7rem;
}

.onboarding-template-edit label,
.onboarding-launch label,
.onboarding-create-model label {
    display: grid;
    gap: .35rem;
    color: #43534e;
    font-size: .8rem;
    font-weight: 650;
}

.onboarding-launch {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid #e8eeeb;
}

.onboarding-launch h4 {
    margin: 0;
    color: var(--app-ink);
    font-size: .88rem;
    font-weight: 750;
}

.onboarding-create-model {
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
    align-items: end;
    padding: 1rem;
    border: 1px dashed #cbd9d3;
    border-radius: .65rem;
    background: #f8fbf9;
}

.onboarding-task-edit-row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.4fr .7fr 1fr auto;
    align-items: center;
    gap: .5rem;
    min-width: 56rem;
    padding: .35rem;
}

.onboarding-create-task {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px dashed #cbd9d3;
    border-radius: .55rem;
    background: #f8fbf9;
}

.onboarding-stat .dashboard-stat-value {
    font-size: 1.75rem;
}

.fiscal-stat {
    color: inherit;
    text-decoration: none;
}

.fiscal-stat:hover {
    border-color: #b8d5cb;
    color: inherit;
}

.fiscal-inline-row {
    display: grid;
    align-items: center;
    gap: .5rem;
    min-width: 56rem;
    padding: .35rem;
}

.fiscal-bracket-row {
    grid-template-columns: .8fr .75fr 1fr 1fr .7fr 1fr auto;
}

.fiscal-contribution-row {
    grid-template-columns: .8fr 1.1fr .8fr .8fr 1fr .55fr .95fr auto;
}

.fiscal-exchange-row {
    grid-template-columns: .8fr .8fr 1fr 1fr auto;
}

.fiscal-create-row {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px dashed #cbd9d3;
    border-radius: .55rem;
    background: #f8fbf9;
}

.fiscal-check-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .75rem 1rem;
}

.fiscal-check-form label {
    display: grid;
    gap: .35rem;
    color: #43534e;
    font-size: .82rem;
    font-weight: 650;
}

.fiscal-check-form button {
    justify-self: start;
}

.fiscal-warnings,
.fiscal-ok {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: .5rem;
}

.fiscal-warnings {
    border: 1px solid #f2d9aa;
    background: #fff8e9;
    color: #76541d;
}

.fiscal-warnings ul {
    margin: .4rem 0 0;
    padding-left: 1.25rem;
}

.fiscal-ok {
    border: 1px solid #c8e4d5;
    background: #edf8f1;
    color: #17684e;
}

.fiscal-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .65rem;
    margin-top: 1rem;
}

.fiscal-results > div {
    display: grid;
    gap: .3rem;
    padding: .8rem;
    border: 1px solid #e6ece9;
    border-radius: .5rem;
    background: #fbfcfb;
}

.fiscal-results span {
    color: var(--app-muted);
    font-size: .75rem;
}

.fiscal-results strong {
    color: var(--app-ink);
    font-size: .95rem;
}

.fiscal-results small {
    color: var(--app-muted);
    font-size: .7rem;
}

.users-stat .dashboard-stat-value {
    font-size: 1.75rem;
}

.user-filter-form {
    display: grid;
    grid-template-columns: minmax(13rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto;
    align-items: end;
    gap: .75rem;
}

.user-filter-form label,
.user-admin-form label {
    display: grid;
    gap: .35rem;
    color: #43534e;
    font-size: .8rem;
    font-weight: 650;
}

.user-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.user-create-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .85rem 1rem;
}

.user-create-form .user-active-check {
    display: flex;
    align-items: center;
}

.user-list-section,
.user-create-section,
.user-filter-card {
    scroll-margin-top: 8rem;
}

.user-name-cell strong {
    color: var(--app-ink);
}

.user-actions-cell {
    min-width: 12rem;
}

.user-row-details > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .6rem;
    border: 1px solid #d8e1dd;
    border-radius: .4rem;
    background: #fff;
    color: #43534e;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 650;
    list-style: none;
    white-space: nowrap;
}

.user-row-details > summary::-webkit-details-marker {
    display: none;
}

.user-row-details > summary:hover,
.user-row-details[open] > summary {
    border-color: #b8d5cb;
    background: #f1f7f4;
    color: var(--app-green);
}

.user-row-admin-panel {
    display: grid;
    gap: .75rem;
    min-width: 28rem;
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid #e1e9e6;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(25, 55, 47, .06);
}

.user-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .65rem;
}

.user-edit-form .user-active-check {
    display: flex;
    align-items: center;
}

.user-password-form {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto;
    align-items: end;
    gap: .65rem;
    padding-top: .7rem;
    border-top: 1px solid #e6ece9;
}

.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.report-stat .dashboard-stat-value {
    font-size: 1.35rem;
}

.report-stat-value--compact {
    max-width: 13rem;
    overflow-wrap: anywhere;
    font-size: 1rem !important;
    line-height: 1.35;
}

.report-toolbar,
.report-results {
    scroll-margin-top: 8rem;
}

.report-filter-card .card-header h2,
.report-export-card .card-header h2,
.report-results .card-header h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1rem;
    font-weight: 750;
}

.report-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .75rem 1rem;
}

.report-filter-form label,
.report-export-form label {
    display: grid;
    gap: .35rem;
    color: #43534e;
    font-size: .82rem;
    font-weight: 650;
}

.report-filter-form .report-filter-type {
    grid-column: 1 / -1;
}

.report-filter-form > button {
    justify-self: start;
}

.report-export-card .card-body > p {
    margin: 0 0 .9rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.report-export-form {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    align-items: end;
    gap: .65rem;
}

.report-results .table-wrap {
    padding: .35rem .85rem .85rem;
}

.report-results .table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

.report-results .table th,
.report-results .table td {
    max-width: 22rem;
    overflow-wrap: anywhere;
}

.report-results .dataTables_wrapper {
    width: 100%;
    min-width: 0;
}

.report-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: .25rem;
    border-radius: 999px;
    background: #edf4f1;
    color: #426158;
    font-size: .68rem;
    font-weight: 750;
}

.report-empty {
    display: grid;
    justify-items: center;
    gap: .3rem;
    padding: 2.2rem 1rem;
    color: var(--app-muted);
    text-align: center;
}

.report-empty > i {
    margin-bottom: .25rem;
    color: #8b9b95;
    font-size: 1.5rem;
}

.report-empty strong {
    color: var(--app-ink);
    font-size: .95rem;
}

.report-empty span {
    font-size: .8rem;
}

@media (max-width: 767.98px) {
    .module-section-nav {
        top: 4.25rem;
    }

    .onboarding-create-model,
    .user-filter-form,
    .user-create-form,
    .user-edit-form,
    .user-password-form,
    .fiscal-check-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-row-admin-panel {
        min-width: min(28rem, 72vw);
    }

    .report-filter-form,
    .report-export-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-filter-form .report-filter-type {
        grid-column: auto;
    }

    .report-stat .card-body {
        min-height: 7.25rem;
        padding: .8rem;
    }

    .report-stat .dashboard-stat-label {
        font-size: .75rem;
    }

    .report-stat .dashboard-stat-value {
        font-size: 1rem;
    }

    .report-stat-value--compact {
        font-size: .82rem !important;
    }

    .report-stat .dashboard-stat-icon {
        width: 2rem;
        height: 2rem;
        font-size: .95rem;
    }

    .report-results .table-wrap {
        padding-inline: .4rem;
    }
}

.leave-balance-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.leave-balance-item {
    display: grid;
    gap: .2rem;
    min-width: 8rem;
    padding: .75rem .9rem;
    border: 1px solid #e5ece8;
    border-radius: .5rem;
    background: #f8faf9;
}

.leave-balance-item span {
    color: var(--app-muted);
    font-size: .78rem;
}

.leave-balance-item strong {
    color: var(--app-ink);
    font-size: 1.05rem;
}

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .grid-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .card-body {
        padding: 1rem;
    }

    .dashboard-welcome {
        align-items: flex-start;
    }

    .dashboard-stat .card-body {
        min-height: 8.75rem;
    }

    .leave-calendar-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .leave-calendar-heading {
        padding-inline: 1rem;
    }

    .leave-calendar-controls {
        gap: .4rem;
    }

    .leave-calendar-controls .btn {
        min-height: 2.1rem;
    }

    .leave-month-picker .form-control {
        width: 8.25rem;
    }

    .leave-today-link {
        padding-inline: .5rem;
    }

    .overtime-period-bar {
        align-items: flex-start;
    }

    .overtime-period-controls {
        width: 100%;
    }

    .overtime-calendar-heading,
    .overtime-table-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .overtime-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .payroll-calendar-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-calendar-controls {
        width: 100%;
    }

    .payroll-section-nav {
        top: 4.25rem;
    }

    .payroll-section .table-wrap {
        padding-inline: .5rem;
    }
}

.portal-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.portal-heading {
    align-items: center;
    margin-bottom: 0;
}

.portal-page .portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.portal-profile-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: #fff;
}

.portal-profile-card > div {
    display: grid;
    align-content: center;
    gap: .3rem;
    min-width: 0;
    min-height: 5rem;
    padding: .8rem 1rem;
    border-right: 1px solid #edf1ef;
    border-bottom: 1px solid #edf1ef;
}

.portal-profile-card > div span {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-profile-card > div strong {
    overflow-wrap: anywhere;
    color: var(--app-ink);
    font-size: .9rem;
    font-weight: 650;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    min-width: 0;
}

.portal-page .portal-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: #fff;
}

.portal-page .portal-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #edf1ef;
}

.portal-page .portal-section-heading h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: .98rem;
    font-weight: 750;
}

.portal-page .portal-section-heading a {
    flex: 0 0 auto;
    color: var(--app-green);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.portal-page .portal-section-heading a:hover {
    text-decoration: underline;
}

.portal-page .portal-section .table-wrap {
    padding: .25rem .65rem .65rem;
}

.portal-onboarding {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem 1rem;
    padding: 1rem;
}

.portal-onboarding > strong {
    color: var(--app-ink);
}

.portal-onboarding > span {
    color: var(--app-muted);
    font-size: .82rem;
}

.portal-onboarding .onboarding-progress {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .portal-profile-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .portal-heading {
        align-items: flex-start;
    }

    .portal-page .portal-actions {
        width: 100%;
    }

    .portal-page .portal-actions .btn {
        flex: 1 1 auto;
    }

    .portal-profile-card > div {
        padding-inline: .75rem;
    }

    .portal-page .portal-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}