.home-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 44px 18px 80px;
}

.summary {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}

.summary-card {
    width: 100%;
    max-width: 650px;
    padding: 34px 24px;
    border: 1px solid #5a4521;
    border-radius: 16px;
    background: linear-gradient( 135deg, rgba(242, 184, 75, 0.055), transparent 55%), #10151b;
    text-align: center;
}

.summary-card.summary-negative {
    border-color: #553037;
}

.summary-label {
    display: block;
    margin-bottom: 15px;
    color: #d3a954;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.summary-values {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
}

.summary-values strong {
    color: #f4f6f8;
    font-size: clamp(32px, 8vw, 46px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.summary-values span {
    color: #596573;
    font-size: 26px;
}

.summary-difference {
    margin-top: 12px;
    color: #34d58c;
    font-size: 20px;
    font-weight: 800;
}

.summary-negative .summary-difference {
    color: #ff626d;
}

.summary-waiting {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.summary-waiting strong {
    color: #f4f6f8;
    font-size: clamp(25px, 7vw, 35px);
}

.summary-waiting span {
    color: #83909e;
    font-size: 13px;
}

.section-title {
    margin-bottom: 30px;
}

.section-title>span {
    display: block;
    margin-bottom: 6px;
    color: #d3a954;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.section-title h1 {
    margin: 0;
    color: #f3f5f7;
    font-size: 29px;
    letter-spacing: -0.8px;
}

.history {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.month {
    width: 100%;
}

.month-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 4px 14px;
}

.month-heading h2 {
    margin: 0;
    color: #f3f5f7;
    font-size: 23px;
    letter-spacing: -0.5px;
}

.month-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.month-hours strong {
    color: #e8ecf0;
    font-size: 14px;
}

.month-hours strong span {
    color: #63707d;
    font-weight: 400;
}

.month-hours small {
    font-size: 12px;
    font-weight: 800;
}

.month-line {
    width: 100%;
    height: 1px;
    margin-bottom: 16px;
    background: linear-gradient( 90deg, #73571f, #2a3037 28%, #20262c);
}

.weeks {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.week {
    overflow: hidden;
    border: 1px solid #232b33;
    border-radius: 10px;
    background: #0f1419;
}

.week-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 50px;
    padding: 11px 15px;
    border-bottom: 1px solid #252d35;
    background: #171c22;
}

.week-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.week-info strong {
    color: #eef1f4;
    font-size: 13px;
}

.week-info span {
    color: #8994a0;
    font-size: 11px;
    font-weight: 700;
}

.week-difference {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
}

.positive {
    color: #35d68d;
}

.negative {
    color: #ff626d;
}

.neutral {
    color: #e2e7ec;
}

.entries {
    display: flex;
    flex-direction: column;
}

.entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 16px;
    padding: 15px;
    border-top: 1px solid #1e252c;
}

.entry:first-child {
    border-top: 0;
}

.entry-date {
    grid-column: 1 / -1;
    color: #818d99;
    font-size: 11px;
    font-weight: 700;
}

.entry-location {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.entry-location strong {
    overflow: hidden;
    color: #edf0f3;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-location span {
    color: #717e8b;
    font-size: 11px;
}

.entry-role {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 9px;
    border: 1px solid #3a434d;
    border-radius: 999px;
    background: #171d23;
    color: #bbc3cc;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.role-auditeur {
    border-color: #424950;
    color: #d1d5da;
}

.role-reserviste {
    border-color: #785c27;
    background: #352a17;
    color: #edbf60;
}

.role-flow {
    border-color: #85413b;
    background: #482522;
    color: #ff756c;
}

.role-pc-man {
    border-color: #634879;
    background: #32243d;
    color: #c38ce4;
}

.role-sup {
    border-color: #38669a;
    background: #183452;
    color: #72b2f5;
}

.role-recounter {
    border-color: #7a622b;
    background: #382f1c;
    color: #e5bd63;
}

.role-908 {
    border-color: #7a602a;
    background: #352b18;
    color: #e8b955;
}

.role-leave {
    border-color: #59636d;
    background: #252c33;
    color: #b6bec7;
}

.entry-supervisor {
    color: #9aa5b0;
    font-size: 12px;
}

.entry-duration {
    align-self: end;
    justify-self: end;
    font-size: 13px;
    font-weight: 800;
}

.duration-positive {
    color: #35d68d;
}

.duration-negative {
    color: #ff626d;
}

.duration-neutral {
    color: #e8ecf0;
}

.duration-pending {
    color: #d9a84e;
    font-size: 11px;
}

.entry-908 {
    background: rgba(242, 184, 75, 0.018);
}

.entry-leave {
    background: rgba(255, 255, 255, 0.018);
}

@media (min-width: 700px) {
    .home-page {
        padding: 52px 26px 95px;
    }
    .summary-card {
        padding: 38px 30px;
    }
    .week-info {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    .entry {
        grid-template-columns: minmax(160px, 1.05fr) minmax(220px, 1.35fr) 100px minmax(150px, 1fr) 85px;
        align-items: center;
        gap: 20px;
        min-height: 58px;
        padding: 11px 16px;
    }
    .entry-date {
        grid-column: auto;
        font-size: 12px;
    }
    .entry-role {
        justify-content: flex-start;
    }
    .entry-duration {
        align-self: center;
    }
}

@media (min-width: 1100px) {
    .home-page {
        padding-top: 58px;
    }
    .summary {
        margin-bottom: 72px;
    }
    .section-title {
        margin-bottom: 36px;
    }
    .history {
        gap: 60px;
    }
    .month-heading {
        padding-right: 8px;
        padding-left: 8px;
    }
    .weeks {
        gap: 24px;
    }
    .week-heading {
        padding-right: 18px;
        padding-left: 18px;
    }
    .entry {
        padding-right: 18px;
        padding-left: 18px;
    }
    .entry:hover {
        background: #12181e;
    }
    .entry-908:hover {
        background: rgba(242, 184, 75, 0.035);
    }
}