.attendance-geofence { --att-ease: cubic-bezier(.22,1,.36,1); position: relative; isolation: isolate; overflow: clip; background: #faf9ff; color: #111a38; padding: 44px 0 64px; }
.attendance-geofence::before, .attendance-geofence::after { content: ''; pointer-events: none; position: absolute; z-index: -1; width: 780px; height: 470px; border: 85px solid #b9a5f5; border-radius: 50%; opacity: .055; transform: rotate(-32deg); }
.attendance-geofence::before { left: -600px; top: 90px; }
.attendance-geofence::after { right: -590px; bottom: 0; }
.attendance-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; margin-bottom: 30px; }
.attendance-stats > div { border-left: 1px solid #d9def2; padding-left: 20px; }
.attendance-stats strong { display: block; color: #0c1532; font-size: 34px; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.attendance-stats p { color: #607098; font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.attendance-geofence-layout { display: grid; grid-template-columns: .86fr 1fr; gap: 44px; align-items: center; }
.attendance-geofence-copy h2 { font-size: clamp(30px,3vw,46px); line-height: 1.13; letter-spacing: -.04em; color: #0b1230; margin: 18px 0; }
.attendance-geofence-copy > p { font-size: 16px; line-height: 1.7; color: #56688c; margin: 0; }
.attendance-geofence-copy ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.attendance-geofence-copy li { display: flex; gap: 16px; align-items: center; font-size: 14px; line-height: 1.6; }
.attendance-feature-icon { width: 45px; height: 45px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; }
.attendance-feature-icon svg { width: 25px; height: 25px; }
.attendance-purple { color: #743dea; background: #eee7ff; }
.attendance-blue { color: #086bfa; background: #e4efff; }
.attendance-green { color: #079960; background: #def8ed; }
.attendance-orange { color: #cc7309; background: #fff0d7; }
.attendance-map-card { min-width: 0; border: 1px solid #e4e8f5; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgb(25 45 85 / 5%); padding: 0 12px 12px; }
.attendance-map-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 3px; font-size: 12px; text-transform: uppercase; }
.attendance-map-card > header > span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.attendance-map-card > header i { width: 8px; height: 8px; border-radius: 50%; background: #1754f7; }
.attendance-map { position: relative; height: 280px; overflow: hidden; border-radius: 10px; background: #edf2f7; }
.attendance-map-art { width: 100%; height: 100%; position: absolute; inset: 0; }
.attendance-radius { position: absolute; height: 90%; aspect-ratio: 1; left: 48%; top: 50%; translate: -50% -50%; border: 1.5px dashed #0bbd75; border-radius: 50%; background: rgb(115 244 169 / 25%); }
.attendance-site { position: absolute; left: 48%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; z-index: 2; }
.attendance-site > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: #7544ed; box-shadow: 0 0 0 7px rgb(126 82 237 / 10%); }
.attendance-site svg { width: 27px; height: 27px; }
.attendance-site b { margin-top: 7px; padding: 4px 16px; border-radius: 12px; background: #fff; font-size: 12px; }
.attendance-good { --att-color: #039a5a; --att-soft: #e5fbef; --att-pin: #08b86a; }
.attendance-warn { --att-color: #a76400; --att-soft: #fff5dd; --att-pin: #f59b0a; }
.attendance-bad { --att-color: #c5264d; --att-soft: #ffedf2; --att-pin: #f13d67; }
.attendance-pin { position: absolute; translate: -50% -50%; width: 44px; height: 44px; padding: 4px; border: 0; background: transparent; cursor: pointer; z-index: 3; }
.attendance-pin-body { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--att-pin); border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: -2px 3px 7px rgb(20 62 55 / 15%); }
.attendance-pin svg { width: 19px; height: 19px; rotate: 45deg; }
.attendance-tooltip { position: absolute; left: 50%; bottom: calc(100% + 3px); translate: -50% 0; width: max-content; max-width: 150px; padding: 6px 8px; border-radius: 6px; color: #172441; background: #fff; box-shadow: 0 3px 12px rgb(20 35 60 / 15%); font-size: 10px; line-height: 1.5; visibility: hidden; pointer-events: none; }
.attendance-pin[data-person="5"] .attendance-tooltip { left: auto; right: 0; translate: 0; }
.attendance-pin:hover, .attendance-pin:focus-visible { z-index: 5; }
.attendance-pin:hover .attendance-tooltip, .attendance-pin:focus-visible .attendance-tooltip { visibility: visible; }
.attendance-pin:focus-visible { outline: 2px solid #245ce4; outline-offset: 3px; border-radius: 50%; }
.attendance-pin.is-active .attendance-pin-body { box-shadow: 0 0 0 5px var(--att-soft), 0 3px 8px rgb(20 35 60 / 20%); }
.attendance-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 13px 0; border-bottom: 1px solid #e9edf7; }
.attendance-legend > span { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #34496f; }
.attendance-legend i, .attendance-status i { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--att-pin); }
.attendance-legend i { box-shadow: 0 0 0 4px var(--att-soft); margin-inline: 4px; }
.attendance-log-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 8px; }
.attendance-log-heading h3 { font-size: 14px; margin: 0; }
.attendance-log-heading > span { font-size: 12px; color: #627297; }
.attendance-log { border: 1px solid #e8edf7; border-radius: 11px; overflow: hidden; }
.attendance-log-row { display: grid; grid-template-columns: 33px 46px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #e9edf7; }
.attendance-log-row:last-child { border: 0; }
.attendance-log-row.attendance-warn, .attendance-log-row.attendance-bad { background: var(--att-soft); }
.attendance-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--att-soft); color: var(--att-color); font-size: 11px; }
.attendance-log-row time { font-size: 12px; font-variant-numeric: tabular-nums; }
.attendance-person strong { display: block; font-size: 12px; line-height: 1.4; }
.attendance-person > span { display: block; font-size: 11px; color: #647599; line-height: 1.5; }
.attendance-status { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; font-size: 10px; white-space: nowrap; color: var(--att-color); background: var(--att-soft); }
.attendance-log-row.is-active { box-shadow: inset 3px 0 var(--att-pin); background: var(--att-soft); }
.attendance-motion-ready .attendance-motion-item { opacity: 0; }
.attendance-motion-ready.attendance-motion-in .attendance-motion-item { animation: attendance-enter var(--att-duration,350ms) var(--att-ease) var(--att-delay,0ms) both; }
@keyframes attendance-enter { from { opacity: 0; transform: translate(var(--att-x,0px),var(--att-y,0px)) scale(var(--att-scale,1)); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .attendance-feature-icon { transition: filter 180ms ease; } .attendance-geofence-copy li:hover .attendance-feature-icon { filter: brightness(1.04); } .attendance-pin-body { transition: scale 180ms var(--att-ease); } .attendance-pin:hover .attendance-pin-body { scale: 1.06; } }
@media (max-width:1100px) { .attendance-geofence-layout { gap: 26px; grid-template-columns: .8fr 1fr; } .attendance-geofence-copy h2 { font-size: 32px; } .attendance-geofence-copy > p { font-size: 14px; } .attendance-geofence-copy li { font-size: 12px; gap: 10px; } .attendance-log-row { gap: 6px; padding-inline: 6px; grid-template-columns: 28px 37px minmax(0,1fr) auto; } .attendance-avatar { width: 27px; height: 27px; } .attendance-status { font-size: 9px; padding-inline: 6px; } .attendance-person strong { font-size: 11px; } .attendance-person > span { font-size: 10px; } }
@media (max-width:850px) { .attendance-geofence-layout { grid-template-columns: 1fr; gap: 30px; } .attendance-geofence-copy { max-width: 680px; } .attendance-geofence-copy > p { font-size: 16px; } .attendance-geofence-copy li { font-size: 14px; } .attendance-map-card { width: 100%; max-width: 740px; margin-inline: auto; } .attendance-person strong { font-size: 13px; } .attendance-person > span { font-size: 12px; } .attendance-status { font-size: 11px; } }
@media (max-width:540px) { .attendance-geofence { padding-block: 32px 44px; } .attendance-stats { gap: 14px; grid-template-columns: 1fr; } .attendance-stats strong { font-size: 28px; } .attendance-stats p { margin-top: 4px; } .attendance-map { height: 245px; } .attendance-radius { height: auto; width: 66%; } .attendance-map-card { padding-inline: 8px; } .attendance-map-card > header { font-size: 10px; } .attendance-map-card > header > span { font-size: 9px; } .attendance-log-row { grid-template-columns: 30px 38px minmax(0,1fr); gap: 5px 8px; padding: 9px 7px; } .attendance-status { grid-column: 3; justify-self: start; font-size: 10px; padding: 3px 8px; } .attendance-person strong { font-size: 12px; } .attendance-person > span { font-size: 11px; } .attendance-log-row time { font-size: 11px; } .attendance-site > span { width: 36px; height: 36px; } .attendance-site svg { width: 23px; height: 23px; } .attendance-site b { font-size: 10px; padding: 3px 10px; } .attendance-pin-body { width: 27px; height: 27px; } .attendance-pin svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion:reduce) { .attendance-motion-ready .attendance-motion-item { opacity: 1; } .attendance-geofence * { animation: none !important; transition: none !important; transform: none !important; } }