.employee-approval-trigger { display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; margin:0; border:1px solid #d9e2f6; border-radius:12px; background:#f1f5ff; color:#283f9c; font:inherit; text-align:left; cursor:pointer; }
.employee-approval-trigger strong { margin-left:auto; }
.employee-approval-dialog { box-sizing:border-box; width:min(500px,calc(100% - 28px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid #e2e7f0; border-radius:20px; color:#202e48; background:#fff; box-shadow:0 24px 80px #15294c40; overflow:auto; }
.employee-approval-dialog::backdrop { background:#14263b75; backdrop-filter:blur(3px); }
.employee-approval-dialog button, .employee-approval-dialog textarea { font:inherit; }
.employee-approval-header { display:flex; justify-content:space-between; gap:16px; padding:24px 26px 18px; border-bottom:1px solid #e8edf4; }
.employee-approval-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:.04em; color:#4561c1; margin-bottom:8px; }
.employee-approval-dialog h2 { font-size:21px; line-height:1.4; margin:0 0 8px; letter-spacing:-.6px; }
.employee-approval-header p { margin:0; font-size:13px; color:#66758b; }
.employee-approval-header > button { border:0; background:#f3f5f9; border-radius:50%; width:34px; height:34px; flex:0 0 auto; font-size:23px; color:#53647c; cursor:pointer; }
.employee-approval-body { padding:20px 26px 8px; }
.employee-approval-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:18px; }
.employee-approval-tabs button { flex:0 0 auto; display:flex; gap:8px; align-items:center; padding:9px 12px; border:1px solid #e0e6ee; border-radius:9px; background:white; color:#52627a; cursor:pointer; }
.employee-approval-tabs button[aria-pressed=true] { border-color:#4965d0; color:#304bc0; background:#f0f3ff; }
.employee-approval-tabs small { font-size:11px; }
.employee-approval-person { display:flex; align-items:center; gap:12px; }
.employee-approval-avatar { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:14px; background:#e9eefc; color:#3452b9; font-weight:700; }
.employee-approval-person h3 { margin:0; font-size:18px; }
.employee-approval-person p { margin:3px 0 0; color:#76829a; font-size:12px; }
.employee-approval-kind { margin-left:auto; padding:5px 9px; border-radius:6px; background:#edf7f4; color:#187864; font-size:12px; font-weight:600; }
.employee-approval-details { margin:20px 0; }
.employee-approval-details > div { display:grid; grid-template-columns:68px minmax(0,1fr); gap:8px; padding:8px 0; font-size:14px; }
.employee-approval-details dt { color:#78859a; }
.employee-approval-details dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.employee-approval-reason { white-space:pre-wrap; line-height:1.6; }
.employee-approval-overlap { border-top:1px solid #e7ecf3; border-bottom:1px solid #e7ecf3; padding:16px 0; }
.employee-approval-overlap h4 { margin:0 0 12px; font-size:13px; }
.employee-approval-overlap h4 span { color:#4863c2; margin-left:6px; }
.employee-approval-overlap ul { padding:0; margin:0; list-style:none; }
.employee-approval-overlap li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:8px 0; font-size:13px; }
.employee-approval-overlap li span, .employee-approval-overlap p { color:#6e7d91; font-size:12px; }
.employee-approval-overlap p { margin:0; }
.employee-approval-hint { font-size:12px; line-height:1.6; color:#5c6f91; margin:14px 0 18px; }
.employee-approval-reject-label { display:block; font-size:12px; margin-bottom:8px; }
.employee-approval-reject-label span { margin-left:6px; color:#8b96a7; }
/* One line tall so the buttons stay on screen; it grows as the head types a longer reason. */
.employee-approval-dialog textarea { width:100%; box-sizing:border-box; resize:none; overflow-y:auto; min-height:42px; max-height:120px; line-height:20px; padding:10px 12px; border:1px solid #d9e0ed; border-radius:9px; color:#24354f; background:#fafbfe; }
.employee-approval-dialog :focus-visible { outline:3px solid #9caff7; outline-offset:2px; }
.employee-approval-message { min-height:18px; margin:10px 0; font-size:12px; color:#3c6388; overflow-wrap:anywhere; }
.employee-approval-message.is-error { color:#b32636; }
/* Reject sits alone on the left, approve on the right, so one cannot be tapped for the other. */
.employee-approval-footer { display:flex; justify-content:space-between; gap:10px; padding:16px 26px 22px; background:#f8faff; border-top:1px solid #e8edf4; }
.employee-approval-footer button { min-height:42px; min-width:108px; padding:0 18px; border-radius:9px; }
.employee-approval-empty { padding:20px 0; color:#718098; }
.employee-approval-confirm p { font-size:14px; line-height:1.65; color:#65758d; }
.employee-approval-confirm label { display:block; font-size:13px; margin:20px 0 8px; }
.scan-leave-cancel-button { padding:5px 10px; font-size:12px; margin-top:6px; justify-self:end; }
.scan-leave-approval-detail { grid-column:1 / -1; color:#697991; font-size:12px; overflow-wrap:anywhere; }
@media (max-width:480px) { .employee-approval-header { padding:20px 18px 16px; } .employee-approval-body { padding:18px 18px 8px; } .employee-approval-footer { padding:14px 18px 18px; } .employee-approval-dialog h2 { font-size:19px; } .employee-approval-kind { max-width:90px; overflow-wrap:anywhere; } }

.employee-approval-person > div { min-width:0; overflow-wrap:anywhere; }
.employee-approval-dialog h2, .employee-approval-confirm p { word-break:keep-all; overflow-wrap:anywhere; }
.employee-approval-overlap li { overflow-wrap:anywhere; }

/* Compact approval dialog: the reject and approve buttons stay visible on phones. */
.employee-approval-header.is-compact { align-items:center; padding:14px 18px 12px; }
.employee-approval-header.is-compact h2 { margin:0; font-size:18px; color:#3157d5; }
.employee-approval-header.is-compact h2 small { margin-left:4px; font-size:13px; font-weight:600; color:#66758b; letter-spacing:0; }
.employee-approval-header.is-compact + .employee-approval-body { padding:12px 18px 2px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-tabs { padding-bottom:10px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-details { margin:8px 0 10px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-details > div { padding:3px 0; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-overlap { padding:10px 0; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-overlap h4 { margin:0; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-overlap ul { margin-top:6px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-overlap li { margin:4px 0; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-hint { margin:8px 0 10px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-reject-label { margin-bottom:6px; }
.employee-approval-header.is-compact + .employee-approval-body .employee-approval-message { min-height:0; margin:6px 0; }
.employee-approval-header.is-compact ~ .employee-approval-footer { padding:10px 18px 14px; }
/* Label and value share one baseline and line height so they line up exactly. */
.employee-approval-details > div { align-items:baseline; line-height:20px; }
.employee-approval-details dt, .employee-approval-details dd { line-height:20px; }