/* HIG navigation and chat badges 1.1.0. All navigation areas, every theme and color mode. */
html body #app .card .tm-event-rsvp-label,
html[data-teamilo-hig] body #app :is(.unread-badge[data-unread-context="navigation"], .sidebar .unread-badge, .bottom .unread-badge, .unread-badge[data-unread-for="chat"], .channel-list .unread-badge, .tm-account-chat-badge),
html[data-teamilo-hig] body #hig-direct-root .hig-dm-badge {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  width:auto!important;
  min-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:6px!important;
  background:#d92d32!important;
  color:#fff!important;
  opacity:1!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:800!important;
  font-style:normal!important;
  font-variant-numeric:tabular-nums;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-indent:0!important;
  white-space:nowrap!important;
  vertical-align:middle;
}
/* Keep zero/empty counts hidden, including after live updates. */
html[data-teamilo-hig] body #app :is(.unread-badge[data-unread-context="navigation"], .sidebar .unread-badge, .bottom .unread-badge, .unread-badge[data-unread-for="chat"], .channel-list .unread-badge, .tm-account-chat-badge):is([hidden], :empty),
html[data-teamilo-hig] body #hig-direct-root .hig-dm-badge:is([hidden], :empty) {
  display:none!important;
}

/* Individual events use the regular card surface in every response state. */
html body #app .card.tm-event-rsvp-open {
  border: 2px solid var(--tm-rsvp-frame) !important;
}
@media (forced-colors: active) {
  html body #app .card.tm-event-rsvp-open {
    border: 3px double ButtonText !important;
  }
}

/* Keep the entire localized status readable if space or text zoom requires a second line. */
html body #app .card.tm-event-rsvp-open .tm-event-rsvp-label {
  max-width: 100%;
  height: auto !important;
  min-height: 24px !important;
  padding-block: 4px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* TEAMilo input focus and event card border */
:root {
  --tm-rsvp-accent: var(--ap-primary, var(--hig-accent, currentColor));
  --tm-rsvp-frame: var(--tm-rsvp-accent);
}
:root[data-tm-design="luminous-orange"] {
  --tm-rsvp-accent: var(--ap-highlight, var(--ap-primary, currentColor));
}
@supports (color: color-mix(in srgb, red, black)) {
  :root[data-tm-mode="light"] {
    --tm-rsvp-frame: color-mix(in srgb, var(--tm-rsvp-accent) 58%, #000);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-tm-mode="dark"]) {
      --tm-rsvp-frame: color-mix(in srgb, var(--tm-rsvp-accent) 58%, #000);
    }
  }
}
@media (forced-colors: active) {
  :root {
    --tm-rsvp-frame: ButtonText !important;
  }
}

/* Scoped control variables also cover older, more specific dialog rules.
   Unfocused fields retain the neutral template border. */
html body :is(
  select,
  input:not([type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  textarea,
  [contenteditable]:not([contenteditable="false"]),
  [role="textbox"],
  [role="combobox"],
  [aria-haspopup="listbox"]
):focus,
html body .tm-team-picker:focus-within {
  --hig-focus: var(--tm-rsvp-frame);
  --hig-line: var(--tm-rsvp-frame);
  --ap-line: var(--tm-rsvp-frame);
  outline: 3px solid var(--tm-rsvp-frame) !important;
  outline-offset: 3px;
  border-color: var(--tm-rsvp-frame) !important;
}