vaadin-date-picker{width: 120px}.payroll-navbar{min-height: 64px;padding: 0 var(--vaadin-padding-m)}.payroll-header-titles{line-height: 1.2;min-width: 0}.payroll-product-name{color: var(--vaadin-text-color-secondary);display: block;font-size: var(--aura-font-size-xs);font-weight: var(--aura-font-weight-medium);letter-spacing: 0.04em;text-transform: uppercase}.payroll-page-title{font-size: var(--aura-font-size-xl);font-weight: var(--aura-font-weight-semibold);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.payroll-signin{--payroll-signin-glow: color-mix(in srgb,var(--aura-accent-color) 18%,transparent);--payroll-signin-glow-neutral: color-mix(in srgb,var(--vaadin-text-color) 7%,transparent);--payroll-signin-line: color-mix(in srgb,var(--vaadin-text-color) 5%,transparent);isolation: isolate;overflow: hidden;position: relative}.payroll-signin::before{animation: payroll-signin-drift 32s ease-in-out infinite alternate;background: radial-gradient(36rem 36rem at 15% 10%,var(--payroll-signin-glow),transparent 62%),radial-gradient(30rem 30rem at 88% 92%,var(--payroll-signin-glow-neutral),transparent 60%);content: '';inset: -10%;pointer-events: none;position: absolute;z-index: -2}.payroll-signin::after{background-image: linear-gradient(to right,var(--payroll-signin-line) 1px,transparent 1px),linear-gradient(to bottom,var(--payroll-signin-line) 1px,transparent 1px);background-size: 56px 56px;content: '';inset: 0;-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%,#000 15%,transparent 75%);mask-image: radial-gradient(ellipse 60% 55% at 50% 45%,#000 15%,transparent 75%);pointer-events: none;position: absolute;z-index: -1}@keyframes payroll-signin-drift{from{transform: translate3d(-1.5%,-1%,0) scale(1)}to{transform: translate3d(1.5%,1%,0) scale(1.06)}}@media (prefers-reduced-motion: reduce){.payroll-signin::before{animation: none}}.payroll-signin-card{background: color-mix(in srgb,var(--aura-surface-color) 82%,transparent);backdrop-filter: blur(10px);border: 1px solid var(--vaadin-border-color-secondary);border-radius: var(--vaadin-radius-l);box-shadow: 0 1px 2px color-mix(in srgb,var(--vaadin-text-color) 6%,transparent),0 16px 40px -16px color-mix(in srgb,var(--vaadin-text-color) 22%,transparent)}vaadin-number-field.number-field-end-aligned::part(input){text-align: end}.payroll-summary-cards{flex-wrap: wrap}.payroll-summary-card{background: var(--aura-surface-color) padding-box;border: 1px solid var(--vaadin-border-color-secondary);border-radius: var(--vaadin-radius-m);min-width: min(100%,260px);padding: var(--vaadin-padding-m)}.payroll-summary-card-title,.payroll-summary-card-period{color: var(--vaadin-text-color-secondary)}.payroll-summary-card-title{font-size: var(--aura-font-size-s);font-weight: var(--aura-font-weight-medium)}.payroll-summary-card-amount{font-size: var(--aura-font-size-xl);font-weight: var(--aura-font-weight-semibold);margin-top: var(--vaadin-gap-xs)}.payroll-summary-card-period{font-size: var(--aura-font-size-s);margin-top: var(--vaadin-gap-xs)}vaadin-grid::part(even-row){background-color: color-mix(in srgb,var(--vaadin-background-color) 94%,var(--vaadin-text-color))}vaadin-grid::part(header-cell),vaadin-grid::part(body-cell),vaadin-grid::part(footer-cell){border-inline-end: 1px solid var(--vaadin-border-color)}vaadin-grid::part(approved),vaadin-grid::part(earning){color: green}vaadin-grid::part(deduction){color: red}vaadin-grid::part(total){color: blue}vaadin-grid::part(weekend),vaadin-grid::part(paused),vaadin-grid::part(warning){color: #FF7F50;font-weight: 600}vaadin-text-field[theme~="bordered"]::part(input-field){box-shadow: inset 0 0 0 1px var(--vaadin-input-field-border-color);background-color: var(--vaadin-input-field-background)}