/* Attendance is a compact dialog, independent of fullscreen document rules. */
@media screen {
 html body #detailModal#detailModal:has(.attendance-modal-shell) {
  position:fixed!important; inset:0!important; width:100%!important; height:100dvh!important;
  min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important;
  margin:0!important; padding:16px!important; display:flex!important;
  align-items:center!important; justify-content:center!important; place-items:center!important;
  background:rgba(15,23,42,.3)!important; overflow:hidden!important; box-sizing:border-box!important;
 }
 html body #detailModal#detailModal.is-hidden:has(.attendance-modal-shell){display:none!important}
 html body #detailModal#detailModal:has(.attendance-modal-shell) > .detail-modal-card {
  flex:0 0 auto!important; position:relative!important; inset:auto!important; transform:none!important;
  width:min(380px,calc(100vw - 32px),calc(100dvh - 32px))!important;
  height:min(380px,calc(100vw - 32px),calc(100dvh - 32px))!important;
  min-width:0!important; min-height:0!important; max-width:380px!important; max-height:380px!important;
  margin:0!important; padding:16px!important; display:flex!important; flex-direction:column!important;
  border:1px solid #dce5f2!important; border-radius:16px!important; background:#fff!important;
  box-shadow:0 20px 65px #0f172a30!important; overflow:hidden!important; box-sizing:border-box!important;
 }
 html body #detailModal#detailModal:has(.attendance-modal-shell) .section-title-row{flex:0 0 auto!important;margin:0 0 10px!important;padding:0 0 8px!important}
 html body #detailModal#detailModal:has(.attendance-modal-shell) h2{font-size:18px!important;margin:3px 0!important}
 html body #detailModal#detailModal:has(.attendance-modal-shell) :is(.detail-modal-body,.erp-detail-frame,.erp-detail-content){width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;max-width:100%!important;padding:0!important;margin:0!important;box-sizing:border-box!important}
 html body #detailModal#detailModal:has(.attendance-modal-shell) .detail-modal-body{flex:1 1 auto!important;overflow:auto!important}
 html body #detailModal#detailModal .attendance-modal-shell{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important;width:100%!important;min-height:0!important;gap:10px!important;padding:0!important}
 html body #detailModal#detailModal .attendance-modal-hero{padding:10px!important;margin:0!important;border-radius:10px!important;gap:8px!important;min-height:0!important}
 html body #detailModal#detailModal .attendance-modal-hero strong{font-size:22px!important}
 html body #detailModal#detailModal .attendance-modal-shell p{font-size:12px!important;margin:4px 0!important}
 html body #detailModal#detailModal .attendance-summary-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
 html body #detailModal#detailModal .attendance-status-card{padding:10px!important;min-height:0!important;border-radius:10px!important}
 html body #detailModal#detailModal .attendance-status-card strong{font-size:20px!important;margin:4px 0!important}
 html body #detailModal#detailModal .attendance-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
 html body #detailModal#detailModal .attendance-actions button{width:100%!important;padding:9px 6px!important;min-width:0!important;font-size:12px!important;border-radius:9px!important}
}

@media screen {
 html body #detailModal#detailModal .attendance-actions .attendance-action-in {
  background:#169b50!important; color:#fff!important; border:1px solid #128443!important;
 }
 html body #detailModal#detailModal .attendance-actions .attendance-action-out {
  background:#dc3545!important; color:#fff!important; border:1px solid #bc2736!important;
 }
 html body #detailModal#detailModal .attendance-actions button:disabled {
  opacity:1!important; box-shadow:none!important; cursor:not-allowed!important;
 }
 html body #detailModal#detailModal .attendance-actions .attendance-action-in:disabled {
  background:#dcefe4!important; color:#22663d!important; border-color:#a5cfb5!important;
 }
 html body #detailModal#detailModal .attendance-actions .attendance-action-out:disabled {
  background:#f7dfe2!important; color:#922b3a!important; border-color:#e0a7af!important;
 }
}

/* Always open the attendance clock as a centered overlay. */
@media screen {
 html body #detailModal#detailModal:has(.attendance-modal-shell):not(.is-hidden) {
  position:fixed!important; top:0!important; right:0!important; bottom:0!important; left:0!important;
  width:100vw!important; height:100dvh!important; margin:0!important;
  display:flex!important; flex-direction:row!important; align-items:center!important;
  justify-content:center!important; align-content:center!important;
  background:rgba(30,41,59,.34)!important;
  backdrop-filter:blur(6px)!important; -webkit-backdrop-filter:blur(6px)!important;
  z-index:9999!important;
 }
 html body #detailModal#detailModal:has(.attendance-modal-shell) > .detail-modal-card {
  align-self:center!important; margin:0!important; flex-shrink:0!important;
 }
 html body:has(#detailModal:not(.is-hidden) .attendance-modal-shell) { overflow:hidden!important; }
}