/* Aayan status surfaces. The existing control owns its text, action and state.
   Match semantic markers on the server-rendered UI, including HTMX fragments. */
body.aayan-material {
  --ay-state-ok: #23714d;
  --ay-state-wait: #926014;
  --ay-state-alert: #ab3c44;
  --ay-state-info: #34658f;
}
html.dark body.aayan-material, body.aayan-material.dark {
  --ay-state-ok: #82d1a4;
  --ay-state-wait: #efc068;
  --ay-state-alert: #f19999;
  --ay-state-info: #9cc6e9;
}
body.aayan-material :is(
  .ay-status, .oh-row-status-indication, button:has(> .rounded-full[class*="--dot"]),
  .am-status-key .md-pie-chip, .doc-status-pill, .status-pill:is(.status-yes,.status-no),
  .d-flex.align-items-center:has(> .oh-dot--color + span),
  .m-3:has(> .oh-dot--small)
) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45em;
  max-width: 100%;
  width: fit-content;
  min-height: 1.7rem;
  box-sizing: border-box;
  padding: .18rem .66rem !important;
  border: 1px solid var(--ay-line) !important;
  border-color: color-mix(in srgb, var(--ay-state, var(--ay-muted)) 26%, var(--ay-surface)) !important;
  border-radius: 999px !important;
  background: var(--ay-surface) !important;
  background: color-mix(in srgb, var(--ay-state, var(--ay-muted)) 8%, var(--ay-surface)) !important;
  color: var(--ay-ink) !important;
  box-shadow: inset 0 1px 0 #ffffff17, 0 1px 2px #24151e0e;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
}
body.aayan-material :is(
  .ay-status__dot, .oh-row-status-indication > span:first-child,
  button > .rounded-full[class*="--dot"], .am-status-key .md-pie-chip__dot,
  .doc-status-dot, .d-flex.align-items-center > .oh-dot--color,
  .m-3 > .oh-dot--small, .hv-status > .hv-state-mark
) {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  inline-size: .51rem;
  block-size: .51rem;
  margin: 0 !important;
  border-radius: 50%;
}
/* Chart and filter dots keep their native color, which also keys the chart bars. */
body.aayan-material :is(.ay-status__dot, .doc-status-pill > .doc-status-dot) {
  background-color: var(--ay-state, var(--ay-muted)) !important;
}
body.aayan-material :is(
  .ay-status:is([data-state=approved],[data-state=completed],[data-state=resolved],[data-state=paid],[data-state=online]), .doc-status-pill.bg-success, .status-pill.status-yes,
  :is(button,.d-flex):has(> :is(.approved--dot,.approved-request--dot,.completed--dot,.validated--dot,.paid--dot,.online--dot,.oh-dot--success)),
  [data-chart-id=overtime_dept] .md-pie-chip:has(> [style*="#22c55e"])
) { --ay-state: var(--ay-state-ok); }
body.aayan-material :is(
  .ay-status:is([data-state=pending],[data-state=requested],[data-state=cancel_requested]), .doc-status-pill.bg-warning, .status-pill.status-no,
  :is(button,.d-flex):has(> :is(.requested--dot,.cancel_requested--dot,.review_ongoing--dot,.oh-dot--info)),
  [data-chart-id=overtime_dept] .md-pie-chip:has(> [style*="#f59e0b"])
) { --ay-state: var(--ay-state-wait); }
body.aayan-material :is(
  .ay-status:is([data-state=rejected],[data-state=canceled],[data-state=cancelled],[data-state=expired]), .doc-status-pill.bg-danger,
  :is(button,.d-flex):has(> :is(.rejected--dot,.canceled--dot,.cancelled--dot,.oh-dot--danger))
) { --ay-state: var(--ay-state-alert); }
body.aayan-material :is(.ay-status[data-state=progress], button:has(> :is(.in-progress--dot,.in_progress--dot))) { --ay-state: var(--ay-state-info); }
body.aayan-material .status-pill:is(.status-yes,.status-no)::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--ay-state);
}
body.aayan-material .d-flex.align-items-center:has(> .oh-dot--color) > span + span { color: inherit !important; }
body.aayan-material #mainHeader .ay-presence {
  min-height: 1.1rem;
  padding: 0 .42rem !important;
  font-size: .65rem;
}
@media (min-width: 768px) {
  body.aayan-material #mainHeader button:has(.ay-presence) img + span.absolute.rounded-full { display: none; }
}
body.aayan-material :is(button.oh-row-status-indication,button:has(> .rounded-full[class*="--dot"])):focus-visible {
  outline: 2px solid var(--ay-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  body.aayan-material :is(
    .ay-status:is([data-state=pending],[data-state=requested],[data-state=cancel_requested],[data-state=progress]) > .ay-status__dot,
    .doc-status-pill.bg-warning > .doc-status-dot, .hv-status-checking > .hv-state-mark,
    button > :is(.requested--dot,.review_ongoing--dot,.cancel_requested--dot,.in-progress--dot,.in_progress--dot),
    .d-flex.align-items-center > .oh-dot--info,
    [data-chart-id=overtime_dept] .am-status-key .md-pie-chip > [style*="#f59e0b"]
  )::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid var(--ay-state, currentColor);
    border-radius: inherit;
    pointer-events: none;
    animation: ay-status-wave 2.3s ease-out infinite;
  }
  @keyframes ay-status-wave {
    0%, 20% { opacity: .52; transform: scale(.65); }
    76%, 100% { opacity: 0; transform: scale(1.6); }
  }
}
@media (forced-colors: active) {
  body.aayan-material :is(.ay-status__dot,.doc-status-dot,.am-status-key .md-pie-chip__dot) { outline: 1px solid CanvasText; }
}