/* The inspector actions are one aligned 2-by-2 grid, kept in their original DOM. */
html body #root .profile-sidebar-panel > .profile-sidebar-identity {
  order: -3 !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions {
  order: -2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-top: 1px solid #d7e2df !important;
  border-bottom: 0 !important;
  background: #fff !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control {
  order: -1 !important;
  width: 100% !important;
  padding-bottom: 0 !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

/* Borders belong to the cells, so they cannot drift away when a cell is hovered. */
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > [aria-label="Pontaj"] {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d7e2df !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #20242a !important;
  transform: none !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action:first-child,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button {
  border-right: 1px solid #d7e2df !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action + .profile-header-contact-action {
  border-left: 0 !important;
  background-image: none !important;
}

/* Remove the former floating separators and green strokes. */
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions::before,
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions::after,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar::after,
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action::before,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button::after,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > [aria-label="Pontaj"]::before {
  content: none !important;
  display: none !important;
}

/* Match the raised Activ tile: no scaling or outline, just shadow and a short teal accent. */
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action:is(:hover, :focus, :active),
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button:is(:hover, :focus, :active),
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > [aria-label="Pontaj"]:is(:hover, :focus-within, :active) {
  z-index: 2 !important;
  transform: none !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 12px 24px #0f172a21 !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action:is(:hover, :focus, :active)::before,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button:is(:hover, :focus, :active)::after,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > [aria-label="Pontaj"]:is(:hover, :focus-within, :active)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  top: calc(50% - 16px) !important;
  bottom: auto !important;
  width: 3px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #12a89c !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-contact-actions > .profile-header-contact-action:focus-visible,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button:focus-visible,
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > [aria-label="Pontaj"]:focus-within:has(> button:focus-visible) {
  outline: none !important;
  background: #fff !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button[aria-label^="Stare Activ."] {
  color: #087d76 !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-sidebar-status-button[aria-label^="Stare Activ."]::before {
  background: #20242a !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-attendance-control[aria-label="Pontaj"] > button.profile-attendance-action[role="switch"] {
  background: #fff !important;
  color: #20242a !important;
}
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-attendance-control[aria-label="Pontaj"] > button.profile-attendance-action[role="switch"] > img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}
/* Running attendance is a dot beside the clock, never a filled tile. */
html body #root .profile-sidebar-panel > .profile-sidebar-status-control > .profile-sidebar-status-toolbar > .profile-attendance-control[aria-label="Pontaj"]:has(> button.profile-attendance-action[aria-checked="true"])::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: calc(50% + 7px) !important;
  top: 14px !important;
  width: 8px !important;
  height: 8px !important;
  border: 1px solid #fff !important;
  border-radius: 50% !important;
  background: #12a89c !important;
  pointer-events: none !important;
}

/* Non-blocking phone entry when WhatsApp has no destination number yet. */
dialog.profile-inspector-phone-dialog {
  box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  max-width: none;
  padding: 20px;
  border: 1px solid #d7e2df;
  border-radius: 16px;
  background: #fff;
  color: #20242a;
  box-shadow: 0 20px 50px #0f172a33;
  font: inherit;
}
dialog.profile-inspector-phone-dialog::backdrop {
  background: #0f172a66;
}
dialog.profile-inspector-phone-dialog form {
  display: grid;
  gap: 12px;
}
dialog.profile-inspector-phone-dialog h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
dialog.profile-inspector-phone-dialog label {
  font-size: 14px;
  font-weight: 600;
}
dialog.profile-inspector-phone-dialog input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #cbdad7;
  border-radius: 8px;
  font: inherit;
}
dialog.profile-inspector-phone-dialog .profile-inspector-phone-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
dialog.profile-inspector-phone-dialog button {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid #cbdad7;
  border-radius: 8px;
  background: #fff;
  color: #20242a;
  font: inherit;
  cursor: pointer;
}
dialog.profile-inspector-phone-dialog button[type="submit"] {
  border-color: #12a89c;
  background: #12a89c;
  color: #fff;
}