.employee-benefit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:20px 0}
.employee-benefit-card{display:grid;gap:12px;text-align:left;padding:24px;border:1px solid #476888;border-radius:16px;color:#fff;cursor:pointer;font:inherit;min-width:0;overflow-wrap:anywhere}
.employee-benefit-card b{font-size:1.1rem}.employee-benefit-card strong{font-size:clamp(1.6rem,3vw,2.2rem);color:#7affc9}.employee-benefit-card span,.employee-benefit-card small{color:#e1edff}
.employee-benefit-color-0{background:linear-gradient(125deg,#143c6f,#10243d)}.employee-benefit-color-1{background:linear-gradient(125deg,#624116,#251e15)}.employee-benefit-color-2{background:linear-gradient(125deg,#165948,#102d29)}.employee-benefit-color-3{background:linear-gradient(125deg,#503574,#231831)}
.employee-benefit-card:focus-visible{outline:3px solid #74caff;outline-offset:3px}.employee-benefit-card:hover{filter:brightness(1.15)}
#employee-commission-dialog{box-sizing:border-box;width:min(820px,94vw);max-height:88vh;overflow:auto;padding:26px;border:1px solid #3e5c75;border-radius:16px;background:#111923;color:#edf5ff;box-shadow:0 24px 80px #0009}
#employee-commission-dialog::backdrop{background:#02050acc}
#employee-commission-dialog p{color:#bbccdd;line-height:1.5}
#employee-commission-dialog .dialog-close{float:right;font-size:24px}
#employee-commission-dialog button{padding:11px 14px;border:1px solid #41637d;border-radius:8px;background:#173148;color:#edf5ff;font:inherit;cursor:pointer}
#employee-commission-dialog button.primary{background:#098a71;border-color:#19ba99}
#employee-commission-dialog button:disabled{opacity:.5;cursor:not-allowed}
#employee-commission-dialog form{display:grid;gap:12px;padding:18px 0;border-top:1px solid #31465c;margin-top:18px}
#employee-commission-dialog label{display:grid;gap:6px;font-weight:650}
#employee-commission-dialog input,#employee-commission-dialog select{width:100%;min-width:0;box-sizing:border-box;padding:12px;background:#0c1622;border:1px solid #46647e;border-radius:8px;color:#fff;font:inherit}
#employee-commission-dialog button:focus-visible,#employee-commission-dialog input:focus-visible,#employee-commission-dialog select:focus-visible{outline:2px solid #5fc5ff;outline-offset:3px}
.employee-benefit-total{display:grid;gap:8px;background:#0c1622;padding:18px;border:1px solid #31465c;border-radius:12px}.employee-benefit-total strong{color:#79e7c5;font-size:2rem}
.employee-benefit-days{display:grid;gap:10px}.employee-benefit-days article{display:grid;gap:6px;padding:14px;background:#0c1622;border:1px solid #31465c;border-radius:10px;overflow-wrap:anywhere}
#employee-commission-dialog [data-benefit-error],#employee-commission-dialog .commission-warning{color:#ffcb70}
@media(max-width:600px){#employee-commission-dialog{padding:18px 14px}.employee-benefit-card{padding:20px}}
#employee-commission-cards [data-refresh-benefits]{padding:11px 14px;border:1px solid #41637d;border-radius:8px;background:#173148;color:#edf5ff;font:inherit;cursor:pointer}
.commission-calendar-months{display:grid;grid-template-columns:1fr 1fr;gap:20px}.commission-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.commission-calendar-grid>span{padding:8px 0;color:#9eb9ce}#employee-commission-dialog .commission-calendar-grid button{padding:10px 0;min-height:42px;background:#12273a;border-color:transparent}#employee-commission-dialog .commission-calendar-grid button.selected{background:#087c68;border-color:#62e4c4}#employee-commission-dialog .commission-calendar-grid button.in-range{background:#164d48}.commission-calendar-toolbar{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:center;margin-top:16px}.commission-range-shortcuts{display:flex;flex-wrap:wrap;gap:8px}[data-range-picker]{padding:16px;border:1px solid #41637d;border-radius:12px}[data-range-picker][hidden]{display:none!important}[data-range-summary]{color:#8ce8cb;font-size:.92rem}@media(max-width:600px){.commission-calendar-months{grid-template-columns:1fr}.commission-calendar-months>section:nth-child(2){display:none}.commission-calendar-toolbar{gap:4px}[data-range-picker]{padding:10px}}