.employee-portal-settings {
    margin-top: 28px;
    padding: 28px !important;
    border-top: 4px solid #2563eb !important;
}

.employee-portal-header { margin-bottom: 0; }
.employee-portal-header h2 { margin: 3px 0 0; color: #172033; font-size: 20px; letter-spacing: -.025em; }
.employee-portal-header p { max-width: 620px; line-height: 1.5; }
.employee-portal-form { display: grid; gap: 26px; }
.employee-portal-group { display: grid; gap: 14px; }
.employee-portal-group + .employee-portal-group { padding-top: 22px; border-top: 1px solid #e5edf7; }
.employee-portal-group-heading h3 { margin: 0; color: #20314c; font-size: 14px; font-weight: 800; }
.employee-portal-group-heading p { margin: 4px 0 0; color: #718096; font-size: 11px; line-height: 1.5; }
.employee-portal-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

.employee-portal-option {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    gap: 12px;
    align-items: center;
    min-height: 78px;
    margin: 0;
    padding: 14px;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #fbfcfe;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.employee-portal-option:hover { border-color: #a9c8f5; background: #fff; transform: translateY(-1px); }
.employee-portal-option:has(input[type=checkbox]:checked) { border-color: #60a5fa; background: linear-gradient(145deg, #eff6ff, #f8fbff); box-shadow: 0 0 0 3px rgba(37,99,235,.07); }
.employee-portal-option:focus-within, .employee-portal-time-option:focus-within { outline: 3px solid rgba(37,99,235,.2); outline-offset: 2px; }
.employee-portal-option > input { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.employee-portal-option-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #2563eb; background: #eaf2ff; }
.employee-portal-option-icon .icon { width: 19px; height: 19px; }
.employee-portal-option-copy { display: grid; gap: 3px; min-width: 0; }
.employee-portal-option-copy strong { color: #263449; font-size: 12px; line-height: 1.3; }
.employee-portal-option-copy small { color: #718096; font-size: 10px; line-height: 1.4; }
.employee-portal-option-check { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #cbd9e9; border-radius: 50%; color: transparent; background: #fff; }
.employee-portal-option-check .icon { width: 13px; height: 13px; }
.employee-portal-option:has(input:checked) .employee-portal-option-check { border-color: #2563eb; color: #fff; background: #2563eb; box-shadow: 0 4px 10px rgba(37,99,235,.2); }

.employee-portal-time-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.employee-portal-time-option { position: relative; display: flex; gap: 11px; align-items: center; min-height: 66px; margin: 0; padding: 13px 16px; border: 1px solid #dbe5f1; border-radius: 13px; background: #fbfcfe; cursor: pointer; }
.employee-portal-time-option:has(input:checked) { border-color: #60a5fa; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.07); }
.employee-portal-time-option > input { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; }
.employee-portal-time-indicator { width: 18px; height: 18px; flex: none; border: 1px solid #b9c9dc; border-radius: 50%; background: #fff; }
.employee-portal-time-option:has(input:checked) .employee-portal-time-indicator { border: 5px solid #2563eb; }
.employee-portal-time-option > span:last-child { display: grid; gap: 3px; }
.employee-portal-time-option strong { color: #263449; font-size: 11px; }
.employee-portal-time-option small { color: #718096; font-size: 10px; }
.employee-portal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid #e5edf7; }
.employee-portal-actions > span { color: #718096; font-size: 10px; }
.employee-portal-actions .button { min-width: 180px; }
.employee-coworker { padding: 4px 8px; color: #64748b; font-size: 12px; line-height: 1.4; }
.employee-coworker-heading { padding: 8px 8px 0; color: #475569; font-size: 11px; font-weight: 700; }
.employee-overview:has(.employee-status-card:only-child), .employee-panel:has(.timeline:only-child) { grid-template-columns: minmax(0, 1fr); }

.manager-billing-permission { margin-top: 4px; }
.premium-form-screen .field .manager-billing-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 12px; align-items: center; min-height: 86px; margin: 12px 0 0; padding: 15px; border: 1px solid #dbe5f1; border-radius: 14px; background: #fbfcfe; cursor: pointer; }
.manager-billing-card:has(input[type=checkbox]:checked) { border-color: #60a5fa !important; background: #eff6ff !important; box-shadow: 0 0 0 3px rgba(37,99,235,.07); }
.manager-billing-card > input { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; }
.manager-billing-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #2563eb; background: #eaf2ff; }
.manager-billing-icon .icon { width: 19px; height: 19px; }
.manager-billing-copy { display: grid; gap: 4px; }
.manager-billing-copy strong { color: #263449; font-size: 12px; }
.manager-billing-copy small { color: #718096; font-size: 10px; line-height: 1.45; }
.manager-billing-check { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #cbd9e9; border-radius: 50%; color: transparent; background: #fff; }
.manager-billing-check .icon { width: 13px; height: 13px; }
.manager-billing-card:has(input:checked) .manager-billing-check { border-color: #2563eb; color: #fff; background: #2563eb; }

/* Employee-only time recorder */
.employee-private-rcp {
    display: grid;
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
}

.employee-private-rcp-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 156px;
    padding: 28px 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 15%, rgba(96, 165, 250, .34), transparent 28%),
        linear-gradient(130deg, #07152f 0%, #123a7e 62%, #1d4ed8 100%);
    box-shadow: 0 24px 55px rgba(15, 45, 99, .18);
}

.employee-private-rcp-heading::after {
    content: '';
    position: absolute;
    right: -52px;
    bottom: -100px;
    width: 250px;
    height: 250px;
    border: 34px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}

.employee-private-rcp-heading > * { position: relative; z-index: 1; }
.employee-private-rcp-heading .eyebrow { margin: 0 0 6px; color: #9bc4ff; }
.employee-private-rcp-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 43px); letter-spacing: -.045em; }
.employee-private-rcp-heading p:not(.eyebrow) { max-width: 720px; margin: 9px 0 0; color: #d3e2f7; font-size: 12px; line-height: 1.65; }
.employee-private-rcp-secure { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(5, 18, 43, .3); font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.employee-private-rcp-secure .icon { width: 16px; height: 16px; }

.employee-private-rcp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
.employee-private-rcp-console,
.employee-private-rcp-history { border: 1px solid #dce7f5; border-radius: 21px; background: #fff; box-shadow: 0 16px 42px rgba(25, 55, 99, .08); }
.employee-private-rcp-console { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 26px; }

.employee-private-rcp-status { display: flex; align-items: center; gap: 14px; min-width: 0; }
.employee-private-rcp-pulse { position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 16px; color: #64748b; background: #eef2f7; }
.employee-private-rcp-pulse .icon { width: 22px; height: 22px; }
.employee-private-rcp.is-working .employee-private-rcp-pulse { color: #047857; background: #dff8ed; }
.employee-private-rcp.is-working .employee-private-rcp-pulse::after { content: ''; position: absolute; inset: -4px; border: 2px solid rgba(16, 185, 129, .32); border-radius: 19px; animation: employee-rcp-pulse 1.8s ease-out infinite; }
.employee-private-rcp.is-break .employee-private-rcp-pulse { color: #b45309; background: #fff3d6; }
@keyframes employee-rcp-pulse { 0% { opacity: 1; transform: scale(.88); } 75%, 100% { opacity: 0; transform: scale(1.18); } }

.employee-private-rcp-status > div { display: grid; gap: 2px; min-width: 0; }
.employee-private-rcp-status small,
.employee-private-rcp-time > span { color: #8492a7; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.employee-private-rcp-status strong { color: #15233d; font-size: 19px; letter-spacing: -.025em; }
.employee-private-rcp-status div > span { overflow: hidden; color: #617089; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }

.employee-private-rcp-time { display: grid; justify-items: end; align-content: center; min-width: 170px; }
.employee-private-rcp-time strong { color: #10203d; font-size: clamp(28px, 3vw, 38px); font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.employee-private-rcp-time small { color: #76859b; font-size: 10px; }

.employee-private-rcp-running { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; align-items: center; padding: 16px 18px; border: 1px solid #c8dcff; border-radius: 15px; color: #164995; background: linear-gradient(135deg, #f1f7ff, #e8f1ff); }
.employee-private-rcp-running > span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.employee-private-rcp-running .icon { width: 15px; height: 15px; }
.employee-private-rcp-running strong { grid-row: 1 / 3; grid-column: 2; font-size: 22px; font-variant-numeric: tabular-nums; }
.employee-private-rcp-running small { color: #6480aa; font-size: 10px; }

.employee-private-rcp-start-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(250px, .85fr); gap: 14px; align-items: end; padding-top: 4px; }
.employee-private-rcp-start-form label { display: grid; gap: 7px; color: #34445d; font-size: 10px; font-weight: 800; }
.employee-private-rcp-start-form select { width: 100%; min-height: 55px; padding: 0 14px; border: 1px solid #d5e1f1; border-radius: 14px; color: #182944; background: #f8fbff; font: inherit; outline: none; }
.employee-private-rcp-start-form select:focus { border-color: #6097f5; box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); }
.employee-private-rcp-location { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 11px 15px; border: 1px solid #d5e1f1; border-radius: 14px; background: #f8fbff; }
.employee-private-rcp-location > span { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 10px; color: #2563eb; background: #e8f1ff; }
.employee-private-rcp-location .icon { width: 17px; height: 17px; }
.employee-private-rcp-location > div { display: grid; gap: 2px; min-width: 0; }
.employee-private-rcp-location small { color: #8492a7; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.employee-private-rcp-location strong { overflow: hidden; color: #1c2b43; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.employee-private-rcp-unavailable { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 11px; padding: 15px 17px; border: 1px solid #f0cf8a; border-radius: 14px; color: #79510b; background: #fff9e9; }
.employee-private-rcp-unavailable > .icon { width: 19px; height: 19px; flex: none; }
.employee-private-rcp-unavailable > span { display: grid; gap: 3px; }
.employee-private-rcp-unavailable strong { font-size: 11px; }
.employee-private-rcp-unavailable small { color: #957329; font-size: 9px; line-height: 1.5; }
.employee-private-rcp-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-private-rcp-actions form { min-width: 0; }
.employee-private-rcp-actions form:only-child { grid-column: 1 / -1; }

.employee-private-rcp-action { display: flex; align-items: center; justify-content: flex-start; gap: 13px; width: 100%; min-height: 62px; padding: 12px 17px; border: 0; border-radius: 15px; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 11px 24px rgba(15, 45, 99, .13); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.employee-private-rcp-action:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 15px 28px rgba(15, 45, 99, .18); }
.employee-private-rcp-action:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 3px; }
.employee-private-rcp-action > .icon { width: 24px; height: 24px; flex: none; }
.employee-private-rcp-action > span { display: grid; gap: 2px; }
.employee-private-rcp-action strong { font-size: 12px; }
.employee-private-rcp-action small { color: rgba(255, 255, 255, .78); font-size: 9px; }
.employee-private-rcp-action.is-start { background: linear-gradient(135deg, #059669, #047857); }
.employee-private-rcp-action.is-break { background: linear-gradient(135deg, #f59e0b, #d97706); }
.employee-private-rcp-action.is-resume { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.employee-private-rcp-action.is-stop { background: linear-gradient(135deg, #ef4444, #c62828); }
.employee-private-rcp-console > footer { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; padding-top: 16px; border-top: 1px solid #e7edf5; color: #718198; font-size: 10px; line-height: 1.55; }
.employee-private-rcp-console > footer .icon { width: 16px; height: 16px; flex: none; color: #3974d8; }

.employee-private-rcp-history { overflow: hidden; }
.employee-private-rcp-history > header { display: flex; gap: 12px; align-items: center; padding: 21px 22px; border-bottom: 1px solid #e8eef6; }
.employee-private-rcp-history > header > span { display: grid; width: 39px; height: 39px; flex: none; place-items: center; border-radius: 12px; color: #2864c5; background: #edf4ff; }
.employee-private-rcp-history > header .icon { width: 18px; height: 18px; }
.employee-private-rcp-history h3 { margin: 0; color: #1b2941; font-size: 14px; }
.employee-private-rcp-history p { margin: 3px 0 0; color: #8290a5; font-size: 9px; line-height: 1.4; }
.employee-private-rcp-events { display: grid; padding: 6px 20px 14px; }
.employee-private-rcp-events article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf1f6; }
.employee-private-rcp-events article:last-child { border-bottom: 0; }
.employee-private-rcp-events article > div { display: grid; gap: 3px; min-width: 0; }
.employee-private-rcp-events article strong { color: #26364f; font-size: 11px; }
.employee-private-rcp-events article small { overflow: hidden; color: #8592a5; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.employee-private-rcp-events time { color: #52647e; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.employee-private-rcp-events .event-dot { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #2563eb; background: #ebf3ff; }
.employee-private-rcp-events .event-dot.is-clock_out { color: #be2f2f; background: #fff0f0; }
.employee-private-rcp-events .event-dot.is-break_start { color: #a75b00; background: #fff5dc; }
.employee-private-rcp-events .event-dot.is-break_end { color: #047857; background: #e4f8ef; }
.employee-private-rcp-events .event-dot .icon { width: 14px; height: 14px; }
.employee-private-rcp-empty { display: grid; justify-items: center; gap: 6px; padding: 42px 16px; color: #8a98aa; text-align: center; }
.employee-private-rcp-empty .icon { width: 27px; height: 27px; color: #9eb2d0; }
.employee-private-rcp-empty strong { color: #4b5d76; font-size: 12px; }
.employee-private-rcp-empty span { font-size: 9px; }

/* Compact employee leave workspace */
.employee-leave-page { display: grid; gap: 16px; max-width: 1320px; margin: 0 auto; }
.employee-leave-overview { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid #dce7f5; border-radius: 20px; background: linear-gradient(135deg, #fff, #f7faff); box-shadow: 0 14px 34px rgba(25, 55, 99, .07); }
.employee-leave-overview-copy { display: flex; gap: 14px; align-items: center; min-width: 0; }
.employee-leave-overview-copy > span { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 14px; color: #2563eb; background: #eaf2ff; }
.employee-leave-overview-copy .icon { width: 21px; height: 21px; }
.employee-leave-overview-copy .eyebrow { margin: 0 0 3px; }
.employee-leave-overview-copy h2 { margin: 0; color: #14213a; font-size: 24px; letter-spacing: -.035em; }
.employee-leave-overview-copy p:last-child { margin: 4px 0 0; color: #708096; font-size: 10px; }
.employee-leave-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.employee-leave-kpis article { display: grid; align-content: center; min-height: 72px; padding: 11px 13px; border: 1px solid #e1e9f4; border-radius: 13px; background: #fff; }
.employee-leave-kpis article.is-primary { border-color: #a9c8f8; background: linear-gradient(145deg, #edf5ff, #f8fbff); }
.employee-leave-kpis span { color: #7b8aa0; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.employee-leave-kpis strong { margin-top: 4px; color: #18335f; font-size: 17px; line-height: 1.15; }
.employee-leave-kpis small { margin-top: 2px; overflow: hidden; color: #7c8ca3; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }

.employee-leave-request-panel { padding: 20px 22px; border-radius: 18px; box-shadow: 0 13px 32px rgba(25, 55, 99, .06); }
.employee-leave-request-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.employee-leave-request-heading h3 { margin: 0; color: #17233b; font-size: 16px; }
.employee-leave-request-heading p { margin: 3px 0 0; color: #7c8ba0; font-size: 10px; }
.employee-leave-request-heading > span { padding: 7px 11px; border-radius: 999px; color: #63738b; background: #f0f4f9; font-size: 9px; }
.employee-leave-compact-form { display: grid; grid-template-columns: minmax(190px, 1.25fr) repeat(2, minmax(145px, .85fr)) minmax(130px, .7fr); gap: 12px; align-items: end; }
.employee-leave-compact-form .field { min-width: 0; }
.employee-leave-compact-form label { font-size: 10px; }
.employee-leave-compact-form input,
.employee-leave-compact-form select { min-height: 43px; }
.employee-leave-compact-form .field > small { display: block; margin-top: 4px; color: #8593a6; font-size: 8px; }
.employee-leave-preview { grid-column: 1 / 3; min-height: 43px; margin: 0; padding: 11px 13px; }
.employee-leave-note { grid-column: 3; }
.employee-leave-submit { grid-column: 4; width: 100%; min-height: 43px; }

.employee-leave-balance-details { overflow: hidden; border: 1px solid #dce6f3; border-radius: 15px; background: #fff; }
.employee-leave-balance-details > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; padding: 14px 18px; color: #31425d; cursor: pointer; list-style: none; }
.employee-leave-balance-details > summary::-webkit-details-marker { display: none; }
.employee-leave-balance-details > summary > span { display: flex; align-items: center; gap: 9px; }
.employee-leave-balance-details > summary > span .icon { width: 17px; height: 17px; color: #2563eb; }
.employee-leave-balance-details > summary > small { color: #7d8ca1; font-size: 9px; }
.employee-leave-balance-details > summary > .icon { width: 17px; height: 17px; transition: transform .18s ease; }
.employee-leave-balance-details[open] > summary > .icon { transform: rotate(180deg); }
.employee-leave-balance-details > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; }
.employee-leave-balance-details article { display: grid; gap: 3px; padding: 11px 12px; border-radius: 11px; background: #f6f9fd; }
.employee-leave-balance-details article.is-remaining { color: #1458af; background: #eaf3ff; }
.employee-leave-balance-details article > span { color: #7a899d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.employee-leave-balance-details article strong { font-size: 13px; }
.employee-leave-balance-details article small { color: #7c8da4; font-size: 8px; }

.employee-leave-history-card { overflow: hidden; border: 1px solid #dce7f5; border-radius: 18px; background: #fff; box-shadow: 0 13px 32px rgba(25, 55, 99, .06); }
.employee-leave-history-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid #e7edf5; }
.employee-leave-history-card h3 { margin: 0; color: #17233b; font-size: 15px; }
.employee-leave-history-card header p { margin: 3px 0 0; color: #7c8ba0; font-size: 9px; }
.employee-leave-history-card > header > span { display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #2563eb; background: #edf4ff; font-size: 11px; font-weight: 800; }
.employee-leave-request-list { display: grid; }
.employee-leave-request-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(80px, auto) auto; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #edf1f6; }
.employee-leave-request-item:last-child { border-bottom: 0; }
.employee-leave-request-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #2563eb; background: #edf4ff; }
.employee-leave-request-icon .icon { width: 16px; height: 16px; }
.employee-leave-request-main { display: grid; gap: 2px; min-width: 0; }
.employee-leave-request-main strong { color: #26354d; font-size: 11px; }
.employee-leave-request-main span { color: #5f7089; font-size: 10px; }
.employee-leave-request-main small,
.employee-leave-request-duration small { color: #8a97a9; font-size: 8px; }
.employee-leave-request-duration { display: grid; gap: 2px; text-align: right; }
.employee-leave-request-duration strong { color: #26354d; font-size: 11px; }
.employee-leave-request-item > p { grid-column: 2 / -1; margin: -2px 0 0; padding: 8px 10px; border-radius: 9px; color: #596b84; background: #f4f7fb; font-size: 9px; }
.employee-leave-empty { display: grid; justify-items: center; gap: 5px; padding: 34px 16px; color: #8795a8; text-align: center; }
.employee-leave-empty .icon { width: 25px; height: 25px; color: #9eb2d0; }
.employee-leave-empty strong { color: #465873; font-size: 11px; }
.employee-leave-empty span { font-size: 9px; }

@media (max-width: 980px) {
    .employee-private-rcp-grid { grid-template-columns: 1fr; }
    .employee-leave-overview { grid-template-columns: 1fr; }
    .employee-leave-compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-leave-preview,
    .employee-leave-note { grid-column: 1 / 2; }
    .employee-leave-note { grid-column: 2; }
    .employee-leave-submit { grid-column: 2; }
    .employee-leave-balance-details > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .employee-portal-settings { padding: 20px !important; }
    .employee-portal-option-grid, .employee-portal-time-options { grid-template-columns: 1fr; }
    .employee-portal-actions { align-items: stretch; flex-direction: column; }
    .employee-portal-actions .button { width: 100%; }
    .employee-private-rcp-heading { align-items: flex-start; flex-direction: column; padding: 23px 21px; }
    .employee-private-rcp-secure { white-space: normal; }
    .employee-private-rcp-console { grid-template-columns: 1fr; padding: 20px; }
    .employee-private-rcp-time { justify-items: start; min-width: 0; padding-top: 18px; border-top: 1px solid #e7edf5; }
    .employee-private-rcp-running,
    .employee-private-rcp-start-form,
    .employee-private-rcp-actions,
    .employee-private-rcp-console > footer { grid-column: 1; }
    .employee-private-rcp-start-form,
    .employee-private-rcp-actions { grid-template-columns: 1fr; }
    .employee-private-rcp-actions form:only-child { grid-column: 1; }
    .employee-private-rcp-running { grid-template-columns: 1fr; }
    .employee-private-rcp-running strong { grid-row: auto; grid-column: auto; }
    .employee-private-rcp-events { padding-right: 15px; padding-left: 15px; }
    .employee-private-rcp-events article { grid-template-columns: 32px minmax(0, 1fr); }
    .employee-private-rcp-events time { grid-column: 2; }
    .employee-leave-overview,
    .employee-leave-request-panel { padding: 18px; }
    .employee-leave-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-leave-request-heading { align-items: flex-start; flex-direction: column; }
    .employee-leave-compact-form { grid-template-columns: 1fr; }
    .employee-leave-preview,
    .employee-leave-note,
    .employee-leave-submit { grid-column: 1; }
    .employee-leave-balance-details > summary { grid-template-columns: minmax(0, 1fr) 20px; }
    .employee-leave-balance-details > summary > small { display: none; }
    .employee-leave-balance-details > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-leave-request-item { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 13px 15px; }
    .employee-leave-request-duration { grid-column: 2; text-align: left; }
    .employee-leave-request-item > .badge { grid-column: 3; grid-row: 1 / 3; }
    .employee-leave-request-item > p { grid-column: 2 / -1; }
}