:root {
  --af-navy: #112b59;
  --af-blue: #2778df;
  --af-gold: #ffbc22;
  --af-green: #38a66d;
  --af-ink: #13284d;
  --af-muted: #626873;
  --af-border: #e8dfd2;
  --af-paper: #fffdf9;
}

html.af-modal-open,
html.af-modal-open body { overflow: hidden !important; }

.af-modal-overlay[hidden] { display: none !important; }
.af-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  background: rgba(18, 23, 29, .55);
  backdrop-filter: blur(1px);
}

.attendance-finding-row[tabindex="0"] { cursor: pointer; }
.attendance-finding-row[tabindex="0"]:focus-visible { outline: 3px solid rgba(45, 123, 229, .3); outline-offset: -3px; }
.attendance-finding-date {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.attendance-finding-date:hover b { color: #1766ad; text-decoration: underline; text-underline-offset: 3px; }
#tab-worked [data-worked-shift-detail="1"] { cursor: pointer; transition: box-shadow .15s ease, filter .15s ease; }
#tab-worked [data-worked-shift-detail="1"]:hover { filter: brightness(.985); box-shadow: inset 0 0 0 1px rgba(35, 91, 145, .2); }
#tab-worked [data-worked-shift-detail="1"]:focus-visible { outline: 3px solid rgba(45, 123, 229, .3); outline-offset: -3px; }

.af-modal-overlay .af-modal {
  width: min(860px, calc(100vw - 24px));
  height: min(628px, calc(100vh - 24px));
  max-width: none;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--af-ink);
  background: var(--af-paper);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 15px !important;
  box-shadow: 0 22px 65px rgba(8, 16, 27, .27) !important;
  font-family: Arial, Helvetica, sans-serif;
}

.af-modal-content {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 22px 22px 10px;
}

.af-header {
  display: flex;
  flex: 0 0 52px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
}
.af-modal .af-header h2 {
  margin: 0;
  color: #10213f !important;
  font: 500 34px/.98 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.035em;
}
.af-header p {
  margin: 4px 0 0;
  color: #4f5661;
  font: 400 12px/1.15 Arial, Helvetica, sans-serif;
}
.af-header > button {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #dce3ed !important;
  border-radius: 50% !important;
  color: #101b2e !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(20, 31, 48, .08) !important;
  font: 400 21px/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer;
}
.af-header > button:hover { background: #f4f7fb !important; transform: translateY(-1px); }
.af-header > button:focus-visible,
.af-footer button:focus-visible { outline: 3px solid rgba(45, 123, 229, .28); outline-offset: 2px; }

.af-summary {
  display: grid;
  grid-template-columns: 210px 1px 120px 130px minmax(194px, 1fr) 86px 75px;
  flex: 0 0 54px;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  margin: 14px 0;
}
.af-summary-worked {
  grid-template-columns: 200px 1px 105px 115px minmax(140px, 1fr) 115px 78px;
}
.af-person {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding-right: 13px;
}
.af-person .attendance-avatar,
.af-avatar-fallback {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50% !important;
  background: #e8ddcf;
  box-shadow: 0 0 0 1px #d7cbbb, 0 4px 10px rgba(25, 39, 59, .11) !important;
}
.af-person .attendance-avatar img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit !important;
  object-fit: cover;
  box-shadow: none !important;
}
.af-avatar-fallback { color: #fff; background: #1f4d78; font-size: 13px; font-weight: 800; }
.af-person strong {
  display: block;
  overflow: hidden;
  color: #13284d;
  font: 700 15px/1.12 Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-person span { display: block; margin-top: 3px; color: #66645f; font: 400 11px/1.15 Arial, Helvetica, sans-serif; }
.af-summary-divider { background: var(--af-border); }
.af-summary-block { min-width: 0; padding: 1px 12px; border-right: 1px solid var(--af-border); box-sizing: border-box; }
.af-summary-block:last-child { padding-right: 0; border-right: 0; }
.af-summary-block > span {
  display: block;
  margin-bottom: 7px;
  color: #455271;
  font: 800 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.af-summary-block b { display: block; color: #172848; font: 700 11px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; }
.af-summary-block small { display: block; margin-top: 3px; color: #68645d; font: 400 9.5px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; }
.af-summary-block.findings > div { display: flex; flex-wrap: nowrap; gap: 5px; }
.af-finding-pill,
.af-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 999px !important;
  font: 800 8.5px/1 Arial, Helvetica, sans-serif;
  font-style: normal;
  white-space: nowrap;
}
.af-finding-pill.amber { color: #a85c00; background: #ffedc5; }
.af-finding-pill.blue { color: #1765bc; background: #e3f0ff; }
.af-finding-pill.red { color: #b51e31; background: #ffe4e6; }
.af-finding-pill.violet { color: #71409b; background: #f1e7fa; }
.af-meta-pill { color: #885d0c; background: #fff0c9; text-transform: uppercase; }
.af-meta-pill.severity-critical,
.af-meta-pill.severity-major { color: #af2636; background: #ffe1e4; }
.af-meta-pill.severity-informational,
.af-meta-pill.severity-approval { color: #245e9f; background: #e1efff; }
.af-meta-pill.status-open,
.af-meta-pill.status-pending,
.af-meta-pill.status-pending_review { color: #a65c10; background: #ffead1; }
.af-meta-pill.status-resolved,
.af-meta-pill[class*="status-resolved"] { color: #11784b; background: #dcf4e8; }
.af-meta-pill.status-under_review { color: #215a9a; background: #e3effe; }

.af-main {
  display: grid;
  grid-template-columns: 448px 358px;
  flex: 0 0 404px;
  gap: 10px;
  min-height: 0;
}
.af-modal .af-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--af-border);
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 2px rgba(26, 34, 46, .025) !important;
  box-sizing: border-box;
}
.af-clock-panel { height: 404px; padding: 12px 12px 10px; }
.af-clock-panel > header { height: 31px; }
.af-clock-panel > header b { display: block; color: #18243a; font: 800 10.5px/1.05 Arial, Helvetica, sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.af-clock-panel > header span { display: block; margin-top: 4px; color: #716c66; font: 400 9.5px/1.1 Arial, Helvetica, sans-serif; }
.af-clock-stage { display: grid; height: 311px; min-height: 0; place-items: center; overflow: visible; }
.af-clock-svg { display: block; width: 360px; height: 311px; max-width: 100%; overflow: visible; }
.af-clock-face { fill: #faf9f6; stroke: #e6e0d8; stroke-width: 1; }
.af-clock-tick { stroke: #8d98a8; stroke-width: 1.2; }
.af-clock-tick.major { stroke: #1d426f; stroke-width: 2.5; }
.af-clock-axis-label { fill: #1f3762; font: 700 10px Arial, Helvetica, sans-serif; }
.af-clock-sector { stroke: none; }
.af-clock-scheduled { fill: var(--af-blue); opacity: .9; }
.af-clock-actual { fill: var(--af-gold); opacity: .9; }
.af-clock-overlap { fill: var(--af-green); opacity: .78; }
.af-clock-center { fill: #173767; }
.af-clock-marker line { stroke-width: 1; stroke-dasharray: 2 2; }
.af-clock-marker text { fill: #4c5360; font: 9px Arial, Helvetica, sans-serif; }
.af-clock-marker .af-clock-marker-time { font-weight: 800; }
.af-clock-marker.scheduled line { stroke: #246fd0; }
.af-clock-marker.scheduled .af-clock-marker-time { fill: #205caa; }
.af-clock-marker.actual line { stroke: #eda90c; }
.af-clock-marker.actual .af-clock-marker-time { fill: #c98200; }

.af-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 40px;
  gap: 7px;
  padding: 7px 8px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 8px !important;
  background: #faf7f1;
}
.af-legend > div { display: flex; align-items: flex-start; min-width: 0; gap: 7px; }
.af-legend > div > i { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 1px; border-radius: 50% !important; }
.af-legend i.scheduled { background: var(--af-blue); }
.af-legend i.actual { background: var(--af-gold); }
.af-legend i.overlap { background: var(--af-green); }
.af-legend span { min-width: 0; }
.af-legend b, .af-legend small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-legend b { color: #253858; font: 700 8px/1.1 Arial, Helvetica, sans-serif; }
.af-legend small { margin-top: 2px; color: #6c7480; font: 400 7px/1.1 Arial, Helvetica, sans-serif; }

.af-side { display: grid; grid-template-rows: 294px 100px; gap: 10px; min-height: 0; }
.af-time-panel { height: 294px; padding: 12px 13px 8px; }
.af-modal .af-time-panel h3,
.af-modal .af-notes-panel h3 { margin: 0 0 7px; color: #18345f !important; font: 800 10.5px/1 Arial, Helvetica, sans-serif !important; letter-spacing: .045em; text-transform: uppercase; }
.af-time-row {
  display: grid;
  grid-template-columns: 18px minmax(86px, 1fr) minmax(104px, auto);
  align-items: center;
  min-height: 29px;
  border-top: 1px solid #e4e6e8;
  gap: 6px;
  box-sizing: border-box;
}
.af-time-row i { color: #264d82; font: 400 12px/1 Arial, Helvetica, sans-serif; font-style: normal; text-align: center; }
.af-time-row span { color: #50617d; font: 400 9.5px/1.1 Arial, Helvetica, sans-serif; }
.af-time-row b { color: #172848; font: 700 9.5px/1.1 Arial, Helvetica, sans-serif; text-align: right; white-space: nowrap; }
.af-time-row.negative b,
.af-time-row.warning b { color: #c9293c; }
.af-modal.is-worked-shift .af-time-row { min-height: 21px; }
.af-modal.is-worked-shift .af-time-row span,
.af-modal.is-worked-shift .af-time-row b { font-size: 8.5px; }
.af-notes-panel { height: 100px; padding: 12px 13px; }
.af-notes-panel > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-height: 35px;
  padding-top: 9px;
  overflow: hidden;
  border-top: 1px solid #e4e6e8;
  color: #50617d;
  font: 400 9px/1.35 Arial, Helvetica, sans-serif;
}
.af-notes-panel > div:nth-of-type(n+3) { display: none; }
.af-notes-panel i { color: #214a82; font-style: normal; }
.af-notes-panel span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.af-notes-panel small { display: block; margin: 6px 0 0 20px; overflow: hidden; color: #8a8175; font: 400 7.5px/1.1 Arial, Helvetica, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

.af-footer {
  display: flex;
  flex: 0 0 43px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--af-border);
  box-sizing: border-box;
}
.af-navigation,
.af-actions { display: flex; align-items: center; gap: 8px; }
.af-footer button {
  min-height: 31px;
  height: 31px;
  padding: 0 16px !important;
  border: 1px solid #d7dfeb !important;
  border-radius: 999px !important;
  color: #17305a !important;
  background: #fff !important;
  box-shadow: none !important;
  font: 800 9px/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer;
  white-space: nowrap;
}
.af-footer button:hover:not(:disabled) { border-color: #9fb2cf !important; background: #f7f9fc !important; transform: translateY(-1px); }
.af-footer button:disabled { opacity: .4; cursor: default; }
.af-footer button.primary { min-width: 120px; border-color: #171918 !important; color: #fff !important; background: #171918 !important; }
.af-footer button.primary:hover { color: #fff !important; background: #252827 !important; }
.af-footer button.danger { border-color: #c63749 !important; color: #fff !important; background: #b82337 !important; }
.af-footer button.danger:hover { border-color: #98192a !important; color: #fff !important; background: #98192a !important; }

@media (max-width: 820px), (max-height: 650px) {
  .af-modal-overlay .af-modal { width: min(840px, calc(100vw - 12px)); height: min(604px, calc(100vh - 12px)); }
  .af-modal-content { padding: 13px 16px 8px; }
  .af-header { flex-basis: 47px; }
  .af-modal .af-header h2 { font-size: 30px !important; }
  .af-summary { grid-template-columns: 200px 1px 112px 120px minmax(160px, 1fr) 80px 72px; margin: 10px 0; }
  .af-summary-worked { grid-template-columns: 185px 1px 100px 105px minmax(140px, 1fr) 110px 72px; }
  .af-main { grid-template-columns: minmax(420px, 1.25fr) minmax(335px, 1fr); flex-basis: 394px; }
  .af-clock-panel { height: 394px; }
  .af-clock-stage { height: 301px; }
  .af-side { grid-template-rows: 286px 98px; }
  .af-time-panel { height: 286px; }
  .af-notes-panel { height: 98px; }
  .af-footer { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .af-modal-overlay *, .af-modal-overlay *::before, .af-modal-overlay *::after { scroll-behavior: auto !important; transition: none !important; }
}