/* Shared popup chrome for Bootstrap and native dialogs. Local content grids and widths remain intact. */
:root{--popup-radius:14px;--popup-space:20px;--popup-font-size:14px;--popup-title-size:16px}
html body :is(dialog,.modal-content){border:1px solid var(--border-color,#dce4ef)!important;border-radius:var(--popup-radius)!important;background:var(--bg-card,#fff)!important;color:var(--text-primary,#243247)!important;font-family:inherit!important;font-size:var(--popup-font-size)!important;line-height:1.5;box-shadow:0 18px 60px rgba(0,0,0,.18)!important}
html body dialog{box-sizing:border-box;max-width:calc(100vw - 24px)!important;max-height:90dvh!important;overflow:auto}
html body dialog::backdrop{background:rgba(19,38,58,.5)}
html body .modal-backdrop{background:#13263a}
html body :is(dialog,.modal-content) :is(.modal-header,.profile-picture-heading,.action-confirmation-heading),html body dialog>header,html body #employee-account-dialog>.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-color,#dce4ef)!important;background:linear-gradient(110deg,rgba(var(--primary-rgb),.07),rgba(var(--primary-rgb),.015))!important;color:var(--text-primary,#243247)!important;padding:16px var(--popup-space)!important;border-radius:var(--popup-radius) var(--popup-radius) 0 0}
html body :is(dialog,.modal-content) :is(.modal-title,h2),html body dialog>header>strong{font-family:inherit!important;font-size:var(--popup-title-size)!important;font-weight:600!important;line-height:1.4!important;margin:0;color:var(--text-primary,#243247)!important}
html body :is(dialog,.modal-content) :is(.modal-body){padding:var(--popup-space)}
html body :is(dialog,.modal-content) :is(.modal-footer,.action-confirmation-buttons,.cell-save-footer){display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border-color,#dce4ef);padding:14px var(--popup-space);background:var(--bg-card,#fff)}
html body :is(dialog,.modal-content) :is(label,.form-label){font-family:inherit;font-size:13px;font-weight:500;color:var(--text-secondary,#617187)}
html body :is(dialog,.modal-content) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-family:inherit;font-size:13px;line-height:1.5;border-color:var(--border-color,#dce4ef);border-radius:8px;color:var(--text-primary,#243247)}
html body :is(dialog,.modal-content) :is(.btn,.cell-primary,.secondary,.action-confirmation-buttons button){font-family:inherit!important;font-size:13px!important;font-weight:500;line-height:1.5;border-radius:8px}
html body :is(dialog,.modal-content) :is(.btn-primary,.cell-primary,[data-confirmation-accept]){background:var(--primary-gradient,var(--primary))!important;color:var(--brand-on-primary,#fff)!important;border-color:var(--primary)!important}
html body :is(dialog,.modal-content) :is(.btn-close,[aria-label^="Close"]){box-sizing:border-box;flex:none;width:32px!important;height:32px!important;padding:6px!important;margin:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-color,#dce4ef)!important;border-radius:8px!important;color:var(--text-secondary,#617187)!important;background-color:rgba(var(--primary-rgb),.05)!important;box-shadow:none!important;opacity:1;filter:none}
html body dialog [aria-label^="Close"]{font-size:22px!important;line-height:1!important}
html body :is(dialog,.modal-content) :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:575px){:root{--popup-space:14px;--popup-title-size:15px}html body .modal-dialog{margin:12px}html body :is(dialog,.modal-content) :is(input,select,textarea){max-width:100%}}
/* Attendance content uses the same avatar and status components as the sheet. */
.attendance-person-summary{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border-color,#dce4ef);border-radius:10px;background:rgba(var(--primary-rgb),.04);margin-bottom:16px}
.attendance-person-summary .profile-avatar{width:44px;height:44px;flex:none}
.attendance-person-summary h3{font-size:16px!important;margin:0!important}.attendance-person-summary p{margin:4px 0 0}
.attendance-person-status{margin-left:auto;border-left:1px solid var(--border-color,#dce4ef);padding-left:18px}.attendance-person-status small{display:block;margin-bottom:5px}
html body .attendance-dialog .cell-comment{border-color:var(--primary);background:rgba(var(--primary-rgb),.04)}
@media(max-width:480px){.attendance-person-summary{flex-wrap:wrap}.attendance-person-status{margin-left:0;padding:8px 0 0;border-left:0;width:100%}}