:root {
  --ink: #10272e;
  --muted: #63767b;
  --navy: #0b3039;
  --navy-2: #124552;
  --teal: #18a58f;
  --teal-dark: #0d7b6b;
  --mint: #dff6ef;
  --sky: #eaf3fb;
  --sand: #f6f5f0;
  --line: #dce5e6;
  --white: #fff;
  --danger: #c94848;
  --warning: #a96818;
  --shadow: 0 12px 35px rgba(17, 49, 56, .08);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f5f8f7;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #f5f8f7; }
a { color: var(--teal-dark); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 12px; top: -80px; padding: 10px 14px; background: #fff; z-index: 100; }
.skip-link:focus { top: 12px; }
.portal-sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; display: flex; flex-direction: column; padding: 28px 20px; color: white; background: linear-gradient(165deg, #0b3039 0%, #0d3e49 60%, #0b333d 100%); z-index: 10; }
.portal-brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.portal-brand strong, .portal-brand small { display: block; }
.portal-brand strong { font-size: 17px; letter-spacing: -.02em; }
.portal-brand small { color: #a9c2c7; font-size: 11px; margin-top: 2px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--teal); color: white; font-weight: 800; font-size: 20px; box-shadow: 0 8px 25px rgba(24, 165, 143, .28); }
.portal-nav { display: grid; gap: 6px; margin-top: 52px; }
.portal-nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; color: #c8d9dc; border-radius: 12px; font-size: 14px; font-weight: 650; }
.portal-nav a span { display: grid; place-items: center; width: 23px; font-size: 19px; }
.portal-nav a:hover, .portal-nav a.active { color: white; background: rgba(255,255,255,.1); }
.portal-nav a.active { box-shadow: inset 3px 0 0 var(--teal); }
.sidebar-person { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid rgba(255,255,255,.13); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
.sidebar-person-profile { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 5px; margin: -5px; border-radius: 11px; color: white; }
.sidebar-person-profile:hover, .sidebar-person-profile:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.sidebar-person strong, .sidebar-person small { display: block; max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-person strong { font-size: 13px; }.sidebar-person small { color: #9bb7bc; font-size: 11px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dff6ef; color: var(--teal-dark); font-weight: 800; }
.icon-button { border: 0; color: #b8cdd1; background: transparent; font-size: 18px; cursor: pointer; }
.portal-page { min-height: 100vh; margin-left: 264px; }
.portal-header { height: 94px; padding: 20px clamp(24px, 4vw, 54px); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 40; overflow: visible; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.portal-header h1 { font-size: 24px; margin: 2px 0 0; letter-spacing: -.035em; }
.portal-header-actions { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }.notification-menu { position: relative; }.notification-menu > summary { width: 42px; height: 42px; display: grid; place-items: center; position: relative; list-style: none; border: 1px solid var(--line); border-radius: 50%; color: var(--teal-dark); background: white; cursor: pointer; font-size: 22px; }.notification-menu > summary::-webkit-details-marker { display: none; }.notification-menu > summary strong { min-width: 18px; height: 18px; display: grid; place-items: center; position: absolute; right: -5px; top: -5px; padding: 0 4px; border: 2px solid white; border-radius: 10px; color: white; background: var(--danger); font-size: 8px; }.notification-menu[open] > summary { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,165,143,.12); }.notification-menu-panel { width: min(390px,calc(100vw - 28px)); max-height: min(620px,calc(100dvh - 110px)); overflow: auto; position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 22px 60px rgba(10,39,46,.2); }.notification-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }.notification-menu-head h2 { margin: 3px 0 0; font-size: 17px; }.notification-menu-head > span { padding: 5px 8px; border-radius: 10px; color: var(--teal-dark); background: var(--mint); font-size: 9px; font-weight: 800; }.notification-menu-list { display: grid; }.notification-menu-item { margin: 0; border-bottom: 1px solid #edf1f1; }.notification-menu-item button { width: 100%; display: grid; grid-template-columns: 9px minmax(0,1fr); align-items: start; gap: 10px; padding: 14px 17px; border: 0; color: inherit; background: white; cursor: pointer; text-align: left; }.notification-menu-item button:hover { background: #f7faf9; }.notification-menu-item.unread button { background: #f1faf7; }.notification-menu-item strong, .notification-menu-item small, .notification-menu-item time { display: block; }.notification-menu-item strong { font-size: 12px; }.notification-menu-item small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.notification-menu-item time { margin-top: 5px; color: #8b999d; font-size: 8px; }.notification-dot { width: 8px; height: 8px; display: block; margin-top: 4px; border-radius: 50%; background: #8ca0a4; }.notification-dot.info { background: #3c8190; }.notification-dot.success { background: var(--teal); }.notification-dot.warning { background: #d39433; }.notification-dot.urgent { background: var(--danger); }.notification-menu-empty { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); font-size: 11px; }.notification-menu-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--mint); }.notification-menu-empty p { margin: 0; }.notification-menu-all { display: block; padding: 13px 17px; text-align: center; font-size: 10px; font-weight: 800; }
.section-tabs { min-height: 54px; display: flex; align-items: end; gap: 6px; overflow-x: auto; padding: 8px clamp(24px, 4vw, 54px) 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.7); scrollbar-width: thin; }
.section-tabs a { flex: 0 0 auto; min-height: 45px; display: inline-flex; align-items: center; padding: 0 13px; border-bottom: 3px solid transparent; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.section-tabs a:hover { color: var(--teal-dark); }.section-tabs a.active { color: var(--navy); border-bottom-color: var(--teal); }
.eyebrow { margin: 0; color: var(--teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.portal-main { width: min(1240px, 100%); margin: 0 auto; padding: 34px clamp(24px, 4vw, 54px) 64px; }
.mode-banner { margin: 16px clamp(24px, 4vw, 54px) 0; padding: 10px 14px; display: flex; gap: 12px; border: 1px solid #f2d7a8; border-radius: 12px; background: #fff8e9; color: #76501c; font-size: 13px; }
.flash-stack { margin: 16px clamp(24px, 4vw, 54px) 0; display: grid; gap: 8px; }
.flash { padding: 12px 15px; border: 1px solid #bbdcd3; border-radius: 12px; background: #ebf9f5; color: #125d51; font-size: 14px; }
.flash.danger { border-color: #efc4c4; background: #fff0f0; color: #9a2929; }
.welcome-card { min-height: 190px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; border-radius: 24px; background: linear-gradient(120deg, #0c3943, #126471); color: white; box-shadow: var(--shadow); }
.welcome-card:after { content: ""; position: absolute; right: -40px; top: -100px; width: 300px; height: 300px; border: 46px solid rgba(255,255,255,.055); border-radius: 50%; }
.welcome-card > * { position: relative; z-index: 1; }.welcome-card .eyebrow { color: #91e3d3; }.welcome-card h2 { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.045em; margin: 7px 0; }.welcome-card p:last-child { color: #c0d9dd; margin: 0; }
.welcome-actions { display: flex; gap: 9px; }
.home-welcome { min-height: 170px; }.home-attention { margin-top: 28px; }.attention-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.attention-card { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 15px 16px; border: 1px solid #cfe1df; border-radius: 14px; color: inherit; background: white; box-shadow: 0 7px 20px rgba(17,49,56,.035); }.attention-card:hover { border-color: #9ccfc5; transform: translateY(-1px); }.attention-card .attention-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--teal-dark); background: var(--mint); font-weight: 850; }.attention-card.urgent .attention-icon { color: #a33131; background: #fee9e9; }.attention-card.warning .attention-icon { color: #8b5a13; background: #fff2d9; }.attention-card strong, .attention-card small { display: block; }.attention-card strong { font-size: 12px; }.attention-card small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.attention-card > span:last-child { color: #90a1a5; font-size: 20px; }.home-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 28px; }.overview-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 7px 22px rgba(17,49,56,.035); }.overview-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }.overview-card-head > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--teal-dark); background: var(--mint); }.overview-card-head small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }.overview-card > strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }.overview-card > p { min-height: 32px; margin: 6px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }.overview-card > a { font-size: 10px; font-weight: 800; }.home-balances { grid-template-columns: repeat(3,1fr); }.home-balances .balance-card { min-width: 0; }.home-balances .balance-card > p { min-height: 36px; }.home-recent-requests { margin-top: 28px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; font-weight: 750; font-size: 13px; cursor: pointer; }
.button.primary { color: white; background: var(--teal); box-shadow: 0 8px 20px rgba(24,165,143,.18); }.button.primary:hover { background: var(--teal-dark); }
.button.secondary { color: var(--navy); background: #edf5f4; border-color: #cfe1df; }.button.light { color: var(--navy); background: white; }.button.ghost { color: var(--muted); background: transparent; border-color: var(--line); }.button.danger { color: white; background: var(--danger); }.button.small { min-height: 36px; }.button.full { width: 100%; }.button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.section-heading, .card-heading, .page-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.section-heading { margin: 34px 2px 16px; }.section-heading.top { margin-top: 0; }.section-heading h2, .card-heading h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.025em; }.section-heading p:not(.eyebrow), .page-actions p { color: var(--muted); margin: 8px 0 0; }
.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.balance-grid.compact { grid-template-columns: repeat(4, 1fr); }
.balance-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(17,49,56,.045); }.balance-card.accent { border-color: #bce3da; background: linear-gradient(145deg, #fff, #effaf7); }.card-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: var(--teal-dark); background: var(--mint); font-size: 20px; }.balance-card > p { margin: 17px 0 4px; color: var(--muted); font-size: 13px; }.balance-card > strong { display: block; font-size: 31px; letter-spacing: -.05em; }.balance-card > strong small { font-size: 12px; color: var(--muted); letter-spacing: 0; }.balance-meta { display: block; margin-top: 11px; font-size: 11px; color: #829196; }
.content-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(17,49,56,.045); }.dashboard-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .8fr); gap: 18px; margin-top: 28px; }.card-heading { margin-bottom: 18px; }
.request-list { display: grid; }.request-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto 15px; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid #edf1f1; color: inherit; }.request-row:first-child { border-top: 0; }.date-tile { width: 45px; height: 48px; display: grid; place-content: center; text-align: center; border-radius: 11px; background: #eef5f4; }.date-tile strong { font-size: 18px; line-height: 1; }.date-tile small { margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }.date-tile.large { width: 65px; height: 69px; }.date-tile.large strong { font-size: 25px; }
.request-copy strong, .request-copy small { display: block; }.request-copy strong { font-size: 14px; }.request-copy small { margin-top: 5px; color: var(--muted); font-size: 11px; }.chevron { color: #90a1a5; font-size: 23px; }
.status, .type-pill, .primary-pill, .read-only-pill { display: inline-flex; align-items: center; width: max-content; padding: 5px 9px; border-radius: 100px; font-size: 10px; font-weight: 800; letter-spacing: .02em; }.status.pending, .status.accepted, .status.scheduled { color: #8b5a13; background: #fff2d9; }.status.approved, .status.current { color: #087162; background: #dff6ef; }.status.rejected, .status.cancelled, .status.inactive { color: #a33131; background: #fee9e9; }.status.ended { color: #5c6b70; background: #e9eeee; }.type-pill, .primary-pill { color: #285f72; background: var(--sky); }.read-only-pill { color: #607276; background: #edf1f1; }
.quick-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }.count-badge { min-width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 20px; color: white; background: var(--teal); font-weight: 800; font-size: 12px; }.count-badge.large { min-width: auto; padding: 0 13px; }.all-clear { min-height: 150px; display: grid; place-items: center; align-content: center; text-align: center; }.all-clear > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--mint); font-size: 24px; }.all-clear strong { margin-top: 12px; }.all-clear small { margin-top: 4px; color: var(--muted); }
.notification-page-actions > div { max-width: 720px; }.notification-page-actions h2 { margin: 4px 0 0; }.notification-centre-list { display: grid; gap: 10px; }.notification-card { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 7px 22px rgba(17,49,56,.035); }.notification-card.unread { border-left: 4px solid var(--teal); background: #fbfefd; }.notification-card.urgent.unread { border-left-color: var(--danger); }.notification-card.warning.unread { border-left-color: #d39433; }.notification-card-copy { min-width: 0; }.notification-card-copy > div { display: flex; align-items: center; gap: 9px; }.notification-card-copy time { color: var(--muted); font-size: 9px; }.notification-card-copy h2 { margin: 8px 0 4px; font-size: 14px; }.notification-card-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.empty-state { min-height: 220px; display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; border: 1px dashed #c8d6d6; border-radius: var(--radius); background: white; }.empty-state > span { font-size: 34px; color: var(--teal); }.empty-state h3 { margin: 12px 0 3px; }.empty-state p { margin: 0; color: var(--muted); }.empty-inline { padding: 28px 0 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.profile-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }.profile-hero > div:nth-child(2) { flex: 1; }.profile-hero h2 { margin: 4px 0; }.profile-hero p:last-child { color: var(--muted); margin: 0; }.profile-hero.plain { padding: 0 0 22px; border-bottom: 1px solid var(--line); box-shadow: none; }.profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 19px; color: white; background: linear-gradient(145deg, #0f6972, #18a58f); font-size: 24px; font-weight: 800; }.profile-avatar.small { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 18px; margin: 24px 0 0; }.detail-list.one-column { grid-template-columns: 1fr; }.detail-list .span-2 { grid-column: 1/-1; }.detail-list dt, .review-list dt, .balance-stats dt { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }.detail-list dd, .review-list dd, .balance-stats dd { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }.card-note { margin: 24px -26px -26px; padding: 14px 26px; border-radius: 0 0 var(--radius) var(--radius); background: #f6f9f8; color: var(--muted); font-size: 12px; }
.employment-stack, .approval-stack { display: grid; gap: 15px; }.employment-card { display: flex; gap: 20px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(17,49,56,.04); }.employment-card.primary { border-left: 4px solid var(--teal); }.company-monogram { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #276172; background: var(--sky); font-weight: 850; }.employment-main { flex: 1; }.employment-main > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.employment-main h3 { margin: 0; }.employment-main > p { margin: 7px 0 20px; color: var(--muted); }.employment-main dl { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 0; }.employment-main dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }.employment-main dd { margin: 5px 0 0; font-size: 12px; }
.balance-card.detailed { padding: 27px; }.balance-title { min-height: 42px; display: flex; align-items: center; gap: 12px; }.balance-title h2 { margin: 0; font-size: 17px; }.balance-title small { color: var(--muted); }.balance-number { margin: 30px 0 18px; }.balance-number strong { font-size: 43px; letter-spacing: -.06em; }.balance-number span { display: block; color: var(--muted); font-size: 11px; }.balance-bar { height: 6px; overflow: hidden; border-radius: 10px; background: #edf2f1; }.balance-bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.balance-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 22px 0 0; }.balance-stats dt { min-height: 24px; display: flex; align-items: flex-end; }.balance-stats dd { font-weight: 800; }.expiry-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 12px; border-radius: 10px; color: #76501c; background: #fff5df; font-size: 11px; }.expiry-note > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #d39433; font-weight: 800; }.expiry-note p { margin: 0; }.expiry-note strong { display: inline; }
.off-in-lieu-heading { margin-top: 38px; }.expiry-summary { min-width: 180px; padding: 14px 17px; border: 1px solid #bce3da; border-radius: 13px; color: var(--teal-dark); background: #effaf7; text-align: right; }.expiry-summary strong, .expiry-summary span { display: block; }.expiry-summary strong { font-size: 24px; letter-spacing: -.04em; }.expiry-summary span { margin-top: 2px; color: var(--muted); font-size: 10px; }.off-in-lieu-table { padding-top: 20px; }.expiry-days.soon { color: #a56512; font-weight: 800; }.expiry-days.expired { color: var(--danger); }.off-in-lieu-empty { min-height: 170px; }
.information-strip { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding: 16px 18px; border-radius: 13px; color: #2a626f; background: #eaf3f6; }.information-strip > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #3c8190; font-weight: 800; }.information-strip p { margin: 0; font-size: 12px; }.information-strip strong { display: block; margin-bottom: 2px; }.information-strip.warning { color: #76501c; background: #fff6e5; }.information-strip.warning > span { background: #d39433; }
.page-actions { margin-bottom: 20px; }.page-actions p { max-width: 660px; }.form-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: 20px; align-items: start; }.form-intro { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }.form-intro h2 { margin: 2px 0; }.form-intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }.step-number { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--navy); font-weight: 800; }.step-number.done { background: var(--teal); }
.portal-form { display: grid; gap: 16px; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.form-grid .span-2 { grid-column: 1/-1; }.portal-form label, .file-field { display: grid; gap: 7px; color: #344d53; font-size: 12px; font-weight: 750; }.portal-form label small { color: var(--muted); font-size: 10px; font-weight: 500; }.portal-form input, .portal-form select, .portal-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfdbdc; border-radius: 10px; outline: none; color: var(--ink); background: white; }.portal-form textarea { resize: vertical; }.portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,165,143,.11); }.file-field input { padding: 7px; background: #f8faf9; }.form-actions { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; }.review-card { position: sticky; top: 20px; }.review-list { display: grid; gap: 15px; margin: 0; }.review-list > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef2f2; }.review-list dd { text-align: right; }.workflow-preview { margin: 21px 0; padding: 16px; border-radius: 13px; background: #f5f8f7; }.workflow-preview > div { display: flex; gap: 10px; margin-top: 14px; }.workflow-preview > div > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--teal); font-size: 10px; font-weight: 800; }.workflow-preview p { margin: 0; }.workflow-preview strong, .workflow-preview small { display: block; }.workflow-preview small { margin-top: 2px; color: var(--muted); font-size: 10px; }.guidance-card > span { font-size: 32px; color: var(--teal); }.guidance-card h2 { margin-bottom: 8px; }.guidance-card ul { padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 16px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; }.tabs a { padding: 9px 14px; white-space: nowrap; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 750; }.tabs a.active { color: white; background: var(--navy); }.table-card { padding-bottom: 10px; }.responsive-table { overflow-x: auto; margin: 0 -26px; }.responsive-table table { width: 100%; border-collapse: collapse; min-width: 720px; }.responsive-table th { padding: 11px 18px; color: var(--muted); background: #f6f9f8; font-size: 10px; text-align: left; text-transform: uppercase; }.responsive-table td { padding: 16px 18px; border-bottom: 1px solid #edf1f1; font-size: 12px; }.responsive-table td strong, .responsive-table td small { display: block; }.responsive-table td small { margin-top: 4px; color: var(--muted); }.row-link { font-weight: 750; white-space: nowrap; }
.request-history-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }.request-history-controls .tabs { flex: 1 1 auto; margin: 0; }.request-view-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: white; }.request-view-toggle a { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }.request-view-toggle a:hover { color: var(--teal-dark); background: #f3f8f7; }.request-view-toggle a.active { color: white; background: var(--navy); }.request-history-card { overflow: visible; }.request-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 -26px; padding: 18px 26px; border-top: 1px solid #edf1f1; border-bottom: 1px solid #edf1f1; background: #fafcfc; }.request-calendar-navigation { display: grid; grid-template-columns: 38px minmax(150px,auto) 38px; align-items: center; gap: 10px; }.request-calendar-navigation h3 { margin: 0; text-align: center; font-size: 17px; letter-spacing: -.02em; }.request-calendar-navigation > a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); background: white; font-size: 17px; font-weight: 850; }.request-calendar-navigation > a:hover { border-color: var(--teal); color: var(--teal-dark); }.request-calendar-summary { color: var(--muted); font-size: 11px; }.request-calendar-summary strong { color: var(--ink); font-size: 13px; }.request-calendar-summary a { margin-left: 7px; font-weight: 800; }.request-calendar-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px 16px; padding: 13px 0; color: var(--muted); font-size: 9px; font-weight: 750; }.request-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }.request-calendar-legend i { width: 9px; height: 9px; border-radius: 3px; background: #9aabb0; }.request-calendar-legend .pending i, .request-calendar-legend .accepted i { background: #d39433; }.request-calendar-legend .approved i { background: var(--teal); }.request-calendar-legend .rejected i { background: var(--danger); }.request-calendar-legend .cancelled i { background: #7f8d91; }.request-calendar-scroll { position: relative; }.request-calendar { min-width: 760px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); overflow: visible; border: 1px solid var(--line); border-radius: 14px; background: var(--line); gap: 1px; }.request-calendar-weekday { min-height: 37px; display: grid; place-items: center; color: #536a70; background: #f1f6f5; font-size: 9px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }.request-calendar-day { min-width: 0; min-height: 122px; position: relative; padding: 9px; background: white; }.request-calendar-day.other-month { background: #f8fafa; }.request-calendar-day.other-month > time { color: #a6b1b3; }.request-calendar-day.today { box-shadow: inset 0 0 0 2px var(--teal); z-index: 1; }.request-calendar-day > time { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #40575d; font-size: 10px; font-weight: 800; }.request-calendar-day.today > time { color: white; background: var(--teal); }.request-calendar-events { display: grid; gap: 4px; margin-top: 5px; }.request-calendar-event { min-width: 0; min-height: 26px; display: flex; align-items: center; gap: 6px; position: relative; padding: 5px 7px; border-left: 3px solid #8d9da1; border-radius: 6px; color: #42595f; background: #edf1f1; font-size: 9px; font-weight: 800; }.request-calendar-event > i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }.request-calendar-event > span:not(.request-calendar-tooltip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.request-calendar-event.pending, .request-calendar-event.accepted { border-left-color: #d39433; color: #82530e; background: #fff2d9; }.request-calendar-event.approved { border-left-color: var(--teal); color: #087162; background: #dff6ef; }.request-calendar-event.rejected { border-left-color: var(--danger); color: #9d3030; background: #fee9e9; }.request-calendar-event.cancelled { border-left-color: #7f8d91; color: #5d6d71; background: #e9eeee; }.request-calendar-event:hover, .request-calendar-event:focus-visible { outline: 2px solid rgba(24,165,143,.25); outline-offset: 1px; z-index: 12; }.request-calendar-tooltip { width: 300px; display: none; gap: 10px; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; box-shadow: 0 18px 45px rgba(10,39,46,.2); font-size: 10px; font-weight: 500; }.request-calendar-event:hover .request-calendar-tooltip, .request-calendar-event:focus-visible .request-calendar-tooltip { display: grid; }.request-calendar-day:nth-child(7n) .request-calendar-tooltip, .request-calendar-day:nth-child(7n - 1) .request-calendar-tooltip { right: 0; left: auto; }.request-calendar-tooltip:before { content: ""; width: 10px; height: 10px; position: absolute; left: 18px; top: -6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: white; transform: rotate(45deg); }.request-calendar-day:nth-child(7n) .request-calendar-tooltip:before, .request-calendar-day:nth-child(7n - 1) .request-calendar-tooltip:before { right: 18px; left: auto; }.tooltip-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.tooltip-heading > strong { font-size: 12px; }.request-calendar-tooltip > span:not(.tooltip-heading):not(.tooltip-period) { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; }.request-calendar-tooltip small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.request-calendar-tooltip strong { overflow-wrap: anywhere; }.tooltip-reason { padding-top: 9px; border-top: 1px solid #edf1f1; }.calendar-empty-note { padding: 17px 3px 8px; color: var(--muted); text-align: center; font-size: 10px; }.leave-period { display: inline-flex; align-items: center; gap: 8px; }.leave-period > span { display: inline-flex; align-items: center; gap: 6px; }.leave-period small, .leave-period strong { display: block; }.leave-period small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.leave-period strong { font-size: 10px; }.leave-period > i { color: #8da0a4; font-style: normal; }.leave-session-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 6px; border-radius: 7px; color: #315d68; background: var(--sky); font-size: 8px; font-weight: 850; white-space: nowrap; }.leave-session-badge.am { color: #7d570f; background: #fff2d9; }.leave-session-badge.pm { color: #285f72; background: var(--sky); }.request-calendar-tooltip .leave-period.range { align-items: flex-start; display: grid; grid-template-columns: 1fr auto 1fr; }.request-calendar-tooltip .leave-period.range > span { align-items: flex-start; display: grid; gap: 3px; }.request-calendar-tooltip .leave-period.single { justify-content: space-between; }
.portal-content-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }
.visually-hidden { width: 1px; height: 1px; padding: 0; overflow: hidden; position: absolute; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.data-table-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 0 0 15px; }.data-table-search, .data-table-size { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }.data-table-search { width: min(320px,100%); }.data-table-search input, .data-table-size select { min-height: 39px; padding: 0 12px; border: 1px solid #cbd9d8; border-radius: 10px; color: var(--ink); background: white; outline: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }.data-table-search input:focus, .data-table-size select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,165,143,.12); }.data-table-size { margin-left: auto; }.data-table-size select { min-width: 76px; }
.data-table-filters { display: flex; align-items: end; flex: 1; flex-wrap: wrap; gap: 8px; }.data-table-facet { position: relative; }.data-table-facet summary { min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 0 12px; list-style: none; border: 1px solid #cbd9d8; border-radius: 10px; color: var(--ink); background: white; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }.data-table-facet summary::-webkit-details-marker { display: none; }.data-table-facet summary:after { content: "▾"; color: var(--muted); font-size: 10px; }.data-table-facet[open] summary { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,165,143,.12); }.data-table-facet-panel { width: max-content; min-width: 220px; max-width: min(310px,calc(100vw - 44px)); max-height: 310px; overflow: auto; position: absolute; top: calc(100% + 7px); left: 0; z-index: 30; padding: 9px; border: 1px solid #cbd9d8; border-radius: 12px; background: white; box-shadow: 0 16px 38px rgba(12,48,56,.17); }.data-table-facet:last-child .data-table-facet-panel { right: 0; left: auto; }.data-table-facet-actions { display: flex; justify-content: flex-end; gap: 5px; padding: 0 0 7px; border-bottom: 1px solid #edf1f1; }.data-table-facet-actions button { padding: 4px 7px; border: 0; color: var(--teal-dark); background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }.data-table-facet-actions button:hover, .data-table-facet-actions button:focus-visible { text-decoration: underline; }.data-table-facet-options { display: grid; padding-top: 5px; }.data-table-facet-option { min-height: 34px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }.data-table-facet-option:hover { background: #f2f8f7; }.data-table-facet-option input { width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--teal); }.data-table-facet-option small { min-width: 22px; padding: 2px 6px; border-radius: 10px; color: var(--muted); background: #edf3f2; text-align: center; font-size: 9px; }
.data-table-sort { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: inherit; text-align: inherit; text-transform: inherit; }.data-table-sort:hover { color: var(--teal-dark); }.data-table-sort:focus-visible { border-radius: 3px; outline: 2px solid var(--teal); outline-offset: 3px; }.sort-indicator { color: #8ba0a3; font-size: 13px; }
.data-table-pager { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0 0; color: var(--muted); font-size: 11px; }.data-table-page-controls { display: flex; align-items: center; gap: 11px; }.data-table-page-controls .button { min-height: 34px; padding: 0 12px; }.data-table-page-controls > span { min-width: 76px; text-align: center; font-weight: 700; }
.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 12px; }.request-title { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.request-title h2 { margin: 4px 0; }.request-title p:last-child { margin: 0; color: var(--muted); }.timeline { margin: 22px 0; }.timeline > div { position: relative; display: flex; gap: 12px; min-height: 70px; }.timeline > div:after { content: ""; position: absolute; left: 14px; top: 31px; bottom: 3px; width: 1px; background: #d9e3e3; }.timeline > div:last-child:after { display: none; }.timeline > div > span { width: 29px; height: 29px; display: grid; place-items: center; z-index: 1; border: 1px solid #cad7d7; border-radius: 50%; color: var(--muted); background: white; font-size: 10px; font-weight: 800; }.timeline > div.complete > span { color: white; border-color: var(--teal); background: var(--teal); }.timeline > div.current > span { color: var(--teal-dark); border: 3px solid #82d2c3; }.timeline p { margin: 3px 0 0; }.timeline strong, .timeline small { display: block; }.timeline small { margin-top: 4px; color: var(--muted); font-size: 10px; } hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.approval-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto 14px; align-items: center; gap: 15px; padding: 20px 23px; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(17,49,56,.04); }.approval-card:hover { transform: translateY(-1px); border-color: #b7d9d3; }.approval-main > div { display: flex; align-items: center; gap: 8px; }.approval-main h2 { margin: 0; font-size: 15px; }.approval-main p { margin: 6px 0 3px; font-size: 13px; }.approval-main small { color: var(--muted); }.approval-tier { text-align: right; }.approval-tier small, .approval-tier strong { display: block; }.approval-tier small { color: var(--muted); font-size: 9px; text-transform: uppercase; }.approval-tier strong { margin-top: 3px; font-size: 12px; }.approval-detail-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.75fr); gap: 20px; align-items: start; }.decision-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin: 22px 0; }.decision-summary small, .decision-summary strong { display: block; }.decision-summary small, .reason-box small { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }.decision-summary strong { margin-top: 5px; font-size: 13px; }.reason-box { padding: 17px; border-radius: 12px; background: #f6f9f8; }.reason-box p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }.decision-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }.decision-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }.muted { color: var(--muted); line-height: 1.6; }.error-card { max-width: 600px; margin: 60px auto; text-align: center; }.error-card > span { display: block; color: #dbe5e5; font-size: 70px; font-weight: 900; }.error-card .button { margin-top: 20px; }
.mobile-nav { display: none; }

/* Modern employee self-service journeys */
.leave-application-layout { grid-template-columns: minmax(0,1.52fr) minmax(300px,.68fr); }.application-form { gap: 0; padding: 0; overflow: hidden; }.form-section { padding: 27px 29px; border-bottom: 1px solid #e8eeee; }.form-section.compact-section { border-bottom: 0; }.form-section-heading { display: flex; gap: 13px; margin-bottom: 21px; }.form-section-heading > span { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 850; }.form-section-heading h3 { margin: 0; font-size: 16px; }.form-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.application-form > .form-actions { padding: 20px 29px; background: #fafcfc; }
.date-session-grid { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 10px; }.date-session-card { display: grid; grid-template-columns: 1.25fr .8fr; gap: 10px; padding: 15px; border: 1px solid #dbe5e5; border-radius: 14px; background: #fbfcfc; }.date-session-card .field-kicker { grid-column: 1/-1; margin: 0 0 1px; color: var(--teal-dark); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.date-range-arrow { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); background: #edf2f1; font-size: 12px; }
.balance-preview-card, .leave-review-card { position: sticky; top: 20px; }.preview-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 13px; color: var(--teal-dark); background: var(--mint); font-size: 22px; }.balance-preview-card h2 { min-height: 22px; margin: 4px 0 20px; font-size: 18px; }.preview-balance { padding: 22px; border-radius: 15px; color: white; background: linear-gradient(135deg,var(--navy),var(--navy-2)); }.preview-balance small, .preview-balance strong, .preview-balance span { display: block; }.preview-balance small { margin-bottom: 8px; color: #8fbdc4; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.preview-balance strong { font-size: 42px; line-height: 1; letter-spacing: -.06em; }.preview-balance span { margin-top: 6px; color: #b9d2d7; font-size: 10px; }.preview-balance-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 15px 0 0; }.preview-balance-stats > div { min-width: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfa; }.preview-balance-stats dt { min-height: 22px; display: flex; align-items: flex-end; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.preview-balance-stats dd { margin: 5px 0 0; font-size: 13px; font-weight: 850; }.expiry-preview { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px; border-radius: 11px; color: #76501c; background: #fff4dc; font-size: 10px; }.expiry-preview > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #d39433; font-weight: 800; }.expiry-preview p { margin: 0; }.validation-list { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; color: #405b61; font-size: 11px; }.validation-list span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; color: var(--teal-dark); background: var(--mint); font-size: 9px; font-weight: 900; }.preview-note { margin: 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }.review-ready { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.review-ready > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--teal); font-weight: 900; }.review-ready h2 { margin: 3px 0 0; font-size: 18px; }.review-duration { margin: 18px 0; padding: 17px; border-radius: 13px; color: white; background: var(--navy); }.review-duration strong, .review-duration span { display: block; }.review-duration strong { font-size: 34px; line-height: 1; }.review-duration span { margin-top: 5px; color: #b9d2d7; font-size: 10px; }.review-list dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.profile-cover { min-height: 200px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 36px; overflow: hidden; position: relative; border-radius: 23px; color: white; background: radial-gradient(circle at 90% 130%, rgba(49,197,172,.42), transparent 43%), linear-gradient(125deg,#0a303a,#10535f); box-shadow: var(--shadow); }.profile-cover:after { content: ""; position: absolute; right: -60px; top: -100px; width: 250px; height: 250px; border: 38px solid rgba(255,255,255,.04); border-radius: 50%; }.profile-cover > * { position: relative; z-index: 1; }.profile-cover-main { display: flex; align-items: center; gap: 21px; }.profile-avatar.extra-large { width: 83px; height: 83px; border: 4px solid rgba(255,255,255,.18); border-radius: 24px; font-size: 31px; }.profile-cover h2 { margin: 8px 0 4px; font-size: 29px; letter-spacing: -.04em; }.profile-cover p { margin: 0; color: #bcd2d6; font-size: 13px; }.profile-cover-labels { display: flex; align-items: center; gap: 8px; color: #bcd2d6; font-size: 10px; }.profile-cover-actions { display: flex; gap: 8px; }.button.cover-secondary { color: white; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }.profile-facts { display: grid; grid-template-columns: .65fr 1.35fr 1fr; gap: 14px; margin: 17px 0; }.profile-facts article { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: white; }.profile-facts article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--teal-dark); background: var(--mint); }.profile-facts small, .profile-facts strong { display: block; }.profile-facts small { color: var(--muted); font-size: 9px; text-transform: uppercase; }.profile-facts strong { max-width: 100%; overflow: hidden; margin-top: 3px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.profile-detail-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.55fr); gap: 18px; align-items: start; }.profile-detail-main { display: grid; gap: 18px; }.profile-section .card-heading { padding-bottom: 17px; border-bottom: 1px solid var(--line); }.profile-help { display: flex; gap: 10px; margin: 23px -26px -26px; padding: 14px 26px; border-radius: 0 0 var(--radius) var(--radius); color: var(--muted); background: #f6f9f8; font-size: 10px; }.profile-help > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #3c8190; font-weight: 800; }.profile-help p { margin: 0; line-height: 1.5; }.profile-help strong { display: block; color: var(--ink); }.employment-preview { position: sticky; top: 20px; }.mini-employment { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid #edf1f1; }.mini-employment:first-of-type { border-top: 0; }.company-monogram.small { width: 38px; height: 38px; border-radius: 11px; font-size: 11px; }.mini-employment strong, .mini-employment small { display: block; }.mini-employment strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.mini-employment small { margin-top: 3px; color: var(--muted); font-size: 9px; }.employment-preview > .button { margin-top: 16px; }
.payroll-hero { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 31px 35px; overflow: hidden; position: relative; border-radius: 23px; color: white; background: radial-gradient(circle at 100% 0, rgba(24,165,143,.38), transparent 46%), linear-gradient(125deg,#0b3039,#174f5b); box-shadow: var(--shadow); }.payroll-hero h2 { margin: 6px 0 8px; font-size: 29px; letter-spacing: -.04em; }.payroll-hero p:last-child { max-width: 610px; margin: 0; color: #bdd3d7; font-size: 12px; line-height: 1.65; }.payroll-hero .eyebrow { color: #7edac8; }.payroll-lock { min-width: 250px; display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(255,255,255,.075); }.payroll-lock > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: var(--navy); background: #8de1d0; font-size: 21px; }.payroll-lock strong, .payroll-lock small { display: block; }.payroll-lock strong { font-size: 12px; }.payroll-lock small { max-width: 160px; margin-top: 3px; color: #bcd2d6; font-size: 9px; line-height: 1.45; }.payslip-list { display: grid; gap: 10px; }.payslip-row { display: grid; grid-template-columns: 53px minmax(0,1fr) auto 16px; align-items: center; gap: 15px; padding: 17px 20px; color: inherit; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 7px 22px rgba(17,49,56,.035); }.payslip-row:hover { border-color: #abd5ce; transform: translateY(-1px); }.payslip-month { width: 51px; height: 54px; display: grid; place-content: center; text-align: center; border-radius: 13px; color: var(--teal-dark); background: var(--mint); }.payslip-month strong, .payslip-month small { display: block; }.payslip-month strong { font-size: 17px; }.payslip-month small { margin-top: 2px; font-size: 9px; text-transform: uppercase; }.payslip-copy strong, .payslip-copy small { display: block; }.payslip-copy strong { font-size: 14px; }.payslip-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; }.released-pill { display: inline-flex; align-items: center; width: max-content; padding: 6px 10px; border-radius: 100px; color: #087162; background: var(--mint); font-size: 9px; font-weight: 850; text-transform: uppercase; }.payroll-help { display: flex; gap: 11px; margin-top: 18px; padding: 15px 18px; border: 1px solid #d5e5e5; border-radius: 13px; color: var(--muted); background: #f8fbfa; font-size: 11px; }.payroll-help > span { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #3c8190; font-weight: 800; }.payroll-help p { margin: 0; line-height: 1.5; }.payroll-help strong { color: var(--ink); }
.payslip-actions { margin-bottom: 17px; }.payslip-document { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }.payslip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 34px; color: white; background: var(--navy); }.payslip-head .eyebrow { color: #7edac8; }.payslip-head h2 { margin: 5px 0; font-size: 24px; }.payslip-head p:last-child { max-width: 480px; margin: 0; color: #aac4c9; font-size: 10px; }.payslip-period { text-align: right; }.payslip-period small, .payslip-period strong, .payslip-period span { display: block; }.payslip-period small { color: #8eafb5; font-size: 9px; text-transform: uppercase; }.payslip-period strong { margin-top: 5px; font-size: 15px; }.payslip-period span { margin-top: 4px; color: #aac4c9; font-size: 10px; }.payslip-person { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; padding: 23px 34px; border-bottom: 1px solid var(--line); }.payslip-person small, .payslip-person strong, .payslip-person span { display: block; }.payslip-person small, .pay-summary-grid small { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }.payslip-person strong { margin-top: 5px; font-size: 13px; }.payslip-person span { margin-top: 3px; color: var(--muted); font-size: 10px; }.net-pay-panel { display: flex; align-items: center; justify-content: space-between; margin: 26px 34px 17px; padding: 24px 27px; border-radius: 16px; color: white; background: linear-gradient(125deg,#0f5f6a,#148775); }.net-pay-panel small, .net-pay-panel strong, .net-pay-panel span { display: block; }.net-pay-panel small { color: #b8e2da; font-size: 9px; font-weight: 800; text-transform: uppercase; }.net-pay-panel strong { margin-top: 5px; font-size: 32px; letter-spacing: -.045em; }.net-pay-panel div > span { margin-top: 4px; color: #b8e2da; font-size: 10px; }.net-pay-panel > .released-pill { color: #075b4d; background: white; }.pay-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 34px 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }.pay-summary-grid > div { padding: 16px; background: #fbfcfc; }.pay-summary-grid strong { display: block; margin-top: 5px; font-size: 13px; }.payslip-components { padding: 0 34px 28px; }.payslip-components > .card-heading { padding-top: 24px; border-top: 1px solid var(--line); }.payslip-components > .card-heading > span { color: var(--muted); font-size: 10px; font-weight: 800; }.payslip-components .responsive-table { margin: 0; border: 1px solid var(--line); border-radius: 12px; }.payslip-components .money-cell { text-align: right; }.payslip-foot { display: flex; justify-content: space-between; gap: 20px; padding: 15px 34px; color: var(--muted); background: #f5f8f7; font-size: 9px; }.payslip-foot p { margin: 0; }
.page-action-buttons { display: flex; gap: 9px; }.date-section-heading { align-items: flex-start; }.date-section-heading > div { flex: 1; }.calendar-launch { flex: 0 0 auto; }
.leave-calendar-dialog { width: min(560px,calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: var(--ink); background: white; box-shadow: 0 28px 90px rgba(4,29,35,.28); }.leave-calendar-dialog::backdrop { background: rgba(4,26,31,.62); backdrop-filter: blur(4px); }.calendar-dialog-shell { display: grid; max-height: calc(100dvh - 28px); overflow: auto; }.calendar-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 25px 17px; }.calendar-dialog-head h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.035em; }.calendar-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: white; font-size: 24px; cursor: pointer; }.calendar-selection-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; margin: 0 25px 14px; padding: 14px 17px; border-radius: 14px; background: #f3f8f7; }.calendar-selection-summary small, .calendar-selection-summary strong { display: block; }.calendar-selection-summary small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }.calendar-selection-summary strong { margin-top: 4px; font-size: 11px; }.calendar-selection-summary > span { color: var(--teal-dark); }.calendar-navigation { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; margin: 0 25px 12px; }.calendar-navigation button { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; cursor: pointer; font-weight: 750; }.calendar-navigation button:hover { border-color: var(--teal); }.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin: 0 25px; }.calendar-weekdays { margin-bottom: 5px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; }.calendar-day, .calendar-spacer { aspect-ratio: 1; min-width: 0; }.calendar-day { position: relative; display: grid; place-items: center; border: 1px solid transparent; border-radius: 12px; color: var(--ink); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }.calendar-day:hover, .calendar-day:focus-visible { border-color: var(--teal); outline: 3px solid rgba(24,165,143,.13); }.calendar-day.today:after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }.calendar-day.in-range { border-radius: 4px; color: #075f52; background: #dff6ef; }.calendar-day.range-start, .calendar-day.range-end { color: white; background: var(--teal); }.calendar-day.range-start { border-radius: 13px 5px 5px 13px; }.calendar-day.range-end { border-radius: 5px 13px 13px 5px; }.calendar-day.range-start.range-end { border-radius: 13px; }.calendar-day.blocked { color: #a2adaf; background: #f1f3f3; cursor: not-allowed; text-decoration: line-through; }.calendar-day.blocked-leave { color: #ae7777; background: #faeeee; }.calendar-legend { display: flex; flex-wrap: wrap; gap: 9px 14px; margin: 16px 25px 0; color: var(--muted); font-size: 9px; }.calendar-legend span { display: flex; align-items: center; gap: 6px; }.calendar-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); background: white; }.calendar-legend i.selected { border-color: var(--teal); background: var(--teal); }.calendar-legend i.blocked { background: #e5e9e9; }.calendar-message { min-height: 17px; margin: 12px 25px; color: var(--muted); font-size: 10px; }.calendar-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 25px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fafcfc; }
.claim-hero { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 31px 35px; overflow: hidden; position: relative; border-radius: 23px; color: white; background: radial-gradient(circle at 100% 0,rgba(34,184,157,.34),transparent 44%),linear-gradient(125deg,#0b3039,#174f5b); box-shadow: var(--shadow); }.claim-hero .eyebrow { color: #80ddcc; }.claim-hero h2 { margin: 6px 0 8px; font-size: 30px; }.claim-hero p:last-child { max-width: 640px; margin: 0; color: #bfd5d9; font-size: 12px; line-height: 1.65; }.claim-balance { min-width: 225px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.08); }.claim-balance small, .claim-balance strong, .claim-balance span { display: block; }.claim-balance small { color: #a9c8cd; font-size: 9px; font-weight: 800; text-transform: uppercase; }.claim-balance strong { margin: 7px 0 3px; font-size: 38px; line-height: 1; }.claim-balance span { color: #bfd5d9; font-size: 10px; }.claim-creation-note { margin-top: 16px; }.claim-request-stack { display: grid; gap: 12px; }.claim-request-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr) auto; align-items: center; gap: 22px; }.claim-request-main { display: flex; align-items: center; gap: 14px; }.claim-date-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--teal-dark); background: var(--mint); font-size: 23px; }.claim-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.claim-card-title h3 { margin: 0; font-size: 16px; }.claim-request-main p { margin: 6px 0 3px; color: #3b565c; font-size: 11px; }.claim-request-main small { color: var(--muted); font-size: 10px; }.claim-request-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin: 0; }.claim-request-meta dt, .credit-lot-card dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.claim-request-meta dd, .credit-lot-card dd { margin: 4px 0 0; font-size: 10px; }.claim-cancel-form { margin: 0; }.credit-lot-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.credit-lot-card.expired { opacity: .72; }.credit-lot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.credit-lot-head h3 { margin: 9px 0 0; font-size: 17px; }.credit-lot-total { color: var(--muted); font-size: 10px; }.credit-progress { height: 6px; overflow: hidden; margin: 20px 0; border-radius: 9px; background: #edf2f1; }.credit-progress span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.credit-lot-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0; }.credit-lot-card > p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; }

.login-body { background: var(--navy); }.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .9fr) minmax(500px, 1.1fr); }.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px,6vw,72px); overflow: hidden; position: relative; color: white; background: radial-gradient(circle at 110% 45%, rgba(30,182,157,.35), transparent 43%), linear-gradient(145deg, #082933, #0d4853); }.login-story:before { content: ""; position: absolute; width: 480px; height: 480px; right: -280px; top: 14%; border: 70px solid rgba(255,255,255,.035); border-radius: 50%; }.story-copy { position: relative; z-index: 1; max-width: 540px; }.story-copy .eyebrow { color: #7edac8; }.story-copy h1 { margin: 12px 0 22px; font-size: clamp(38px, 5vw, 65px); line-height: 1.02; letter-spacing: -.055em; }.story-copy > p:last-child { max-width: 480px; color: #b8d1d5; line-height: 1.7; }.story-foot { color: #87a8ae; font-size: 11px; }.login-panel { display: grid; place-items: center; padding: 36px; background: #f5f8f7; }.login-card { width: min(430px,100%); padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }.login-card h2 { margin: 7px 0 5px; font-size: 27px; letter-spacing: -.04em; }.login-card > .muted { margin: 0 0 25px; font-size: 13px; }.login-card .portal-form { margin-top: 22px; }.login-help { margin: 25px 0 0; text-align: center; color: var(--muted); font-size: 11px; }.mobile-login-brand { display: none; }

.button.microsoft { display: flex; justify-content: center; gap: 12px; margin-top: 22px; color: #1f1f1f; border: 1px solid #8c8c8c; background: white; }.button.microsoft:hover { background: #f5f5f5; }.microsoft-mark { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }.microsoft-mark i:nth-child(1) { background: #f25022; }.microsoft-mark i:nth-child(2) { background: #7fba00; }.microsoft-mark i:nth-child(3) { background: #00a4ef; }.microsoft-mark i:nth-child(4) { background: #ffb900; }.login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }.login-divider:before, .login-divider:after { content: ""; height: 1px; flex: 1; background: var(--line); }
.login-account-state { display: grid; gap: 7px; margin-top: 20px; padding: 16px; border: 1px solid #efd3ab; border-radius: 13px; background: #fff8ed; }.login-account-state > span { color: #7b664a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.login-account-state > strong { overflow-wrap: anywhere; color: var(--ink); font-size: 15px; }.login-account-state > p { margin: 2px 0 0; color: #6f604d; font-size: 12px; line-height: 1.55; }

/* Portal shell and Leave workspace cleanup. */
.portal-header { height: 78px; padding: 14px clamp(24px,4vw,54px); }
.portal-header h1 { font-size: 23px; }
.section-tabs { min-height: 48px; padding-top: 4px; }
.section-tabs a { min-height: 42px; }
.portal-main { padding-top: 24px; padding-bottom: 48px; }
.request-command-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.request-command-main { min-width: 0; display: flex; align-items: center; gap: 6px; }
.request-command-bar .tabs { min-width: 0; flex: 1 1 auto; margin: 0; padding: 0; border: 0; background: transparent; }
.request-command-bar .request-view-toggle { flex: 0 0 auto; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.request-new-button { margin-right: 1px; white-space: nowrap; }
.request-history-card { padding: 0 26px 16px; }
.request-history-card.list-view { overflow: hidden; }
.request-history-card.list-view .responsive-table { margin-bottom: -16px; }
.request-history-card.list-view > .empty-state { margin: 26px 0 10px; }
.request-calendar-toolbar { margin: 0 -26px 12px; padding: 14px 26px; border-top: 0; border-radius: 18px 18px 0 0; }
.request-calendar-context { display: grid; justify-items: end; gap: 7px; }
.request-calendar-legend { padding: 0; }
.request-calendar-legend .awaiting i { background: #d39433; }
.status.awaiting { color: #8b5a13; background: #fff2d9; }
.request-calendar-event.awaiting { border-left-color: #d39433; color: #82530e; background: #fff2d9; }
.request-calendar-event.range-start:not(.single-range) { margin-right: -10px; border-radius: 6px 0 0 6px; }
.request-calendar-event.range-middle { margin-right: -10px; margin-left: -10px; border-left-width: 0; border-radius: 0; padding-left: 10px; }
.request-calendar-event.range-end { margin-left: -10px; border-left-width: 0; border-radius: 0 6px 6px 0; padding-left: 10px; }
.portal-header { display: grid; grid-template-columns: minmax(220px,auto) minmax(0,1fr) auto; gap: 24px; }
.portal-header > div:first-child { min-width: 0; }
.portal-header > .section-tabs { min-width: 0; grid-column: 2; align-self: stretch; margin: -14px 0; padding: 14px 0 0; border: 0; background: transparent; }
.portal-header-actions { grid-column: 3; }
@media (min-width: 781px) and (max-width: 1180px) {
  .portal-header { height: auto; min-height: 78px; grid-template-columns: minmax(0,1fr) auto; row-gap: 0; padding-bottom: 0; }
  .portal-header > .section-tabs { width: 100%; grid-column: 1/-1; grid-row: 2; margin: 7px 0 0; padding: 0; }
  .portal-header-actions { grid-column: 2; grid-row: 1; }
}
@media (min-width: 781px) {
  .request-calendar[data-week-count="4"] .request-calendar-day { min-height: clamp(72px,calc(25dvh - 81.25px),122px); }
  .request-calendar[data-week-count="5"] .request-calendar-day { min-height: clamp(68px,calc(20dvh - 65px),122px); }
  .request-calendar[data-week-count="6"] .request-calendar-day { min-height: clamp(64px,calc(16.667dvh - 54.167px),122px); }
}
@media (max-width: 1050px) {
  .request-calendar-scroll { overflow-x: auto; overflow-y: hidden; }
  .balance-grid.compact { grid-template-columns: repeat(2,1fr); }
  .balance-grid { grid-template-columns: repeat(2,1fr); }
  .employment-main dl { grid-template-columns: repeat(2,1fr); }
  .login-shell { grid-template-columns: .8fr 1.2fr; }.story-copy h1 { font-size: 42px; }
  .profile-detail-layout { grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); }.date-session-card { grid-template-columns: 1fr; }.date-session-card .field-kicker { grid-column: auto; }
  .claim-request-card { grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); }.claim-cancel-form { grid-column: 2; }.credit-lot-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px) {
  .portal-sidebar { display: none; }.portal-page { margin-left: 0; padding-bottom: 74px; }.portal-header { height: 75px; padding: 14px 18px; }.portal-header h1 { font-size: 20px; }.section-tabs { min-height: 49px; padding: 5px 10px 0; }.section-tabs a { min-height: 43px; padding: 0 11px; }.portal-main { padding: 20px 16px 35px; }.mode-banner, .flash-stack { margin: 10px 16px 0; }.mode-banner { display: grid; gap: 2px; }
  .attention-grid, .home-overview { grid-template-columns: 1fr; }.home-balances { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x mandatory; }.home-balances .balance-card { min-width: 74vw; scroll-snap-align: start; }.notification-card { grid-template-columns: 9px minmax(0,1fr); }.notification-card > form { grid-column: 2; }.notification-page-actions { align-items: flex-start; }
  .request-history-controls { align-items: stretch; flex-direction: column; }.request-history-controls .tabs { margin: 0; }.request-view-toggle { align-self: flex-end; }.request-calendar-toolbar { align-items: flex-start; flex-direction: column; margin-left: -21px; margin-right: -21px; padding-left: 21px; padding-right: 21px; }.request-calendar-summary { width: 100%; display: flex; justify-content: space-between; }.request-calendar-legend { justify-content: flex-start; }.request-calendar-day { min-height: 105px; }.request-calendar-event:hover .request-calendar-tooltip, .request-calendar-event:focus-visible .request-calendar-tooltip { display: none; }
  .mobile-nav { position: fixed; inset: auto 0 0; height: calc(67px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(15px); z-index: 20; }.mobile-nav a { display: grid; place-items: center; align-content: center; gap: 2px; color: #718187; font-size: 9px; font-weight: 750; }.mobile-nav a > span { font-size: 19px; line-height: 1; }.mobile-nav a.active { color: var(--teal-dark); }
  .welcome-card { min-height: 210px; padding: 27px 24px; align-items: flex-start; flex-direction: column; }.welcome-card h2 { font-size: 29px; }.welcome-actions { width: 100%; }.welcome-actions .button { flex: 1; }.balance-grid, .balance-grid.compact, .dashboard-columns, .detail-grid, .form-layout, .approval-detail-layout, .profile-detail-layout { grid-template-columns: 1fr; }.section-heading { margin-top: 28px; }.balance-grid.compact { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x mandatory; }.balance-grid.compact .balance-card { min-width: 74vw; scroll-snap-align: start; }.content-card { padding: 21px; }.request-row { grid-template-columns: 45px minmax(0,1fr) 12px; }.request-row .status { grid-column: 2; width: max-content; }.request-row .chevron { grid-row: 1/3; grid-column: 3; }.empty-inline { display: grid; gap: 8px; }.profile-hero { align-items: flex-start; flex-wrap: wrap; }.profile-hero .button { width: 100%; }.detail-list { grid-template-columns: 1fr; }.detail-list .span-2 { grid-column: auto; }.employment-card { padding: 20px; }.employment-main dl { grid-template-columns: 1fr 1fr; }.page-actions { align-items: flex-start; }.page-actions .button { flex: 0 0 auto; }.review-card, .balance-preview-card, .employment-preview { position: static; }.responsive-table { margin: 0 -21px; }.approval-card { grid-template-columns: 45px minmax(0,1fr) 12px; padding: 17px; }.approval-tier { grid-column: 2; text-align: left; display: flex; gap: 5px; }.approval-card .chevron { grid-row: 1/3; grid-column: 3; }.decision-summary { grid-template-columns: 1fr 1fr; }
  .form-section { padding: 22px 21px; }.application-form > .form-actions { padding: 18px 21px; }.date-session-grid { grid-template-columns: 1fr; }.date-session-card { grid-template-columns: 1fr 1fr; }.date-session-card .field-kicker { grid-column: 1/-1; }.date-range-arrow { margin: -3px auto; transform: rotate(90deg); }
  .profile-cover { align-items: flex-start; flex-direction: column; padding: 27px 24px; }.profile-cover-actions { width: 100%; }.profile-cover-actions .button { flex: 1; }.profile-facts { display: flex; overflow-x: auto; padding-bottom: 3px; }.profile-facts article { min-width: 230px; }.employment-preview { order: -1; }
  .payroll-hero { align-items: flex-start; flex-direction: column; padding: 27px 24px; }.payroll-lock { width: 100%; min-width: 0; }.payslip-head { padding: 25px 22px; }.payslip-person { grid-template-columns: 1fr 1fr; padding: 20px 22px; }.net-pay-panel { margin: 20px 22px 14px; }.pay-summary-grid { grid-template-columns: 1fr 1fr; margin: 0 22px 22px; }.payslip-components { padding: 0 22px 22px; }.payslip-components .responsive-table { margin: 0; }.payslip-foot { padding: 14px 22px; }
  .date-section-heading { flex-wrap: wrap; }.date-section-heading .calendar-launch { width: 100%; }.leave-calendar-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }.calendar-dialog-shell { min-height: 100dvh; max-height: 100dvh; grid-template-rows: auto auto auto auto auto auto 1fr auto; }.calendar-dialog-head { padding-top: calc(20px + env(safe-area-inset-top)); }.calendar-day { min-height: 42px; aspect-ratio: auto; }.calendar-dialog-actions { align-self: end; }.claim-hero { align-items: flex-start; flex-direction: column; padding: 27px 24px; }.claim-balance { width: 100%; min-width: 0; }.claim-request-card { grid-template-columns: 1fr; }.claim-request-meta, .claim-cancel-form { grid-column: auto; }.claim-cancel-form .button { width: 100%; }.credit-lot-grid { grid-template-columns: 1fr; }
  .login-shell { display: block; min-height: 100vh; }.login-story { display: none; }.login-panel { min-height: 100vh; padding: 22px 18px; }.login-card { padding: 30px 24px; }.mobile-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }.mobile-login-brand .brand-mark { width: 35px; height: 35px; }
}
@media (max-width: 430px) {
  .data-table-toolbar { align-items: stretch; flex-direction: column; }.data-table-search, .data-table-filters { width: 100%; }.data-table-facet { flex: 1 1 calc(50% - 4px); }.data-table-facet summary { justify-content: space-between; }.data-table-facet:nth-child(even) .data-table-facet-panel { right: 0; left: auto; }.data-table-size { width: max-content; margin-left: 0; }.data-table-pager { align-items: stretch; flex-direction: column; }.data-table-page-controls { justify-content: space-between; }.data-table-page-controls .button { flex: 1; }
  .off-in-lieu-heading { align-items: stretch; display: grid; }.expiry-summary { min-width: 0; text-align: left; }
  .welcome-actions { display: grid; }
  .page-action-buttons { display: grid; width: 100%; }.calendar-dialog-head, .calendar-selection-summary, .calendar-navigation, .calendar-weekdays, .calendar-grid, .calendar-legend, .calendar-message { margin-left: 16px; margin-right: 16px; }.calendar-dialog-head { padding-left: 16px; padding-right: 16px; }.calendar-selection-summary { gap: 7px; padding: 12px; }.calendar-selection-summary strong { font-size: 10px; }.calendar-weekdays, .calendar-grid { gap: 3px; }.calendar-day { min-height: 39px; border-radius: 10px; }.calendar-dialog-actions { padding-left: 16px; padding-right: 16px; }.calendar-dialog-actions .button { flex: 1; }.claim-request-main { align-items: flex-start; }.claim-request-meta { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }.balance-grid { grid-template-columns: 1fr; }.page-actions { display: grid; }.page-actions .button { width: 100%; }.employment-main dl { grid-template-columns: 1fr; }.employment-card { gap: 13px; }.company-monogram { width: 43px; height: 43px; }.decision-summary { grid-template-columns: 1fr; }.decision-actions { grid-template-columns: 1fr; }.inline-form { grid-template-columns: 1fr; }
  .date-session-card { grid-template-columns: 1fr; }.date-session-card .field-kicker { grid-column: auto; }.profile-cover-main { align-items: flex-start; }.profile-avatar.extra-large { width: 64px; height: 64px; border-radius: 19px; }.profile-cover-labels { align-items: flex-start; flex-direction: column; }.profile-cover-actions { display: grid; }.payslip-row { grid-template-columns: 47px minmax(0,1fr) 12px; padding: 15px; }.payslip-row .released-pill { grid-column: 2; }.payslip-row .chevron { grid-row: 1/3; grid-column: 3; }.payslip-head, .payslip-foot { display: grid; }.payslip-period { text-align: left; }.payslip-person, .pay-summary-grid { grid-template-columns: 1fr; }.net-pay-panel strong { font-size: 26px; }
}
@media (max-width: 780px) {
  .portal-header { height: auto; min-height: 75px; grid-template-columns: minmax(0,1fr) auto; row-gap: 0; padding-bottom: 0; }
  .portal-header > .section-tabs { width: 100%; grid-column: 1/-1; grid-row: 2; margin: 7px 0 0; padding: 0; }
  .portal-header-actions { grid-column: 2; grid-row: 1; }
  .request-command-bar { grid-template-columns: 1fr; align-items: stretch; }
  .request-command-main { align-items: stretch; flex-direction: column; }
  .request-command-bar .tabs { width: 100%; }
  .request-command-bar .request-view-toggle { align-self: flex-start; margin-left: 3px; border: 0; }
  .request-new-button { width: 100%; margin: 0; }
  .request-calendar-context { width: 100%; justify-items: stretch; }
  .request-calendar-summary { width: 100%; display: flex; justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) { .approval-card, .button { transition: .16s ease; } }
@media print {
  .portal-sidebar, .portal-header, .section-tabs, .mobile-nav, .mode-banner, .flash-stack, .payslip-actions, .data-table-toolbar, .data-table-pager { display: none !important; }
  .data-table tbody tr[hidden] { display: table-row !important; }
  .portal-page { margin: 0; }.portal-main { width: 100%; padding: 0; }.payslip-document { border: 0; border-radius: 0; box-shadow: none; }.payslip-components .responsive-table { overflow: visible; }.payslip-components table { min-width: 0; } body { background: white; }
}

/* SQL-native Compensation Leave claim submission. */
.claim-application-layout { display: grid; grid-template-columns: minmax(0,1.52fr) minmax(300px,.68fr); align-items: start; gap: 18px; margin-top: 20px; }
.claim-application-form { padding: 0; overflow: hidden; gap: 0; }
.claim-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--line); }
.claim-form-heading h2 { margin: 5px 0 7px; font-size: 20px; }.claim-form-heading p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.claim-type-pill { flex: 0 0 auto; padding: 7px 10px; border-radius: 99px; color: #087162; background: var(--mint); font-size: 10px; font-weight: 850; }
.claim-application-form > .assigned-company, .claim-application-form > .information-strip { margin: 18px 27px 0; }
.claim-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; padding: 22px 27px; }.claim-field-grid .span-2 { grid-column: 1/-1; }
.claim-application-form > .form-actions { justify-content: flex-end; padding: 18px 27px; border-top: 1px solid var(--line); background: #fafcfc; }
.claim-projection-card { position: sticky; top: 20px; }.claim-projection-card h2 { margin: 5px 0 19px; font-size: 18px; }
.balance-projection { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
.balance-projection .preview-balance { min-width: 0; padding: 17px; }.balance-projection .preview-balance strong { font-size: 32px; }
.balance-projection-arrow { color: var(--teal-dark); font-weight: 900; }.projected-balance { background: linear-gradient(135deg,#087565,#18a58f); }
.preview-calculation-state[data-state="loading"] { color: #315d68; }.preview-calculation-state[data-state="success"] { color: #087162; }.preview-calculation-state[data-state="error"] { color: var(--danger); }
.claim-projection-card .approval-route-preview { margin-top: 18px; }
@media (max-width: 1050px) {
  .claim-application-layout { grid-template-columns: 1fr; }.claim-projection-card { position: static; }
}
@media (max-width: 780px) {
  .claim-form-heading { align-items: flex-start; flex-direction: column; }
  .claim-field-grid { grid-template-columns: 1fr; }.claim-field-grid .span-2 { grid-column: auto; }
  .claim-application-form > .form-actions .button { width: 100%; }
}